three.js 着色器材质之glsl内置函数
郭先生发现在开始学习three.js着色器材质时，我们经常会无从下手，辛苦写下的着色器，也会因莫名的报错而手足无措。原因是着色器材质它涉及到另一种语言–GLSL，只有懂了这个语言，我们才能更好的写出着色器材质，利用好的我们的GPU。这篇说一说glsl内置函数。 1. 和角度相关的函数 下面 ...
原文：three.js 着色器材质之纹理
今天郭先生说一说如何在three.js着色器中添加纹理，先看看今天要完成的效果，在线案例请点击博客原文。 这里我们分别引入三个纹理，分别是地球的表面纹理，对应的海拔灰度图，和云朵的纹理。使用表面纹理还是地球的外貌，海拔灰度图给地球添加凹凸效果，云朵纹理给地球添加云朵效果。下面我们说一说代码。 . 绘制几何体，加载贴图 我们只需要在一个球体中进行操作，所以新建一个球体。然后分别加载三张纹理。 . 使 ...
2020-08-10 12:06 6 1808 推荐指数：
相关推荐
three.js 着色器材质之变量（二）
上一篇郭先生在例子中用到了着色器变量中的uniform和varying。这篇继续结合例子将一下attribute变量，在使用过程中也发现由于three.js的版本迭代，之前的一些属性和参数已经发生了改变，ShaderMaterial也不需要传递attributes属性值，查看源码我们可以看到 ...
three.js 着色器材质内置变量
这篇郭先生说一下three.js着色器的内置变量，分别是 gl_PointSize：在点渲染模式中，控制方形点区域渲染像素大小（注意这里是像素大小，而不是three.js单位，因此在移动相机是，所看到该点在屏幕中的大小不变） gl_Position：控制顶点选完的位置 ...
three.js 着色器材质之变量（三）
这篇郭先生在练习一下着色器变量，在度娘上面或者官网上经常看到类似水波一样的效果，这篇就试着做一个这样的效果，顺便巩固一下顶点着色器和片元着色器，毕竟多多练习才能更好地掌握。效果如下图，在线案例请点击博客原文。 这里用到了用到了顶点着色器和片元着色器。 1. 设置几何体 设置一个几何体 ...
three.js 着色器材质之变量（一）
上一篇说顶点着色器和片元着色器的皮毛，这篇郭先生说一说着色器变量，通过变量可以设置材质。先看看今天要做的如下图。在线案例请点击博客原文。 在这个案例之前，我们先复习一下着色器变量 Uniforms是所有顶点都具有相同的值的变量。 比如灯光，雾，和阴影贴图就是被储存在uniforms中 ...
three.js 着色器材质之初识着色器
说起three.js，着色器材质总是绕不过的话题，今天郭先生就说一说什么是着色器材质。着色器材质是很需要灵感和数学知识的，可以用简短的代码和绘制出十分丰富的图像，可以说着色器材质是脱离three.js的另一块知识，因此它十分难讲，我们只能在一个一个案例中逐渐掌握着色器语言的使用技巧。 1. ...
Three.js基础探寻八——法向材质与材质的纹理贴图
4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向，有时候对于调试很有帮助。 法向材质的设定很简单，甚至不用设置任何参数： 材质的颜色与照相机与该物体的角度相关，下面我们只改变照相机位置，观察两个角度的颜色变化： camera.position.set ...
three.js 材质
今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关， 因此，如果您决定使用不同的渲染器，不必重写材质。 1. three.js材质基类 所有其他材质类型都继承了Material。 下面是一些属性： .alphaTest : Float设置 ...