使用 WebGL 着色器进行矢量实例化

Question

可能是个简单的问题，但我正在学习 WebGL 着色器的工作原理。我的理解是 vec4 应该由 vec4(0.5) 或 vec4(0.5, 0.5, 0.5, 0.5) 或 vec4(vec2(0.5), vec2(0.5)) 之类的东西组成，那么为什么这个例子似乎有效？它在 vec2 中包含一个 vec4。我也在使用 Three.js.

vec4 myVec = vec4(vec2(0.5), vec2(0.5, vec4(0.5)));

但这行不通：

vec4 myVec = vec4(vec2(0.5), vec2(vec4(0.5), 0.5));

Answer 1

摘自this page：

将高维向量转换为低维向量也可以使用这些构造函数实现：

vec4 a = vec4(-1.0, 2.5, 4.0, 1.0);
vec3 b = vec3(a); // = vec3(-1.0, 2.5, 4.0)
vec2 c = vec2(b); // = vec2(-1.0, 2.5)

通过为这些构造函数提供正确数量的组件来实现将低维向量转换为高维向量：

vec2 a = vec2(0.1, 0.2);
vec3 b = vec3(0.0, a); // = vec3(0.0, 0.1, 0.2)
vec4 c = vec4(b, 1.0); // = vec4(0.0, 0.1, 0.2, 1.0)

所以基本上...
vec2(0.5, vec4(0.5)) 起作用是因为在第一个参数 0.5 之后，还有一个参数要从 vec4 中插入。

vec2(vec4(0.5), 0.5) 不起作用，因为 vec2 调用的 2 个参数是从 vec4 的前 2 个元素填充的，这意味着没有更多的参数可以填充，所以最后的 0.5 无处可去走。

更好的方法是.. vec2(0.5, myvec4.x) 和 vec2(myvec4.x, 0.5)

使用 WebGL 着色器进行矢量实例化

Vector instantiation with WebGL shaders

glsl

webgl

three.js