简单了解three.js 着色器材质


Posted in Javascript onAugust 03, 2020

说起three.js,着色器材质总是绕不过的话题,今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的,可以用简短的代码和绘制出十分丰富的图像,可以说着色器材质是脱离three.js的另一块知识,因此它十分难讲,我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。

1. 什么是着色器材质

着色器材质(ShaderMaterial)是一个用GLSL编写的小程序 ,在GPU上运行。它能够提供 materials 之外的效果,也可以将许多对象组合成单个Geometry或BufferGeometry以提高性能。

2. 着色器材质的变量

每个着色器材质都可以指定两种不同类型的shaders,他们是顶点着色器和片元着色器(Vertex shaders and fragment shaders)。

  • 顶点着色器首先运行; 它接收attributes, 计算/操纵每个单独顶点的位置,并将其他数据(varyings)传递给片元着色器。
  • 片元(或像素)着色器后运行; 它设置渲染到屏幕的每个单独的“片元”(像素)的颜色。

shader中有三种类型的变量: uniforms, attributes, 和 varyings

  • Uniforms是所有顶点都具有相同的值的变量。 比如灯光,雾,和阴影贴图就是被储存在uniforms中的数据。 uniforms可以通过顶点着色器和片元着色器来访问。
  • Attributes 与每个顶点关联的变量。例如,顶点位置,法线和顶点颜色都是存储在attributes中的数据。attributes 只 可以在顶点着色器中访问。
  • Varyings 是从顶点着色器传递到片元着色器的变量。对于每一个片元,每一个varying的值将是相邻顶点值的平滑插值。

注意:在shader 内部,uniforms和attributes就像常量;你只能使用JavaScript代码通过缓冲区来修改它们的值。

3. 着色器材质的使用

上面说了每个着色器材质都可以指定两种不同类型的shaders,不过如果我们不去指定这两个shaders而直接使用也不会报错,因为ShaderMaterial已经定义了默认的顶点着色器和片元着色器,他们的代码是这样的。

//顶点着色器代码
void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
//片元着色器代码
void main() {
  gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );
}

这里的projectionMatrix、modelViewMatrix和position都是three为我们设置好的变量,可以直接拿来用,前两个变量我们之前已经说了,而position就是每一个顶点的坐标值,当着色器代码执行时,会循环执行gl_Position和gl_FragColor设置顶点位置,和颜色插值。并且我们最终要设置的就是gl_Position和gl_FragColor。多的先不说,下面看一个小例子。

var geom = new THREE.SphereGeometry(10, 30, 20);
var mate = new THREE.ShaderMaterial({
  vertexShader: `
  varying vec3 vNormal;
  void main() {
        //将attributes的normal通过varying赋值给了向量vNormal
    vNormal = normal;
        //projectionMatrix是投影变换矩阵 modelViewMatrix是相机坐标系的变换矩阵 最后我们将y值乘以1.4得到了一个形如鸡蛋的几何体
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y * 1.4, position.z, 1.0 );
  }
  `,
  fragmentShader: `
    //片元着色器同样需要定义varying vec3 vNormal;
  varying vec3 vNormal;
  void main() {
        //vNormal是一个已经归一化的三维向量
    float pr = (vNormal.x + 1.0) / 2.0; //pr红色通道值范围为0~1
    float pg = (vNormal.y + 1.0) / 2.0; //pg绿色通道值范围为0~1
    float pb = (vNormal.z + 1.0) / 2.0; //pb蓝色通道值范围为0~1
    gl_FragColor=vec4(pr, pg, pb, 1.0); //最后设置顶点颜色,点与点之间会自动插值
  }
  `
})
var mesh = new THREE.Mesh(geom, mate);
scene.add(mesh)

简单了解three.js 着色器材质

这篇我们简单的操作顶点着色器和片元着色器绘制了一个五彩的鸡蛋,但是这还仅仅是一个静态的着色器,下一篇我们让着色器材质动起来。

以上就是简单了解three.js 着色器材质的详细内容,更多关于three.js 着色器材质的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
激活 ActiveX 控件
Oct 09 Javascript
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
May 04 Javascript
createElement与createDocumentFragment的点点区别小结
Dec 19 Javascript
Javascript继承(上)——对象构建介绍
Nov 08 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
javascript trim函数在IE下不能用的解决方法
Sep 12 Javascript
理解jquery事件冒泡
Jan 03 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
JS实现的集合去重,交集,并集,差集功能示例
Mar 13 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
May 12 Javascript
如何通过JS实现日历简单算法
Oct 14 Javascript
Element InputNumber 计数器的实现示例
Aug 03 #Javascript
解决Vue的文本编辑器 vue-quill-editor 小图标样式排布错乱问题
Aug 03 #Javascript
Vue 根据条件判断van-tab的显示方式
Aug 03 #Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 #Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 #Javascript
js实现点击上传图片并设为模糊背景
Aug 02 #Javascript
jQuery实现雪花飘落效果
Aug 02 #jQuery
You might like
php实现求相对时间函数
2015/06/15 PHP
php实现的http请求封装示例
2016/11/08 PHP
Yii框架表单提交验证功能分析
2017/01/07 PHP
php ajax数据传输和响应方法
2018/08/21 PHP
js常用函数 不错
2006/09/08 Javascript
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
基于JQuery的asp.net树实现代码
2010/11/30 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
2013/10/29 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
js+html5绘制图片到canvas的方法
2015/06/05 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
2015/10/30 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
原生javascript 学习之js变量全面了解
2016/07/14 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
详解基于 axios 的 Vue 项目 http 请求优化
2017/09/04 Javascript
浅谈webpack下的AOP式无侵入注入
2017/11/12 Javascript
JavaScript实现多重继承的方法分析
2018/01/09 Javascript
Python文件去除注释的方法
2015/05/25 Python
Python编程使用*解包和itertools.product()求笛卡尔积的方法
2017/12/18 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Python requests获取网页常用方法解析
2020/02/20 Python
Selenium常见异常解析及解决方案示范
2020/04/10 Python
关于tensorflow softmax函数用法解析
2020/06/30 Python
Python爬虫基于lxml解决数据编码乱码问题
2020/07/31 Python
python基于exchange函数发送邮件过程详解
2020/11/06 Python
pytest fixtures装饰器的使用和如何控制用例的执行顺序
2021/01/28 Python
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
便利店的创业计划书
2014/01/15 职场文书
高中军训感想800字
2014/02/23 职场文书
《雪儿》教学反思
2014/04/17 职场文书
管理标语大全
2014/06/24 职场文书
学校捐书倡议书
2015/04/27 职场文书
利用python Pandas实现批量拆分Excel与合并Excel
2021/05/23 Python