简单了解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 Object.extend
May 18 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
js indexOf()定义和用法
Oct 21 Javascript
jquery中each遍历对象和数组示例
Aug 05 Javascript
JS清除选择内容的方法
Jan 29 Javascript
javascript中scrollTop详解
Apr 13 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
通过隐藏iframe实现无刷新上传文件操作
Mar 16 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
Vuex 使用 v-model 配合 state的方法
Nov 13 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
信用卡效验程序
2006/10/09 PHP
php常用Stream函数集介绍
2013/06/24 PHP
php在数组中查找指定值的方法
2015/03/17 PHP
php中get_defined_constants函数用法实例分析
2015/05/12 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
Javascript的构造函数和constructor属性
2010/01/09 Javascript
js模拟点击事件实现代码
2012/11/06 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
2013/11/27 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
jQuery插件kinMaxShow扩展效果用法实例
2015/05/04 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
2015/08/25 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
javascript断点调试心得分享
2016/04/23 Javascript
vue自动化表单实例分析
2018/05/06 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
Python3 伪装浏览器的方法示例
2017/11/23 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Django shell调试models输出的SQL语句方法
2019/08/29 Python
Python版中国省市经纬度
2020/02/11 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
公司新年寄语
2014/04/04 职场文书
高中教师考核方案
2014/05/18 职场文书
幼儿园师德师风学习材料
2014/05/29 职场文书
2014第二批党员干部对照“四风”找差距检查材料思想汇报
2014/09/18 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
适合毕业生创业的项目怎么找?
2019/08/08 职场文书
高中班主任工作总结(范文)
2019/08/20 职场文书
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle
SpringBoot集成MongoDB实现文件上传的步骤
2022/04/18 MongoDB