three.js着色器材质的内置变量示例详解


Posted in Javascript onAugust 16, 2020

什么是着色器?

固定渲染管线: ——标准的几何&光照(T&L)管线,功能是固定的,它控制着世界、视、投影变换及固定光照控制和纹理混合。T&L管线可以被渲染状态控制,矩阵,光照和采制参数。如果有了固定渲染管线,编写程序就比较容易了,因为所有的变换都是由固定渲染管线来完成的,但是缺点就是自由度低。固定渲染管线只能完成一些最基本的操作,如果想要做一些特殊的处理,就比较麻烦了。

可编辑渲染管线:——WebGL中不存在固定渲染管线,坐标变换必须全部由自己来做,这个记述了坐标变换的机制就叫做着色器(Shader),这样可以由程序员控制的机制叫做可编辑渲染管线。而着色器又有 处理几何图形顶点的顶点着色器和处理像素的片段着色器两种类型。由于WebGL中没有固定管线,所以必须准备好顶点着色器和片段着色器。

这篇郭先生说一下three.js着色器的内置变量,分别是

  1. gl_PointSize:在点渲染模式中,控制方形点区域渲染像素大小(注意这里是像素大小,而不是three.js单位,因此在移动相机是,所看到该点在屏幕中的大小不变)
  2. gl_Position:控制顶点选完的位置
  3. gl_FragColor:片元的RGB颜色值
  4. gl_FragCoord:片元的坐标,同样是以像素为单位
  5. gl_PointCoord:在点渲染模式中,对应方形像素坐标

他们或者单个出现在着色器中,或者组团出现在着色器中,是着色器的灵魂。下面来分别说一说他们的意义和用法。

1. gl_PointSize

gl_PointSize内置变量是一个float类型,在点渲染模式中,顶点由于是一个点,理论上我们并无法看到,所以他是以一个正对着相机的正方形面表现的。使用内置变量gl_PointSize主要是用来设置顶点渲染出来的正方形面的相素大小(默认值是0)。

void main() {
 gl_PointSize = 10.0;
}

2. gl_Position

gl_Position内置变量是一个vec4类型,它表示最终传入片元着色器片元化要使用的顶点位置坐标。vec4(x,y,z,1.0),前三个参数表示顶点的xyz坐标值,第四个参数是浮点数1.0。

void main() {
 gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}

3. gl_FragColor

gl_FragColor内置变量是vec4类型,主要用来设置片元像素的颜色,它的前三个参数表示片元像素颜色值RGB,第四个参数是片元像素透明度A,1.0表示不透明,0.0表示完全透明。

void main() {
 gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}

4. gl_FragCoord

gl_FragCoord内置变量是vec2类型,它表示WebGL在canvas画布上渲染的所有片元或者说像素的坐标,坐标原点是canvas画布的左上角,x轴水平向右,y竖直向下,gl_FragCoord坐标的单位是像素,gl_FragCoord的值是vec2(x,y),通过gl_FragCoord.x、gl_FragCoord.y方式可以分别访问片元坐标的纵横坐标。这里借了一张图

three.js着色器材质的内置变量示例详解

下面我们举个例子

fragmentShader: `
 void main() {
  if(gl_FragCoord.x < 600.0) {
   gl_FragColor = vec4(1.0,0.0,0.0,1.0);
  } else {
   gl_FragColor = vec4(1.0,1.0,0.0,1.0);
  }
 }
`

three.js着色器材质的内置变量示例详解

这里以600像素为分界,x值小于600像素的部分,材质被渲染成红色,大于的部分为黄色。

5. gl_PointCoord

gl_PointCoord内置变量也是vec2类型,同样表示像素的坐标,但是与gl_FragCoord不同的是,gl_FragCoord是按照整个canvas算的x值从[0,宽度],y值是从[0,高度]。而gl_PointCoord是在点渲染模式中生效的,而它的范围是对应小正方形面,同样是左上角[0,0]到右下角[1,1]。

6. 内置变量练习

五个内置变量我们都大致的说了一遍,下面用一个小案例来试用一下除了gl_FragCoord的其他四个。先上图,在线案例请点击。

three.js着色器材质的内置变量示例详解

var planeGeom = new THREE.PlaneGeometry(1000, 1000, 100, 100);
uniforms = {
 time: {
  value: 0
 }
}
var planeMate = new THREE.ShaderMaterial({
 transparent: true,
 side: THREE.DoubleSide,
 uniforms: uniforms,
 vertexShader: `
    uniform float time;
  void main() {
   float y = sin(position.x / 50.0 + time) * 10.0 + sin(position.y / 50.0 + time) * 10.0;
   vec3 newPosition = vec3(position.x, position.y, y * 2.0 );
   gl_PointSize = (y + 20.0) / 4.0;
   gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );
  }
 `,
 fragmentShader: `
  void main() {
   float r = distance(gl_PointCoord, vec2(0.5, 0.5));
   if(r < 0.5) {
    gl_FragColor = vec4(0.0,1.0,1.0,1.0);
   }
  }
 `
})
var planeMesh = new THREE.Points(planeGeom, planeMate);
planeMesh.rotation.x = - Math.PI / 2;
scene.add(planeMesh);

好了这篇就说到这了,再见。

总结

到此这篇关于three.js着色器材质的内置变量的文章就介绍到这了,更多相关three.js着色器材质内置变量内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
datagrid框架的删除添加与修改
Apr 08 Javascript
Highcharts 非常实用的Javascript统计图demo示例
Jul 03 Javascript
jqGrid读取选择的多行的某个属性代码
May 18 Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 Javascript
JS 实现倒计时数字时钟效果【附实例代码】
Mar 30 Javascript
JavaScript 字符串常用操作小结(非常实用)
Nov 30 Javascript
微信小程序 tabs选项卡效果的实现
Jan 05 Javascript
如何使用Bootstrap创建表单
Mar 29 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
详解JavaScript原生封装ajax请求和Jquery中的ajax请求
Feb 14 jQuery
express + jwt + postMan验证实现持久化登录
Jun 05 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 #Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 #Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
Aug 15 #Javascript
Vue使用axios引起的后台session不同操作
Aug 14 #Javascript
解决VUE项目localhost端口服务器拒绝连接,只能用127.0.0.1的问题
Aug 14 #Javascript
vue项目在线上服务器访问失败原因分析
Aug 14 #Javascript
vue设置全局访问接口API地址操作
Aug 14 #Javascript
You might like
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
zeroclipboard复制到剪切板的flash
2010/08/04 Javascript
jQuery在IE下使用未闭合的xml代码创建元素时的Bug介绍
2012/01/10 Javascript
JS打开图片另存为对话框实现代码
2012/12/26 Javascript
jQuery div层的放大与缩小简单实现代码
2013/03/28 Javascript
JS弹出层的显示与隐藏示例代码
2013/12/27 Javascript
jQuery蓝色风格滑动导航栏代码分享
2015/08/19 Javascript
js简单网速测试方法完整实例
2015/12/15 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
JS禁止查看网页源代码的实现方法
2016/10/12 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
Vue SPA单页应用首屏优化实践
2018/06/28 Javascript
详解Vue CLI3配置解析之css.extract
2018/09/14 Javascript
浅谈Javascript常用正则表达式应用
2019/03/08 Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
2020/10/30 Javascript
使用django-suit为django 1.7 admin后台添加模板
2014/11/18 Python
关于Python面向对象编程的知识点总结
2017/02/14 Python
python跳过第一行快速读取文件内容的实例
2018/07/12 Python
Python面向对象之类和对象属性的增删改查操作示例
2018/12/14 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
浅谈keras.callbacks设置模型保存策略
2020/06/18 Python
matplotlib之属性组合包(cycler)的使用
2021/02/24 Python
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
经贸韩语专业大学生职业规划
2014/02/14 职场文书
幼儿园小班评语
2014/04/18 职场文书
广告艺术设计专业自荐书
2014/07/08 职场文书
党政领导班子民主生活会整改措施
2014/09/18 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
2014幼儿园教育教学工作总结
2014/12/17 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
单位租车协议书
2015/01/29 职场文书
2015年物业管理员工工作总结
2015/10/15 职场文书