WebGL 着色器在移动设备上的工作方式不同

时间:2021-01-05 21:51:19

标签: javascript glsl webgl babylonjs

我正在着色器中实现 reaction-diffusion 算法。在每次迭代中,我将结果渲染到纹理中,在下一次迭代中,我将其用作下一次计算的输入 (uniform sampler2D grid;)。我使用浮动纹理作为渲染目标。

它在桌面上按预期工作,但在移动设备(小米红米 4,GPU:Adreno 505)上会生成不同的模式。我对纹理使用相同的分辨率。

我已尝试将 precision highp 更改为 mediumplowp。在桌面上,它以所有精度正常工作。在移动设备上,mediumplowp 给出了与 highp 相比的新结果,但仍然是错误的。

编辑:

创建 BABYLON.RenderTargetTexture 时,我使用 BABYLON.Engine.TEXTURETYPE_FLOAT。如果我将其更改为 BABYLON.Engine.TEXTURETYPE_HALF_FLOAT,那么它也会在桌面上产生不好的结果。所以问题很可能还是浮点精度引起的。

precision highp float;

varying vec2 vUV;
uniform sampler2D grid;
uniform vec2 step; // 1 / (textureSize - 1)
uniform float dt; // 1.0

float da = 1.0;
float db = 0.5;
float f = 0.0545;
float k = 0.062;

vec2 lapl(vec2 uv) {
  vec2 res = 
    // Top row
    0.05 * texture2D(grid, uv + vec2(-step.x, step.y)).rg +
    0.2 * texture2D(grid, uv + vec2(0., step.y)).rg +
    0.05 * texture2D(grid, uv + vec2(step.x, step.y)).rg +
    // Middle row
    0.2 * texture2D(grid, uv + vec2(-step.x, 0.)).rg +
    -1. * texture2D(grid, uv + vec2(0., 0.)).rg +
    0.2 * texture2D(grid, uv + vec2(step.x, 0.)).rg +
    // Bottom row
    0.05 * texture2D(grid, uv + vec2(-step.x, -step.y)).rg +
    0.2 * texture2D(grid, uv + vec2(0., -step.y)).rg +
    0.05 * texture2D(grid, uv + vec2(step.x, -step.y)).rg;

  return res;
}

void main(void) {
  vec2 c = texture2D(grid, vUV).rg;
  vec2 la = lapl(vUV);
  float rgg = c.r * c.g * c.g;
  float a = c.r + (da * la.r - rgg + f * (1. - c.r)) * dt;
  float b = c.g + (db * la.g + rgg - (k + f) * c.g) * dt;

  gl_FragColor = vec4(a, b, 0., 1.);
}

0 个答案:

没有答案
相关问题