简单了解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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
JavaScript中的noscript元素属性位置及作用介绍
Apr 11 Javascript
jQuery之日期选择器的深入解析
Jun 19 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
jQuery on方法传递参数示例
Dec 09 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
JS扩展方法实例分析
Apr 15 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
javascript中关于类型判断的一些疑惑小结
Oct 14 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
微信小程序选择图片控件
Jan 19 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控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php阻止页面后退的方法分享
2014/02/17 PHP
PHP加密解密类实例分析
2015/04/20 PHP
thinkphp分页集成实例
2017/07/24 PHP
php数据结构之顺序链表与链式线性表示例
2018/01/22 PHP
js常用函数 不错
2006/09/08 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
LABjs、RequireJS、SeaJS的区别
2014/03/04 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
js利用clipboardData实现截屏粘贴功能
2016/10/12 Javascript
BootStrap数据表格实例代码
2017/09/13 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
JavaScript数据结构与算法之检索算法实例分析【顺序查找、最大最小值、自组织查询】
2019/02/22 Javascript
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
Vue使用vue-recoure + http-proxy-middleware + vuex配合promise实现基本的跨域请求封装
2019/10/21 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Vue中通过vue-router实现命名视图的问题
2020/04/23 Javascript
vue样式穿透 ::v-deep的具体使用
2020/06/04 Javascript
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python字典简介以及用法详解
2016/11/15 Python
人机交互程序 python实现人机对话
2017/11/14 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Pandas之ReIndex重新索引的实现
2019/06/25 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
美国时尚女装在线:Missguided
2016/12/03 全球购物
美国女士内衣在线折扣商店:One Hanes Place
2019/03/24 全球购物
如何利用find命令查找文件
2015/02/07 面试题
视光学专业毕业生推荐信
2013/10/28 职场文书
医科学校毕业生自荐信
2013/11/09 职场文书
行政助理岗位职责范文
2013/12/03 职场文书
煤矿班组长的职责
2013/12/25 职场文书
祖国在我心中演讲稿
2014/01/15 职场文书