three.js学习笔记(十四)——Shaders着色器
什么是着色器?
实际上着色器是WebGL的主要组件之一。如果我们在没接触Three.js情况下开始学习WebGL,着色器将是我们首先且必须要学的知识,这也是为什么原生WebGL很难入门。
着色器是一种使用GLSL(OpenGL Shading Language
)编写并在GPU上运行的程序。它们被用于定位几何体的每个顶点,并为该几何体的每个可见像素着色。使用“像素Pixel”来描述其实并不准确,因为渲染的每个点不一定与屏幕上的每个像素相匹配,因此我们更倾向于使用术语“片元fragment
”。
之后我们会向着色器发送大量数据,如顶点坐标、网格变换、摄像机及其视野范围的信息、颜色、纹理、灯光、雾等参数。然后,GPU会按照着色器的指示处理所有的这些数据,接着几何体便出现在渲染中。
有俩种类型的着色器,并且我们都会用到它们。
顶点着色器Vertex Shader
顶点着色器(Vertex Shader)的作用是定位几何体的顶点。其思想是发送顶点位置、网格变换(如定位position
、旋转rotation
和缩放scale
)、摄影机信息(如定位position
、旋转rotation
和视野fov
)。然后,GPU将按照顶点着色器中的指示处理所有这些信息,以便将顶点投影到2D空间,该空间将成为我们的渲染render
,也就是我们的画布canvas
。
顶点着色器对顶点实现了一种通用的可编程方法。
使用顶点着色器时,其代码将应用于几何体的每个顶点。但有些数据(如顶点的位置)会在每个顶点之间发生变化。这种类型的数据(在顶点之间变化的数据)称为attribute
属性变量。
- attribute:使用顶点数组封装每个顶点的数据,一般用于每个顶点都各不相同的变量,如顶点的位置等。
但有些数据不需要像网格的位置那样在每个顶点之间进行变换,用于对同一组顶点组成的单个3D物体中所有顶点都相同的变量,如当前光源的位置,相机的位置,这种类型的数据(顶点之间不发生变化的数据)称为uniform
统一变量。
- uniform:顶点着色器使用的常量数据,不能被着色器修改,一般用于对同一组顶点组成的单个3D物体中所有顶点都相同的变量,如当前光源的位置。
顶点着色器会首先触发,当放置完顶点后,GPU会知道几何体的哪些像素是可见的,然后可以接着下去使用片元着色器。
片元着色器Fragment Shader
片元着色器的作用是为几何体的每个可见片元(像素)进行着色。
我们会创建片元着色器,可以通过使用uniform
将数据(像是颜色)和着色器发送至GPU,之后GPU就会按照指令对每个片元进行着色。
片段着色器中最简单直接的指令是可以使用相同的颜色为所有片段着色。如果我们只设置了颜色属性,我们就得到了与MeshBasicMaterial
等效的材质(每个可见像素都被着色白色)。
参考 着色器语言三种变量attribute、uniform 和 varying
简单总结
- 顶点着色器渲染定位顶点位置
- 片段着色器为该几何体的每个可见片元(像素)进行着色
- 片段着色器在顶点着色器之后执行
- 在每个顶点之间会有变化的数据(如顶点的位置)称为
attribute
,只能在顶点着色器中使用 - 顶点之间不变的数据(如网格位置或颜色)称为
uniform
,可以在顶点着色器和片段着色器中使用 - 从顶点着色器发送到片元着色器中的插值计算数据被称为
varying
为什么要写着色器?
Three.js的内置材质试图涵盖尽可能多的情况,但是依旧有其局限性。如果我们想要突破限制,就必须自个写自己的着色器。
当然也可能是出于性能原因。像MeshStandardMaterial
这样的材质非常精细,涉及大量代码和计算。如果我们编写自己的着色器,我们可以将功能和计算保持在最小限度,这样就可以更好控制与优化演算性能了。
编写我们自己的着色器也是将后期处理添加到渲染中的一个很好的方法,但我们将在后面专门的课程中再看到这一点。
一旦掌握了着色器,它们将成为所有项目中不可或缺的必备工具。
使用原始着色器材质(RawShaderMaterial)创建自己的第一个着色器
要创建第一个着色器,我们需要创建特定的材质。该材质可以是着色器材质ShaderMaterial或原始着色器材质RawShaderMaterial。这两者之间的区别在于前者会自动将一些代码添加到着色器代码中(内置attributes和uniforms),而后者正如其名,什么都不会添加。
准备工作
我们的初始场景有一块MeshBasicMaterial材质的简单平面,将之材质替换为RawShaderMaterial
原始着色器材质。然后你会发现报错了,这是因为我们还没添加着色器。如前所述,我们需要同时提供顶点着色器和片元着色器,并在里面书写程序:
const material = new THREE.RawShaderMaterial({vertexShader: `uniform mat4 projectionMatrix;uniform mat4 viewMatrix;uniform mat4 modelMatrix;attribute vec3 position;void main(){gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);}`,fragmentShader: `precision mediump float;void main(){gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);}`
})
得到这样的一个结果:
分离两种着色器
新建一个shaders文件夹,在里面新建俩个文件vertex.glsl
和fragment.glsl
,将上边代码拷贝到对应文件中,再在vscode的插件商店安装shader languages support for VS code
,这样我们的.glsl
文件也就有了语法高亮提示。
之后导入:
import testVertexShader from './shaders/test/vertex.glsl'
import testFragmentShader from './shaders/test/fragment.glsl'
然而我们会报一个webpack错误,因为需要告诉webpack如何处理.glsl
文件。
去/bundler/webpack.common.js
,修改如下:
module.exports = {// ...module:{rules:[// ...// Shaders{test: /\.(glsl|vs|fs|vert|frag)$/,exclude: /node_modules/,use: ['raw-loader']}]}
}
这个规则仅告诉webpack提供文件的原始内容。然后重启服务,会看到与前面一样的场景。
我们在其他材质中介绍的大多数常见属性(如wireframe、side、transparent、flatShading)仍然适用于RawShaderMaterial
const material = new THREE.RawShaderMaterial({vertexShader: testVertexShader,fragmentShader: testFragmentShader,wireframe: true
})
但是像map
、alphaMap
、opacity
、 color
等属性将不再生效,因为我们需要自己在着色器中编写这些特性。
GLSL
OpenGL着色语言(OpenGL Shading Language)是用来在OpenGL中着色编程的语言,它是一种类C语言,下面先学习一下基础语法。
日志
没有控制台,因此无法记录值。这是因为代码针对每个顶点和每个片段执行。记录一个值是没有意义的。
缩进
缩进不重要,可以随意。
分号
任何指令的结尾都需要分号。哪怕忘记一个分号都可能导致编译错误,使得整个材料都不起作用。
变量
GLSL是一种强类型语言,如C语言一般。
不能在操作中混合使用float
和int
,会报错:
float a = 1.0;
int b = 2;
float c = a * b;
但是可以通过类型转换进行操作:
float a = 1.0;
int b = 2;
float c = a * float(b);
Vector 2
如果我们想存储具有x和y属性的2个坐标这样的值,我们可以使用vec2
vec2 foo = vec2(1.0, 2.0);
空的vec2将导致错误:
vec2 foo = vec2();
我们可以在创建vec2后更改这些属性:
vec2 foo = vec2(0.0);
foo.x = 1.0;
foo.y = 2.0;
执行vec2与浮点相乘等操作将同时操作x和y属性:
vec2 foo = vec2(1.0, 2.0);
foo *= 2.0;
Vector 3
vec3与vec2类似,但具有第三个名为z的属性。当需要3D坐标时,使用它非常方便:
vec3 foo = vec3(0.0);
vec3 bar = vec3(1.0, 2.0, 3.0);
bar.z = 4.0;
虽然我们可以使用x、y和z,但我们也可以使用r、g和b。这只是语法糖,结果完全一样。当我们使用vec3存储颜色时,它非常有效:
vec3 purpleColor = vec3(0.0);
purpleColor.r = 0.5;
purpleColor.b = 1.0;
vec3可以通过部分使用vec2来创建:
vec2 foo = vec2(1.0, 2.0);
vec3 bar = vec3(foo, 3.0);
我们也可以使用vec3的一部分来生成vec2:
vec3 foo = vec3(1.0, 2.0, 3.0);
vec2 bar = foo.xy;
Vector 4
最后,vec4的原理与前两个类似,但第四个值命名为w
或a
(颜色alpha)
vec4 foo = vec4(1.0, 2.0, 3.0, 4.0);
vec4 bar = vec4(foo.zw, vec2(5.0, 6.0));
还有其他类型的变量,如mat2
、mat3
、mat4
或sampler2D
,我们将在后面看到这些变量。
在着色器内,一般命名以
gl_
开头的变量是着色器的内置变量,除此之外webgl_
和_webgl
还是着色器保留字,自定义变量不能以webgl_
或_webgl
开头。变量声明一般包含<存储限定符><数据类型><变量名称>
,以attribute vec4 a_Position
为例,attribute表示存储限定符,vec是数据类型,a_Position为变量名称。
原生函数
GLSL有许多内置的经典函数,如sin、cos、max、min、pow、exp、mod、clamp,也有非常实用的函数,如cross、dot、mix、step、smoothstep、length、distance、reflect、refract、normalize。
不幸的是,没有对初学者友好的文档,而且大多数时候,我们在网络上进行搜索,结果通常出现在以下网站:
- Kronos Group OpenGL reference pages:本文档涉及OpenGL,但您将看到的大多数标准函数都与WebGL兼容。不要忘了WebGL只是一个访问OpenGL的JavaScript API。
- Book of shaders documentation:《Book of shaders》主要关注片元着色器,与Three.js无关。但是这是一个很好的学习资源,它有自己的词汇表。
理解顶点着色器
下面开始尝试理解着色器里面的内容。
首先注意的是,顶点着色器的目的是将几何体的每个顶点放置在2D渲染空间上。换句话说,顶点着色器将3D顶点坐标转换为2D画布坐标。
main函数
它会自动调用,并且不会返回return任何内容
void main()
{}
gl_Position
变量gl_Position
原本就已经声明好,是一个内置变量,我们只需重新分配它。
这个变量将会包含屏幕上的顶点的位置,main函数中的代码便是要正确设置该变量。
这条长代码将返回一个vec4
,这意味着我们可以直接在gl_Position
变量上使用其x、y、z和w属性。
void main()
{gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);gl_Position.x += 0.5;gl_Position.y += 0.5;
}
会看到平面往右上角移动,但是要注意,我们并没有在3D空间里边移动平面,虽然看起来像我们在Three.js里面控制位置一样。不过,我们确实是在2D空间上移动了平面。
如何理解上面的话,想象一下你在桌上画一幅带透视效果的图画,然后你将整张图画往右上角移动,但是图画中的透视效果并未因此而改变。
可能你想要知道如果gl_Position
的目标是在2D空间上定位顶点,那为什么还需要四个值?实际上这些坐标并不是精确的位于二维空间,而是位于我们说的需要四个维度的剪裁空间Clip Space
。
剪裁空间Clip Space
是指在-1到+1
范围内的所有3个方向(x、y和z)上的空间。这就像把所有东西都放在3D盒子里一样,任何超出此范围的内容都将被“剪裁”并消失。第四个值(w)负责透视。
幸运的是,所有这些都是自动完成的,作为初学者,我们不需要掌握所有东西,只用大概了解下就行。
但是我们到底向gl_Position
发送了什么?
Position attributes
首先,我们使用下面代码检索顶点位置:
attribute vec3 position;
请记住,相同的代码适用于几何体的每个顶点。属性变量attribute
是顶点之间唯一会发生变化的变量。相同的顶点着色器将应用于每个顶点,“position”属性将包含该特定顶点的x、y和z坐标。
然后,如上面所示的代码,我们将这个vec3转换成一个vec4,因为矩阵和gl_Position
都需要用到这个vec4:
gl_Position = /* ... */ vec4(position, 1.0);
Matrices uniforms
每个矩阵都将变换position
,直到我们得到最终的剪裁空间坐标。
我们的代码中有3个矩阵,因为它们的值对于几何体的所有顶点都是相同的,所以我们使用uniform
检索它们。
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
每个矩阵都将做一部分变换:
modelMatrix
将应用与网格相关的所有变换。如果我们缩放、旋转或移动网格,这些变换将包含在modelMatrix中并应用于position
。viewMatrix
将应用相对于相机的变换。如果我们向左旋转相机,顶点应该在右边。如果我们沿着网格的方向移动相机,顶点会变大,等等。projectionMatrix
将我们的坐标转换为最终的剪裁空间坐标。
如果想了解更多关于矩阵和坐标的信息,可以看这篇文章Coordinate-Systems
要应用矩阵,我们需要将其相乘。如果要将mat4
应用于变量,该变量必须是vec4
。
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4(position, 1.0);
实际上有一个代码更少的版本,便是将viewMatrix
和modelMatrix
组合成modelViewMatrix
,虽然代码更短但我们对每一步的控制权也就越弱:
uniform mat4 projectionMatrix;
uniform mat4 modelViewMatrix;attribute vec3 position;void main()
{gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
为了更好理解和控制position
,我们将如下面这样写更长些:
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;attribute vec3 position;void main()
{vec4 modelPosition = modelMatrix * vec4(position, 1.0);vec4 viewPosition = viewMatrix * modelPosition;vec4 projectedPosition = projectionMatrix * viewPosition;gl_Position = projectedPosition;
}
这些写法都是等效的,但是现在能够通过调整modelPosition
的值来移动整个模型:
void main()
{vec4 modelPosition = modelMatrix * vec4(position, 1.0);// 平面向上移动modelPosition.y += 1.0;// ...
}
void main()
{vec4 modelPosition = modelMatrix * vec4(position, 1.0);// 平面变波浪形modelPosition.z += sin(modelPosition.x * 10.0) * 0.1;// ...
}
理解片元着色器
片元着色器的代码将应用于几何体的每个可见片元(像素)。这就是为什么片元着色器运行在顶点着色器之后。
Precision
在最顶部有这样一条指令:
precision mediump float;
这条指令可以让我们决定浮点数的精度,有如下可能值
highp
:会造成性能影响,并可能在某些设备上无法工作。mediump
:我们通常使用这个。lowp
:会由于缺乏精确性而产生某些错误。
我们也可以设置顶点着色器的精度,但这不是必要的。
这一部分在使用着色器材质ShaderMaterial
会被自动处理,但现在我们使用的是原始着色器材质。
gl_FragColor
gl_FragColor
与gl_Position
相似只不过是用于颜色。跟前者一样是内置变量了,只需要在main函数中重新设置值。
这是一个vec4,前三个值是红色、绿色和蓝色通道(r、g、b),第四个值是alpha(a),下面这代码应用后会看到紫色几何体:
gl_FragColor = vec4(0.5, 0.0, 1.0, 1.0);
如果要降低alpha值使能够看出差异,还需要回到RawShaderMaterial
中将transparent
属性设置为true
:
const material = new THREE.RawShaderMaterial({vertexShader: testVertexShader,fragmentShader: testFragmentShader,transparent: true
})
Attributes
我们在前面已经有一个名为position
的attribute
属性变量,现在可以直接将这个属性添加到BufferGeometry
中。我们将为每个顶点添加一个随机值,并根据这个值在z轴上移动该顶点。
回到js中,我们要在创建完几何体后,再new一个32位的浮点数型数组Float32Array
,然后为了知道几何体中有多少个顶点,可以通过几何体的attributes
属性获取:
const count = geometry.attributes.position.count
const randoms = new Float32Array(count)
然后用随机值填充该数组:
for(let i = 0; i < count; i++)
{randoms[i] = Math.random()
}
最后,我们在BufferAttribute
中使用该数组,并将其添加到几何体的属性中:
geometry.setAttribute('aRandom', new THREE.BufferAttribute(randoms, 1))
setAttribute的第一个参数是我们设置的attribute
属性的名字,这也是下面在着色器中使用的名字。命名最好在前面加一个a
前缀代表属性。
BufferAttribute的第一个参数是数据数组,第二个参数是组成一个属性的值的数量。如果我们要发送一个位置,我们会使用3,因为位置由3个值(x、y和z)组成。但在这里,每个顶点只有1个随机值,所以我们使用1。
现在,我们可以在顶点着色器中检索该属性,并使用它移动顶点:
// ...
attribute float aRandom;void main()
{// ...modelPosition.z += aRandom * 0.1;// ...
}
最后得到一个尖锐峰峦状平面:
Varyings
现在我们还想用aRandom属性给片元着色。但可惜,我们没法直接在片元着色器中使用attribute
属性变量。
但是,有一种方法可以将数据从顶点着色器发送到片元着色器,称之为varying
可变量。我们必须在俩种着色器上都这样做。
在顶点着色器上,我们需要在main函数之前创建varying,这里将该变量命名为vRandom,用v作前缀好区分,然后在main函数中赋值:
// ...varying float vRandom;void main()
{// ...vRandom = aRandom;
}
然后在片元着色器用一样的方式:
precision mediump float;
varying float vRandom;
void main()
{gl_FragColor = vec4(0.5, vRandom, 1.0, 1.0);
}
最后观察到如下图:
varying
的一个有趣之处是,顶点之间的值是线性插值的,以此实现平滑渐变。如果GPU正在两个顶点之间绘制一个片元,一个顶点的变量为1.0,另一个顶点的变量为0.0,那么片元值将为0.5。
最后重新回归最初的普通平面。
Uniforms
统一变量uniform
是将数据从JavaScript发送到着色器的一种方式。
如果我们想使用同一个着色器但是参数不一样,以得到不同的结果,就可以使用uniform
。
两个着色器中都可以使用,其对每个顶点和片元的数据都是相同的。我们的代码中已经有了projectionMatrix、viewMatrix和modelMatrix,但我们没有创建它们,是Three.js创建的。
下面创建我们自己的统一变量uniform
。
为将统一变量添加到我们的material中,要使用uniforms
属性,我们要做一个波浪平面,并且能够控制波形频率:
const material = new THREE.RawShaderMaterial({vertexShader: testVertexShader,fragmentShader: testFragmentShader,uniforms:{frequency: { value: 10 }}
})
在这里我们将统一变量命名为frequency
,虽然不是强制性的,但最好在前面加个u前缀以将统一变量和其他数据区分开来:
const material = new THREE.RawShaderMaterial({vertexShader: testVertexShader,fragmentShader: testFragmentShader,uniforms:{uFrequency: { value: 10 }}
})
如果你也有在看其他的教程或示例,你可能会看到它是这样声明uniform
的:
uFrequency: { value: 10, type: 'float' }
在之前我们必须为其指定类型,但现在已经被弃用了。
现在,我们可以在着色器代码中检索该值,并在main函数中使用它:
uniform mat4 projectionMatrix;
uniform mat4 viewMatrix;
uniform mat4 modelMatrix;
uniform float uFrequency;attribute vec3 position;void main()
{// ...modelPosition.z += sin(modelPosition.x * uFrequency) * 0.1;// ...
}
然后你会发现结果是一样的,但现在我们可以在js中控制波形频率了。
让我们把频率frequency改为vec2来控制水平和垂直方向的波,这里使用Three.js中一个简单的vec2:
const material = new THREE.RawShaderMaterial({vertexShader: testVertexShader,fragmentShader: testFragmentShader,uniforms:{uFrequency: { value: new THREE.Vector2(10, 5) }}
})
然后回到着色器,将float
改为vec2
,在z轴上应用位移:
// ...
uniform vec2 uFrequency;// ...void main()
{// ...modelPosition.z += sin(modelPosition.x * uFrequency.x) * 0.1;modelPosition.z += sin(modelPosition.y * uFrequency.y) * 0.1;// ...
}
这些值现在由JavaScript控制,所以我们可以将它们添加到我们的Dat.GUI中:
gui.add(material.uniforms.uFrequency.value, 'x').min(0).max(20).step(0.01).name('frequencyX')
gui.add(material.uniforms.uFrequency.value, 'y').min(0).max(20).step(0.01).name('frequencyY')
现在让我们再新加一个uniform
来让平面像在风中飘动的旗帜。
我们将使用统一变量向着色器发送一个时间值,并在sin函数中使用:
const material = new THREE.RawShaderMaterial({vertexShader: testVertexShader,fragmentShader: testFragmentShader,uniforms:{uFrequency: { value: new THREE.Vector2(10, 5) },uTime: { value:0 }}
})
记得在tick
函数中更新uTime
:
const tick = () =>
{const elapsedTime = clock.getElapsedTime()// Update materialmaterial.uniforms.uTime.value = elapsedTime// ...
}
更新顶点着色器代码:
// ...
uniform float uTime;// ...void main()
{// ...modelPosition.z += sin(modelPosition.x * uFrequency.x + uTime) * 0.1;modelPosition.z += sin(modelPosition.y * uFrequency.y + uTime) * 0.1;// ...
}
在使用uTime
时要注意,如果我们使用原生JavaScript的Date.now()
,你会发现不起作用,因为它返回的数值对于着色器而言太过庞大了。注意,我们不能发送太小或太大的统一变量值。
不要忘记这仍然是一个平面,我们可以像以前一样变换网格。让我们给飞机做个旗子形状。
我们可以在着色器中通过乘以modelPosition.y来实现,但不要忘记,我们仍然可以直接在网格上更改位置position
、缩放scale
和旋转rotation
:
const mesh = new THREE.Mesh(geometry, material)
mesh.scale.y = 2 / 3
scene.add(mesh)
在片元着色器中也可以使用统一变量,下面使用Three.js的Color
作为新的统一变量:
const material = new THREE.RawShaderMaterial({vertexShader: testVertexShader,fragmentShader: testFragmentShader,uniforms:{uFrequency: { value: new THREE.Vector2(10, 5) },uTime: { value: 0 },uColor: { value: new THREE.Color('orange') }}
})
precision mediump float;uniform vec3 uColor;void main()
{gl_FragColor = vec4(uColor, 1.0);
}
之后你会看到旗帜变为橘色。
Textures
下面将我们的旗帜贴图纹理应用于平面上(网上找一张图片1024*1024即可):
const textureLoader = new THREE.TextureLoader()
const flagTexture = textureLoader.load('/textures/flag-CCCP.jpg')
然后将它传给统一变量uTexture
:
const material = new THREE.RawShaderMaterial({// ...uniforms:{// ...uTexture: { value: flagTexture }}
})
下面要将我们的旗帜纹理的颜色应用于所有可见片元上,为此我们必须使用texture2D()
方法,该方法第一个参数就是应用的纹理,第二个参数是由在纹理上拾取的颜色的坐标组成,我们还没有这些坐标,而这听起来很熟悉,我们正在寻找可以帮助我们在几何体上投射纹理的坐标,也就是UV
坐标。
PlaneBufferGeometry会自动生成这些坐标,可以通过打印geometry.attributes.uv
看到。
因为它是一个属性,我们可以在顶点着色器中检索它:
attribute vec2 uv;
不过,我们需要在片元着色器中使用这些坐标。而要将数据从顶点着色器发送至片元着色器,我们要创建一个名为vUv
的变量varying
,并在main函数中对其赋值:
// ...
attribute vec2 uv;varying vec2 vUv;void main()
{// ...vUv = uv;
}
现在,我们可以在片元着色器中检索变量vUv
传给texture2D()
方法:
precision mediump float;uniform vec3 uColor;
uniform sampler2D uTexture;varying vec2 vUv;void main()
{vec4 textureColor = texture2D(uTexture, vUv);gl_FragColor = textureColor;
}
texture2D(...)
的输出值是一个vec4因为它包含rgb和a,即便这里没用到a。
颜色变化
旗帜的颜色变化不是很明显,如果有亮度的变化像阴影一般就好了,下面要用到的技术在物理上并不准确,但应该也能起到一点作用。
首先,在顶点着色器中,我们将把风的高度存储在一个变量elevation
中,然后通过varying将之发送至片元着色器:
// ...
varying float vElevation;void main()
{// ...float elevation = sin(modelPosition.x * uFrequency.x - uTime) * 0.1;elevation += sin(modelPosition.y * uFrequency.y - uTime) * 0.1;modelPosition.z += elevation;vElevation = elevation;// ...
}
用这个变量来改变textureColor
的r,g,b属性:
// ...
varying float vElevation;void main()
{vec4 textureColor = texture2D(uTexture, vUv);textureColor.rgb *= vElevation * 2.0 + 0.5;gl_FragColor = textureColor;
}
着色器材质
到目前为止,我们一直使用原始着色器材质RawShaderMaterial,而ShaderMaterial的工作原理其实是一样的,只不过其有内置attributes和uniforms,精度也会自动设置。
你可以将材质直接替换:
const material = new THREE.ShaderMaterial({// ...
然后在着色器中移除下面这些uniform
,attribute
和precision
:
- uniform mat4 projectionMatrix;
- uniform mat4 viewMatrix;
- uniform mat4 modelMatrix;
- attribute vec3 position;
- attribute vec2 uv;
- precision mediump float;
之后着色器会跟之前一样正常运行,因为它会自动添加上上面这些。
调试
调试着色器很困难,我们不能像JavaScript那样记录数据,因为是GPU对每个顶点和每个片元都执行着色器代码。
然而,Three.js在编译中传递错误这方面做得很好。
查错
如果我们忘打一个分号,Three.js会打印整个着色器代码并提示我们在第几行出错,像这样:ERROR: 0:99: 'textureColor' : syntax error
阅读着色器
当使用ShaderMaterial时,在报错时查看控制台的整个着色器代码也是一种很好的方式,可以观察到Three.js为我们自动添加了哪些变量。
测试数值
调试数值的另一个解决方案是在gl_FragColor
中使用它们。虽然并不精确,但是能看到颜色变化,有时候这也足够了。
如果这些值在顶点着色器中,我们可以使用一个变量将其传递给片元着色器。
假如我们想看uv
长啥样,我们可以将其发送至片元着色器,然后在gl_FragColor
中使用:
gl_FragColor = vec4(vUv, 1.0, 1.0);
最后
Glslify
GLSLify是一个node module模块,它改进了我们对glsl文件的处理。通过glslify,我们可以像模块一样导入和导出glsl代码。你可以使用glslify-loader并将之加到webpack配置中去。
网站
下面是学习着色器的一些网站和油管频道:
- The Book of Shaders: https://thebookofshaders.com/
- ShaderToy: https://www.shadertoy.com/
- The Art of Code Youtube Channel: https://www.youtube.com/channel/UCcAlTqd9zID6aNX3TzwxJXg
- Lewis Lepton Youtube Channel: https://www.youtube.com/channel/UC8Wzk_R1GoPkPqLo-obU_kQ
笔记都是边看视频边跟着敲代码边做笔记的,如果有哪里出错,还望指出来,好做改进,谢谢。
three.js学习笔记(十四)——Shaders着色器相关推荐
- opengl 设置每个点的颜色_OpenGL学习笔记(四)着色器
本文为学习LearnOpenGL的学习笔记,如有书写和理解错误还请大佬扶正: 教程链接: 着色器 - LearnOpenGL CNlearnopengl-cn.github.io 一,基础概念 1, ...
- LearnOpenGL学习笔记(四)——着色器类编写
之前我们将着色器的代码用glsl写好之后,保存为字符串指针,然后用一个函数去编译它,这是一种手段,对于简单的着色器代码可以这样.但当我们针对复杂的着色器,我们发现编写.编译.管理着色器是一件麻烦事.我 ...
- 吴恩达《机器学习》学习笔记十四——应用机器学习的建议实现一个机器学习模型的改进
吴恩达<机器学习>学习笔记十四--应用机器学习的建议实现一个机器学习模型的改进 一.任务介绍 二.代码实现 1.准备数据 2.代价函数 3.梯度计算 4.带有正则化的代价函数和梯度计算 5 ...
- Polyworks脚本开发学习笔记(十四)-WORKSPACE信息读取及管理
Polyworks脚本开发学习笔记(十四)-WORKSPACE信息读取及管理 Polyworks的工作任务存储分为工作区和项目两级,通过WORKSPACE命令获取工作任务信息,实现更好的任务管理. 下 ...
- three.js学习笔记(十八)——调整材质
介绍 到现在为止,我们都在创建新的着色器材质,但是如果我们想要修改一个Three.js内置的材质呢?或许我们对MeshStandardMaterial的处理结果感到满意,但是希望往里边添加顶点动画. ...
- Vue.js 学习笔记 十二 Vue发起Ajax请求
首先需要导入vue-resource.js,可以自己下载引入,也可以通过Nuget下载,它依赖于Vue.js. 全局使用方式: Vue.http.get(url,[options]).then(suc ...
- Vue.js 学习笔记 十 自定义按键事件
<div id="divApp"><!--任何键盘动作都会触发--><input type="text" v-on:keyup=& ...
- three.js学习笔记(十九)——后期处理
介绍 后期处理是指在最终图像(渲染)上添加效果.人们大多在电影制作中使用这种技术,但我们也可以在WebGL中使用. 后期处理可以是略微改善图像或者产生巨大影响效果. 下面链接是Three.js官方文档 ...
- three.js学习笔记(十六)——汹涌的海洋
介绍 现在我们知道了如何使用着色器并绘制一些图案,那么这次就要用它来创建一个汹涌的海洋. 我们将使用调试面板来设置波浪的动画并保持对各项参数的控制. 初始场景 现在,我们只有一个使用MeshBasic ...
- JS学习笔记十——时间常用方法
前言 时间本身是 JS 中的一个数据类型 Date,是一种引用数据类型,其创建方式有两种:一是 new Date(),创建时间对象,且为当前终端的时间,即电脑时间:二是 new Date(年,月,日, ...
最新文章
- 干货|了解机器学习常用数据预处理
- 如何搭建modem编译环境
- 打开了悬浮窗权限但是没有_给你的手机添加“樱花雨”特效,打开手机樱花就满屏飘落,漂亮!...
- android 手机号码去重,第135天:移动端开发经验总结
- 一方包,二方包,三方包的区别
- 【leetcode】521. Longest Uncommon Subsequence I
- C#判断闰年函数及举例
- 关闭运动轨迹_网球初学者如何正确入门网球运动,有哪些学习细节
- Pycharm结合Anaconda结合使用下的能够产生作用的Anaconda命令
- 如何使用libgdx编写一个简单的游戏(一)— 雏形
- 坐标轨迹计算_工业机器人工具坐标系和用户坐标系的区别与联系
- 为什么要重写hashCode()
- 无人车公司May Mobility种子轮融资1150万美元,宝马丰田联合领投
- origin9语言设置中文_《英雄联盟手游》界面翻译图 LOL手游界面设置全翻译图一览...
- Git服务器-Gogs搭建
- windows server 2003 系统提权
- 智能门锁主要有哪些优势,具体是怎么分类的?
- java复习题_JAVA复习题及答案.doc
- TCPMP播放器UI的修改方法
- CSS颜色和背景详解- 背景颜色 - 背景图片 - (color background-color background-image...)