Three.js Shader 笔记

直接回答：着色器分两段：顶点着色器决定每个顶点出现在屏幕的哪个位置，片元着色器决定每个像素的颜色；uniform 是 CPU 每帧传进来的参数，varying 是从顶点传到片元的插值数据。

#ifdef GL_ES
precision mediump float;
#endif

uniform float u_time;

void main() {
	gl_FragColor = vec4(1.000,0.126,0.079,1.000);
}

precision mediump float这个是定义fload的精度,这里通过变量GL_ES来判断是否使用中等精度fload,precision lowp float低精度,precision highp float高精度

uniform

输入值叫做 uniform （统一值）,是cpu给所有的GPU的线程的输入值,它们的数据类型通常为：float, vec2, vec3, vec4, mat2, mat3, mat4, sampler2D and samplerCube。uniform 值需要数值类型前后一致。且在 shader 的开头，在设定精度之后，就对其进行定义。

你可以把 uniforms 想象成连通 GPU 和 CPU 的许多小的桥梁。虽然这些 uniforms 的名字千奇百怪，但是在这一系列的例子中我一直有用到：u_time （时间）, u_resolution （画布尺寸）和 u_mouse （鼠标位置）。按业界传统应在 uniform 值的名字前加 u_ ，这样一看即知是 uniform.也可以是其他的名字

GPU 的硬件加速支持我们使用角度，三角函数和指数函数。这里有一些这些函数的介绍：sin(), cos(), tan(), asin(), acos(), atan(), pow(), exp(), log(), sqrt(), abs(), sign(), floor(), ceil(), fract(), mod(), min(), max() 和 clamp()。

gl_FragCoord

gl_FragCoord存储了活动线程正在处理的像素或屏幕碎片的坐标

GLSL 有个默认输出值 vec4 gl_FragColor,也有一个默认输入值（ vec4 gl_FragCoord ）为什么我们不叫 gl_FragCoord uniform （统一值）呢？因为每个像素的坐标都不同，所以我们把它叫做 varying（变化值）。

车侧面:

{x: 0.3300295288626984, y: 25.806542377301987, z: -62.40010526156094}

{x: 0, y: 10, z: 0}

正面鸟瞰

{x: 2268.7886022389566, y: 1283.2607674787089, z: -266.9828072269587}

{x: -65.3023712156171, y: 171.2360818685854, z: -309.61540487983694}

斜着鸟瞰

{x: 1245.3692055786664, y: 1201.7775516087047, z: -2286.107602962217}

{x: -65.3023712156171, y: 171.2360818685854, z: -309.61540487983694}

这篇笔记整理自我自己的实践记录，如果做法有出入，或者你踩过别的坑，欢迎到留言板一起聊聊。