简单了解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的10个怪癖和秘密分享
Aug 28 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
JS基于面向对象实现的拖拽库实例
Sep 24 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
JavaScript全屏和退出全屏事件总结(附代码)
Aug 17 Javascript
微信小程序实现笑脸评分功能
Nov 03 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
jQuery实现倒计时功能完整示例
Jun 01 jQuery
如何用JS实现网页瀑布流布局
Apr 24 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/19 PHP
利用php + Laravel如何实现部署自动化详解
2017/10/11 PHP
thinkPHP5框架分页样式类完整示例
2018/09/01 PHP
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
DOM节点删除函数removeChild()用法实例
2015/01/12 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
2015/06/19 Javascript
javascript入门之window对象【新手必看】
2016/11/22 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
2018/01/16 Javascript
React项目动态设置title标题的方法示例
2018/09/26 Javascript
从0到1构建vueSSR项目之路由的构建
2019/03/07 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python完全新手教程
2007/02/08 Python
Python实现注册登录系统
2017/08/08 Python
Linux(Redhat)安装python3.6虚拟环境(推荐)
2018/05/05 Python
Python定义函数功能与用法实例详解
2019/04/08 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Django框架实现在线考试系统的示例代码
2020/11/30 Python
css3实例教程 一款纯css3实现的环形导航菜单
2014/10/20 HTML / CSS
H5页面适配iPhoneX(就是那么简单)
2019/12/02 HTML / CSS
味多美官网:蛋糕订购,100%使用天然奶油
2017/11/10 全球购物
LUISAVIAROMA德国官网:时尚奢侈品牌购物网站
2020/11/12 全球购物
XML文档定义有几种形式?它们之间有何本质区别?解析XML文档有哪几种方式?
2016/01/12 面试题
创建省级文明单位实施方案
2014/02/27 职场文书
颐和园的导游词
2015/01/30 职场文书
新手开公司创业注意事项有哪些?
2019/07/29 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android
一文了解MySQL二级索引的查询过程
2022/02/24 MySQL