可视化/数字孪生专业社区
资源中心
问答
文章
实用工具
ByteVCharts
开源中台
申请建模
申请帮助
登录
注册
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
申请协助
此单为
付费
协助
×
为协助帮威客用户快速入门,帮威客平台可损供用户特定项目的框架代码开发服务。该服务可为用户快速构建符合项目基本需求的3D可视化框架代码资源(包括源码、3D模型、贴图、数据等),用户的技术团队可在此基础上快速上手,大幅提高3D可视化项目成功基础。
预算金额
公司名称
联系人
微信号
手机号码
提交申请
业务咨询
开发咨询
微信咨询
杜老师
黄老师
熊老师
支付信息
×
购买文章
9.顶点和片元着色器
订单金额
¥
0
实付金额
¥
0
我已阅读并同意ByteV组件购买协议
取消
提交订单
支付宝支付
微信支付
提交订单
1
点赞
0
评论
收藏
分享
举报
9.顶点和片元着色器
小白
关注
已关注
0
1
0
1873
发表于 2020-05-13 10:24:45
# 顶点着色器和片元着色器 WebGL的着色器代码分为顶点着色器代码和片元着色器代码两部分,顶点着色器代码会在GPU的顶点着色器单元执行,片元着色器代码会在GPU的片元着色器单元执行,在WebGL渲染管线流程中,或者说GPU的渲染流程中,顶点着色器代码先执行处理顶点,得到一系列片元,然后再执行片元着色器代码处理片元。 ### `main()`函数 顶点着色器和片元着色器代码都有一个唯一的主函数`main()`,attribute、varying和uniform类型的变量需要在main函数之外声明,在main函数中通常编写,逐片元或逐顶点处理的代码。 // attribute、varying和uniform关键字声明变量的位置 void main(){ ... // 顶点着色代码或者片元着色器代码 ... } ### 着色器数据传递 javascript可以通过WebGL相关的API把一些数据传递给顶点着色器和片元着色器。 在着色器中通过attribute和uniform关键字声明的变量,需要通过javascript代码传递相关的数据。比如通过关键字attribute声明的顶点位置坐标数据,可以通过javascript调用WebGL相关API传递顶点数据。 ### 着色器编写形式 顶点着色器、片元着色器代码在javascript代码中以字符串的形式存在,javascript会通过调用相关WebGL API编译处理着色器代码,然后在CPU着色器单元执行。 在javascript语言中以字符串的形式编写着色器代码比较麻烦,可以在div元素中编写着色器代码,然后通过元素的`.innerText`属性返回着色器代码字符串即可。 WebGL着色器代码在javascript以字符串的形式存在。 //顶点着色器源码 var vertexShaderSource = '' + 'void main(){' + //给内置变量gl_PointSize赋值像素大小 ' gl_PointSize=20.0;' + //顶点位置,位于坐标原点 ' gl_Position =vec4(0.0,0.0,0.0,1.0);' + '}'; 为了方便,可以把着色器代码放在script标签中编写。 通过元素的`.innerText`属性以字符串形式获得script标签中的WebGL着色器代码 //顶点着色器源码 var vertexShaderSource = document.getElementById('vertexShader').innerText; //片元着色器源码 var fragShaderSource = document.getElementById('fragmentShader').innerText; javascript调用相关的WebGL API编译处理着色器代码 //创建顶点着色器对象 var vertexShader = gl.createShader(gl.VERTEX_SHADER); //创建片元着色器对象 var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER); //引入顶点、片元着色器源代码 gl.shaderSource(vertexShader,vertexShaderSource); gl.shaderSource(fragmentShader,fragmentShaderSource); //编译顶点、片元着色器 gl.compileShader(vertexShader); gl.compileShader(fragmentShader);
点击查看更多
全部评论
登录
|
注册
关于作者
小白
TA的个人主页
关注
已关注
文章
5942
粉丝
14
获赞
21
评论
26
访问
558759
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
《Google软件测试之道》读书笔记
Cesium数据(五)3D Tiles之i3dm 和 cmpt
cesium实战(三)设置地球颜色为任意纯色
推荐文章
ThreeJS 轮廓线特效 OutLinePath
(3)、React中使用ECharts——柱状图
31个惊艳的数据可视化作品,让你感受“数据之美”!
防抖节流
创建海洋特效组件 THREEJS 海洋效果 Shader实现
文章目录
文章分享
×
扫一扫分享
复制链接