简单了解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 相关文章推荐
Javascript中的delete介绍
Sep 02 Javascript
jQuery contains过滤器实现精确匹配使用方法
Apr 12 Javascript
select、radio表单回显功能实现避免使用jquery载入赋值
Jun 08 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
jQuery中使用each处理json数据
Apr 23 Javascript
浅析BootStrap模态框的使用(经典)
Apr 29 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 Javascript
深入理解requireJS-实现一个简单的模块加载器
Jan 15 Javascript
vsCode安装使用教程和插件安装方法
Aug 24 Javascript
validform表单验证的实现方法
Mar 08 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
php写app用的框架整理
2019/09/29 PHP
JQuery模板插件 jquery.tmpl 动态ajax扩展
2011/11/10 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
js 获取元素下面所有li的两种方法
2014/04/14 Javascript
jQuery获取iframe的document对象的方法
2014/10/10 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
详解jquery事件delegate()的使用方法
2016/01/25 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
Python IDE Pycharm中的快捷键列表用法
2019/08/08 Python
django之自定义软删除Model的方法
2019/08/14 Python
python多线程并发及测试框架案例
2019/10/15 Python
Python函数参数分类原理详解
2020/05/28 Python
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
施工资料员岗位职责
2014/01/06 职场文书
土木建筑学生自我评价
2014/01/14 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
餐厅感恩节活动策划方案
2014/10/11 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
家长学校教学计划
2015/01/19 职场文书
离婚上诉状范文
2015/05/23 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
文艺有韵味的诗句(生命类、亲情类...)
2019/07/11 职场文书
python如何正确使用yield
2021/05/21 Python
python b站视频下载的五种版本
2021/05/27 Python
浅谈哪个Python库才最适合做数据可视化
2021/06/28 Python