使用 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)