简单了解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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
Javascript简单实现可拖动的div
Oct 22 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
详解AngularJS中的表达式使用
Jun 16 Javascript
关于在Servelet中如何获取当前时间的操作方法
Jun 28 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
Feb 15 Javascript
vue ssr 指南详读
Jun 29 Javascript
vue+elementUi图片上传组件使用详解
Aug 20 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
JavaScript隐式类型转换代码实例
May 29 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和ACCESS写聊天室(八)
2006/10/09 PHP
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
PHP项目多语言配置平台实现过程解析
2020/05/18 PHP
js函数在frame中的相互调用详解
2014/03/03 Javascript
js判断页面中是否有指定控件的简单实例
2014/03/04 Javascript
jquery右下角自动弹出可关闭的广告层
2015/05/08 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
JavaScript函数节流和函数防抖之间的区别
2017/02/15 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
NodeJS模块与ES6模块系统语法及注意点详解
2019/01/04 NodeJs
vue实现购物车结算功能
2020/06/18 Javascript
[01:18:36]LGD vs VP Supermajor 败者组决赛 BO3 第一场 6.10
2018/07/04 DOTA
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
操作Windows注册表的简单的Python程序制作教程
2015/04/07 Python
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
Python实现删除排序数组中重复项的两种方法示例
2019/01/31 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
flask框架路由常用定义方式总结
2019/07/23 Python
Python 调用 Outlook 发送邮件过程解析
2019/08/08 Python
基于pandas中expand的作用详解
2019/12/17 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
Bowflex美国官方网站:高级家庭健身器材
2017/12/22 全球购物
Vilebrequin欧洲官网:法国豪华泳装品牌(男士沙滩裤)
2018/04/14 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
建筑工程专业毕业生自荐信
2013/10/19 职场文书
摄影专业毕业生求职信
2014/03/13 职场文书
银行先进个人事迹材料
2014/05/11 职场文书
班级活动总结格式
2014/08/30 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android