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 相关文章推荐
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
script标签的 charset 属性使用说明
Dec 04 Javascript
jQuery版仿Path菜单效果
Dec 15 Javascript
jQuery extend 的简单实例
Sep 18 Javascript
js中confirm实现执行操作前弹出确认框的方法
Nov 01 Javascript
jQuery实现鼠标划过添加和删除class的方法
Jun 26 Javascript
js实现兼容IE、Firefox的图片缩放代码
Dec 08 Javascript
JavaScript模拟鼠标右键菜单效果
Dec 08 Javascript
学习AngularJs:Directive指令用法(完整版)
Apr 26 Javascript
浅析JS中回调函数及用法
Jul 25 Javascript
微信小程序跳转到其他网页(外部链接)的实现方法
Sep 20 Javascript
js实现表格单列按字母排序
Aug 12 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/02/13 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
php版微信发红包接口用法示例
2016/09/23 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
通过 Dom 方法提高 innerHTML 性能
2008/03/26 Javascript
ASP.NET jQuery 实例2 (表单中使用回车在TextBox之间向下移动)
2012/01/13 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
Bootstrap + AngularJS 实现简单的数据过滤字符查找功能
2017/07/27 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
小程序关于请求同步的总结
2019/05/05 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
2019/07/07 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
Vue实现Header渐隐渐现效果的实例代码
2020/11/05 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python冲顶大会 快来答题!
2018/01/17 Python
Python实现OpenCV的安装与使用示例
2018/03/30 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python实现简单文件读写函数
2021/02/25 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
自荐信要包含哪些内容
2013/11/06 职场文书
工程监理应届生求职信
2013/11/09 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
大学生找工作求职信
2014/07/09 职场文书
2015年学校党支部工作总结
2015/04/01 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
Apache POI操作批量导入MySQL数据库
2022/06/21 Servers
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL