|前端如何快速上手 Web 3D 游戏的开发( 四 )

本文插图
整个 ShaderDefine 结构如下，其中 vertexShader 和 fragmentShader 分别存放顶点着色器和片元着色器代码，采用 GLSL ( OpenGL 着色语言， OpenGL Shading Language )编写。 states 用来定义渲染状态控制对象，对应上文提到的合并阶段。
export const ShaderMaterial = { vertexShader: ``, fragmentShader: ``, states: {}, uniforms: {}, attributes: {}, };（3）如果要动态改变材质参数值，需要创建脚本，在节点每帧执行的回调函数中修改属性值。
下面通过跑道滚动和光波两个示例来讲解。
3、跑道滚动如2.1中所述，跑道是一个静止的圆弧模型，通过改变纹理的UV值来实现跑道滚动的效果。为了实现给人物打光的效果，我们在基础颜色纹理上面叠加了一张渐变纹理，并给人物加上了一个静态的阴影（实际上是一个面片）。

本文插图
（基础颜色纹理）

本文插图
（渐变纹理）

本文插图
（叠加效果）
相关的Shader代码如下：
export const ShaderMaterial = { // Vertex Shader 代码 vertexShader: ` uniform mat4 matModelViewProjection; uniform float utime; attribute vec3 a_position; attribute vec2 a_uv; varying vec2 v_uv; varying vec2 v_uv_run; void main() { gl_Position = matModelViewProjection * vec4(a_position, 1.0 ); v_uv = a_uv; v_uv_run = vec2( v_uv.s, v_uv.t + utime ); } `, // Fragment Shader 代码 fragmentShader: ` varying vec2 v_uv; varying vec2 v_uv_run; uniform sampler2D texturePrimary; uniform sampler2D textureLight; void main() { vec4 texSample = texture2D( texturePrimary, v_uv_run ).rgba; vec4 texLightSample = texture2D( textureLight, v_uv ).rgba; gl_FragColor = vec4(texSample.rgb * texSample.a + texLightSample.rgb * texLightSample.a, texSample.a); } `, states: {}, }Vertex Shader 和 Fragment Shader 都包含了一个 mian 入口函数。
初次看 Shader 代码会发现很多陌生的符号，其中 uniform、attribute 和 varying 都是变量限定符， attribute 只能存在于 Vertex Shader 中，一般用来放置程序传过来的顶点、法线、颜色等数据；uniform 是程序传入到 Shader 中的全局数据；varying 主要负责在Vertex Shader 和 Fragment Shader 之间传递变量。
mat4、vec3、sampler2D 都是基本变量类型，分别代表矩阵、向量和纹理，后面的数字代表n维，例如 mat4表示 4x4 矩阵。
本例的 Vertex Shader 中，顶点位置 a_position 与 matModelViewProjection 矩阵相乘，其实是把三维世界的物体投影到二维的屏幕上。 a_uv 存放了 UV 信息，我们想要把一张贴图贴到模型表面，需要纹理映射坐标，即UV坐标，分别代表横纵两个方向。为了使地面能滚动起来，我们需要每帧改变 UV 的纵坐标，并通过变量 v_uv_run 传递给 Fragment Shader 。
在 Fragment Shader 中， texturePrimary 和 textureLight 都是从 CPU 程序传过来的纹理。通过 texture2D 采样基础颜色纹理 texturePrimary ，得到了纹理贴图在模型上滚动的效果。接着拿采样后的颜色值与透明渐变纹理 texLightSample 进行叠加，得到了近亮远暗的效果。

|前端如何快速上手 Web 3D 游戏的开发( 四 )

推荐阅读

5G|运营商宽带提速到500兆，为什么网速没变化？是谁偷了我的带宽？

夏季■夏季跑步的最佳时间

漫漫笑：别到时候钱没留下，孩子留了一堆，搞笑段子：哼哼

德怀特·霍华德|放弃霍华德！湖人为何签下哈勒尔？三方面解读，得分能力更加出色

格尔木通报女大学生失联：今晨救援力量已赴可可西里查找

女人梦见上面的牙掉了一颗梦见上面的牙掉了一颗还有血

北京日报客户端|调查称仅9%为无症状感染者，巴西新冠肺炎累计确诊人数近150万

淼淼|2岁女童10分钟横渡两百米沾天湖网友自嘲：自己20多岁还游不了1米

科普成华测谎仪都拿他没办法，如今却销声匿迹！，火星男孩预言2020年大灾难

东京奥运会|东京奥运会定于2021年7月23日开幕，场馆和赛程已确认

好身材|小姐姐一条蓝色紧身牛仔裤，展示出不一样的魅力

[台安]《GTA5》最无聊的实验有哪些？家里买了台安检机，是否有效？

你吃过最奇葩的水果是啥

「自摆乌龙」山西一球队后卫自摆乌龙被门将杀害？警方回应

IDC圈数据中心机房建设有哪些关键问题？

羊毛衫缩水的最正确方法是什么？

【大众网】四喜儿“不讨喜”引热议，孙迪《鬓边不是海棠红》上线

可爱的小冉就不会有我的今天，克罗斯：如果没有海因克斯

辰雪丰华|穿一字肩礼服出镜，P掉小肚子更甜美，陈乔恩被说“胖”了的美照

数学▲?2020年高考数学难吗？学生：不怎么难就是有点懵圈