使用shader造型函数绘制图形
使用shader造型函数绘制图形
1.shader片段着色器基础
[1]片段着色器的并行处理结构
片段着色器并行处理（parallel processing）为了能使许多管线并行运行，每一个线程必须与其他的相独立，因此也出现了很多限制：
- 所有数据必须以相同的方向流动
- 无法检查其他线程的输出结果，修改输入的数据，或者把一个线程的输出结果输入给另一个线程
简单理解：屏幕中的每个像素都会执行一次片段着色器代码（同时执行），没有执行先后的概念
[2]Uniforms
可以把 uniforms 想象成连通 GPU 和 CPU 的许多小的桥梁，尽管每个线程和其他线程之间不能有数据交换，但我们能从CPU给每个GPU线程输入数据。因为显卡的架构，所有线程的输入值必须统一（uniform），而且必须设为只读。也就是说，每条GPU线程接收相同的数据，并且是不可改变的数据。
#ifdef GL_ES
precision mediump float;
#endifuniform vec2 u_resolution; //画布尺寸vec2(宽，高)
uniform vec2 u_mouse; //鼠标位置vec2（在屏幕中的那个位置）
uniform float u_time; //shader运行时间（加载后的秒数）void main() {gl_FragColor = vec4(abs(sin(u_time)),0.0,0.0,1.0);
}
[3]gl_FragCoord
gl_FragCoord存储了活动线程正在处理的像素或屏幕碎片的坐标，有了它我们就知道了屏幕上的哪一个线程正在运转。因为是并行处理的，将其理解为屏幕的每个像素坐标
下面用图快速理解归于化代码vec2 st = gl_FragCoord.xy/u_resolution.xy;
#ifdef GL_ES
precision mediump float;
#endifuniform vec2 u_resolution; //画布尺寸(宽，高)
uniform vec2 u_mouse; //鼠标位置（在屏幕中的那个位置）
uniform float u_time; //shader运行时间（加载后的秒数）void main() {vec2 st = gl_FragCoord.xy/u_resolution.xy;gl_FragColor = vec4(st.x,st.y,0.0,1.0);
}
gl_FragCoord获取到屏幕的每个坐标，除于u_resolution，对坐标进行了规范化。这样做是为了使所有的值落在 0.0 到 1.0 之间，这样就可以轻松把 X 或 Y 的值映射到红色或者绿色通道。
是不是和之前的编程有所不同？想想shader 的并行处理特性，是不是很
使用shader造型函数绘制图形相关推荐
- 用r语言画出y = ax^2 + bx + c,R语言中使用curve函数绘制常用函数曲线
前面文章中介绍了使用plot函数绘制图形的方法.本文介绍一下使用R中curve函数绘制常见函数曲线的方法. 1.curve函数简介 curve函数语法格式如下: curve(expr, from = ...
- html绘制图形的关键三步,基于HTML5的绘图——绘制简单图形
绘制矩形 HTML5中实现绘制矩形的效果可以调用上下对象的三个函数fillRect().strokeRect()和clearRect().这些函数的语法格式如下所示: context.fillRect ...
- 绘制多边形_XDGE_RayMarchine 1- 利用Frag Shader绘制图形
转载于小道的博客园 XDGE_RayMarchine 1- 利用Frag Shader绘制图形www.cnblogs.com # Render/RayMarchine/Base 1- 利用Frag绘 ...
- 【MATLAB】三维图形绘制 ( 绘制网格 + 等高线 | meshc 函数 | 绘制平面 + 等高线 | surfc 函数 )
文章目录 一.绘制网格 + 等高线 1.meshc 函数 2.代码示例 二.绘制平面 + 等高线 1.surfc 函数 2.代码示例 一.绘制网格 + 等高线 1.meshc 函数 meshc 函数参 ...
- matlab 绘制符号函数,DAY8 MATLAB学习笔记—simulink入门、MATLAB符号函数的图形绘制...
如何打开simulink: 启动simulink: 先打开MATLAB软件界面 第一步打开simulink 第二步在command windows输入 simulink然后enter,等待 有很多模块 ...
- MATLAB-mesh/ezmesh函数三维图形绘制
l ) mesh 函数生成由X.Y和Z指定的网线面,由C指定颜色的三维网格图.具体调用方法如下. mesh(Z):分别以矩阵Z的行.列下标作为x轴和y轴的自变量绘图. mesh(X , Y,Z):最常 ...
- matlab画图总结——二维图plot函数、图形标注和坐标轴控制、饼图、条形图、排列图；三维图的绘制
Matlab画图总结 1. 二维数据曲线图 1.1 绘制二维曲线的基本函数 1．plot()函数 2． 含多个输入参数的plot函数 3． 含选项的plot函数 4． 双纵坐标函数plotyy 1.2 ...
- 力扣（LeetCode）个人主页draw()方法怎么画出好看图案？ // 使用函数 draw 绘制图形,反斜杠 “\“ 请使用 “\\“ 转义
零.引言 先赞后看,月薪过万! 一. 力扣彩蛋 力扣在这里默认配置了一个图形,点击之后还能看到一段代码. draw("_ _ _ _ __ __ _ _ | | | | | | | \ \ ...
- 【MATLAB】基本绘图 ( plot 函数绘制多个图形 | legend 函数标注图形 | 图形修饰 )
文章目录 一.plot 函数绘制多个图形 二.legend 函数标注图形 三.图形修饰 一.plot 函数绘制多个图形 使用单个 plot 函数绘制多条曲线 : plot 函数可以传入多个可变参数 , ...
最新文章
- 学习编写Unity计算着色器 Learn to Write Unity Compute Shaders
- 面试题总结~~（google level）
- Mac 系统如何实现挂载NTFS文件系统
- 百度不收录你网站的原因
- Java SpringMVC实现PC端网页微信扫码支付完整版
- 01_SQlite数据库简介
- go float64 比较_Go 每日一库之 plot
- 柔性太阳能电池pdf_房车旅行如何做到电力无忧，那就选择一套合适的太阳能供电系统吧...
- Java字符串截取（substring）
- ylbtech-dbs:ylbtech-7,welfareSystem(福利发放系统)
- cesium添加高德路网中文注记图及高德在线地图介绍
- 微信小程序WeUI 前端样式库
- 自己做的SIP软电话
- 论自律对成长的重要性
- web页面jsp页面的打印
- FTPClientUtil FTP客户端工具
- Java-装箱和拆箱（谁动了我的变量？）
- 学习笔记——LED跑马灯
- python—计算矩阵标准差
- IP/TCP协议详解
热门文章