简单了解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 相关文章推荐
JS应用之禁止抓屏、复制、打印
Feb 21 Javascript
jquery下实现overlay遮罩层代码
Aug 25 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
js动态创建、删除表格示例代码
Aug 07 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
jQuery图片旋转插件jQueryRotate.js用法实例(附demo下载)
Jan 21 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
Jan 23 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
Mar 25 Javascript
vue2.0中goods选购栏滚动算法的实现代码
May 17 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
Aug 23 Javascript
vue-cli实现多页面多路由的示例代码
Jan 30 Javascript
微信小程序实现拼图小游戏
Oct 22 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下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
php mysql like 实现多关键词搜索的方法
2016/10/29 PHP
thinkphp 字母函数详解T/I/N/D/M/A/R/U
2017/04/03 PHP
Jquery下:nth-child(an+b)的使用注意
2011/05/28 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
深入浅出webpack教程系列_安装与基本打包用法和命令参数详解
2017/09/10 Javascript
使用webpack-dev-server处理跨域请求的方法
2018/04/18 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
JavaScript实现单点登录的示例
2020/09/23 Javascript
vue实现简单的登录弹出框
2020/10/26 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
Python程序设计入门(1)基本语法简介
2014/06/13 Python
python复制与引用用法分析
2015/04/08 Python
python实现数组插入新元素的方法
2015/05/22 Python
Django模板变量如何传递给外部js调用的方法小结
2017/07/24 Python
Python中单例模式总结
2018/02/20 Python
redis之django-redis的简单缓存使用
2018/06/07 Python
Django Celery异步任务队列的实现
2019/07/24 Python
python实现打砖块游戏
2020/02/25 Python
Python实现的北京积分落户数据分析示例
2020/03/27 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
就业表自我评价分享
2014/02/06 职场文书
路政管理求职信
2014/06/18 职场文书
个人融资协议书
2014/10/02 职场文书
2015年教师节主持词
2015/07/03 职场文书
Python可视化学习之seaborn调色盘
2022/02/24 Python
Win10服务主机占用内存怎么办?Win10服务主机进程占用大量内存解决方法
2022/09/23 数码科技