WebGL Shader 在 iPhone 上渲染绿框答案

【问题标题】：WebGL Shader rendering green box on iPhoneWebGL Shader 在 iPhone 上渲染绿框
【发布时间】：2016-01-19 12:07:16
【问题描述】：

我编写了一个片段着色器，它使用一些与这个问题并不特别相关的数学来生成分形图。

在我的 MacBook Pro 上，情节运行良好（Chrome 和 Safari）。在我的 iPhone 上，它只显示一个亮绿色 (#00FF00) 矩形。在 iPhone 模拟器中（在我的 MacBook Pro 上），它可以 100% 正常工作。

我怀疑我的片段着色器中有一些东西与手机上的图形硬件不兼容。我想不通是什么。我已启用debugging，但没有看到任何表明问题的信息。

f-shader.glsl

precision mediump float;

varying vec2 v_coord;

void color_wheel(in float hue, out vec3 rgb) {
  float x;
  if (0.0 <= hue && hue < 60.0) {
    x = 1.0 - hue/60.0;
    rgb = vec3(1.0, x, 0.0);
  } else if (hue < 120.0) {
    x = (hue - 60.0)/60.0;
    rgb = vec3(x, 1.0, 0.0);
  } else if (hue < 180.0) {
    x = 1.0 - (hue - 120.0)/60.0;
    rgb = vec3(0.0, 1.0, x);
  } else if (hue < 240.0) {
    x = (hue - 180.0)/60.0;
    rgb = vec3(0.0, x, 1.0);
  } else if (hue < 300.0) {
    x = 1.0 - (hue - 240.0)/60.0;
    rgb = vec3(x, 0.0, 1.0);
  } else if (hue < 360.0) {
    x = (hue - 300.0)/60.0;
    rgb = vec3(1.0, 0.0, x);
  } else {
    rgb = vec3(0.0, 0.0, 0.0);
  }
}

void color_step_ratio(in int steps, in int max_steps, out vec3 rgb) {
  if (steps == max_steps) {
    rgb = vec3(0.0, 0.0, 0.0);
  } else {
    float ratio = float(steps)/float(max_steps);
    color_wheel(60.0*(1.0 - ratio), rgb);
  } 
}

void main() {
  float w = v_coord.x;
  float a = v_coord.y;

  float b = 0.05;
  float h = 0.001;
  float h2 = h/2.0;
  float t = 0.0;
  const int max_steps = 60000;

  vec2 k0 = vec2(0.0, 0.0);
  vec2 k1, k1P, k2, k2P, k3, k3P, k4;
  int steps = 0;
  for (int i = 0; i < max_steps; i++) {
    k1 = vec2( k0.y,  -b*k0.y  - k0.x +   k0.x*k0.x + a*sin(w*t));
    k1P = k0 + h2*k1;
    k2 = vec2(k1P.y, -b*k1P.y - k1P.x + k1P.x*k1P.x + a*sin(w*(t + h2)));
    k2P = k0 + h2*k2;
    k3 = vec2(k2P.y, -b*k2P.y - k2P.x + k2P.x*k2P.x + a*sin(w*(t + h2)));
    k3P = k0 + h*k3;
    k4 = vec2(k3P.y, -b*k3P.y - k3P.x + k3P.x*k3P.x + a*sin(w*(t + h)));

    t += h;
    k0 += (h/6.0)*(k1 + 2.0*(k2 + k3) + k4);

    steps++;
    if (k0.x >= 1.0) break;
  }

  vec3 rgb;
  color_step_ratio(steps, max_steps, rgb);
  gl_FragColor = vec4(rgb, 1);
}

我不知道从这里去哪里。有什么建议吗？

您可以查看现场演示 here 和完整的源代码 here。

我的期望：在我的笔记本电脑上绘图（MacBook Pro - Retina，13 英寸，2013 年末 - OS X 10.10.5）：

实际发生的情况：在我的 iPhone（iPhone 6 - iOS 9.2 - Mobile Safari）上：

【问题讨论】：

可能是精度问题，尝试在片段着色器中使用highp。

标签： iphone glsl webgl mobile-safari

【解决方案1】：

这就是问题所在：

const int max_steps = 60000;

...

for (int i = 0; i < max_steps; i++) { ... }

我怀疑for 循环正在被图形驱动程序“展开”。当我将max_steps 减少到 60、600 和 6000 时，它工作正常。60000 太多了。

【讨论】：