意外的颜色值错误 - WebGL

时间:2015-09-19 10:50:45

标签: javascript webgl fragment-shader

Shdr Editor上的现场演示。您需要将右上角更改为立方体并放大以正确查看效果。

顶点着色器代码

precision highp float;
attribute vec3 position;
attribute vec3 normal;
uniform mat4 modelViewMatrix;
uniform mat4 projectionMatrix;
varying mat4 hash;

void main() {
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

  hash = mat4(
    ivec4(255, 0, 0, 0),
    ivec4(0, 0, 0, 0),
    ivec4(0, 0, 0, 0),
    ivec4(0, 0, 0, 0)
  );
}

片段着色器代码

precision highp float;
precision highp int;
uniform float time;
uniform vec2 resolution;
varying mat4 hash;

void main() {
  vec2 pos = vec2(
    floor(gl_FragCoord.x / (resolution.x / 16.0)),
    floor(gl_FragCoord.y / (resolution.y / 16.0))
  );

  int qrtID = int(floor(pos.y / 4.0));
  int rowID = int(mod(pos.y, 4.0));
  ivec4 quarter = qrtID == 0 ? ivec4(hash[0]) : qrtID == 1 ? ivec4(hash[1]) : qrtID == 2 ? ivec4(hash[2]) : ivec4(hash[3]);
  int row = rowID == 0 ? quarter[0] : rowID == 1 ? quarter[1] : rowID == 2 ? quarter[2] : quarter[3];
  float bit = floor(
    mod(
      float(float(row) / pow(2.0, pos.x)),
      2.0
    )
  );

  gl_FragColor = vec4(vec3(bit), 1.0);
}

这里的意图是,当使用它时,它将呈现为16x16窗口,因此我为什么要约束它。我对mat4的硬编码是暂时的。此代码的实际应用程序将生成智能值并将其统一。每个ivec4代表屏幕的四分之一(64像素);向量的每个int表示屏幕上的一行(16个像素); int的每个位代表一个像素。因此hash中的硬编码矩阵值应突出显示底行的左半部分。

我在这里非常困惑,我最需要一个以前没有看过我的代码的人来看看它并找到我错的地方。我对最后两行的frag着色器感到困惑,因为bit是值的模2的底部:0或1,但渲染的内容没有显示。

0 个答案:

没有答案