compiler-errors - GLSL WebGL2 错误多行宏 Safari 12 和 ios12，WebGL : INVALID_VALUE: shaderSource: string not ASCII

Question

我正在尝试编译一个使用多行预处理器宏的 WebGL2 300 es 着色器，例如这个玩具示例:

#define FOO() \
    do { } while (false);

也一样

#define FOO \
    do { } while (false);

或者

    #define FOO() \
        do { } while (false); \

这适用于最新版本的 Chrome 和 Firefox，但是当我调用 gl.shaderSource 时 Safari 会返回以下错误:
WebGL: INVALID_VALUE: shaderSource: string not ASCII
我使用以下循环检查输入源字符串中的任何字符代码是否具有大于 127 的值:

for (char c = 0; c < src.length; c += 1) {
    if (src.charCodeAt(c) > 127) {
       console.error(src.charAt(c), src.charCodeAt(c));
    }
}

循环打印没有错误。
此外，当我在文本编辑器中启用不可见字符时，我看不到多余的隐藏字符。

Safari 的 GLSL 编译器是否根本无法处理反斜杠字符？

这是由于反斜杠而失败的最小示例片段着色器:

#version 300 es
precision highp float;

out vec4 fragColor;

    #define FOO() \
        true

void main() {
    fragColor = vec4(1.0);
}

Answer 1

Safari 在 2021 年 9 月发布的 Safari 15 中发布了 WebGL2
Safari 似乎终于获得了 WebGL2。至少截至 2020 年 9 月，Safari 技术预览版 113 支持 WebGL2。
截至 2019 年 10 月，Safari 不支持 WebGL2。它只是桌面 Safari 上的一项实验性功能，甚至没有通过 20% 的 WebGL2 一致性测试。 See the source 。搜索“未实现”，您会看到 80 多个 WebGL2 API 函数没有实现，这只是有多少工作没有完成的一个例子。

void WebGL2RenderingContext::uniform1ui(WebGLUniformLocation*, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniform1ui()");
}

void WebGL2RenderingContext::uniform2ui(WebGLUniformLocation*, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniform2ui()");
}

void WebGL2RenderingContext::uniform3ui(WebGLUniformLocation*, GC3Duint, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniform3ui()");
}

void WebGL2RenderingContext::uniform4ui(WebGLUniformLocation*, GC3Duint, GC3Duint, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniform4ui()");
}

void WebGL2RenderingContext::uniform1uiv(WebGLUniformLocation*, Uint32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniform1uiv()");
}

void WebGL2RenderingContext::uniform2uiv(WebGLUniformLocation*, Uint32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniform2uiv()");
}

void WebGL2RenderingContext::uniform3uiv(WebGLUniformLocation*, Uint32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniform3uiv()");
}

void WebGL2RenderingContext::uniform4uiv(WebGLUniformLocation*, Uint32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniform4uiv()");
}

void WebGL2RenderingContext::uniformMatrix2x3fv(WebGLUniformLocation*, GC3Dboolean, Float32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniformMatrix2x3fv()");
}

void WebGL2RenderingContext::uniformMatrix3x2fv(WebGLUniformLocation*, GC3Dboolean, Float32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniformMatrix3x2fv()");
}

void WebGL2RenderingContext::uniformMatrix2x4fv(WebGLUniformLocation*, GC3Dboolean, Float32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniformMatrix2x4fv()");
}

void WebGL2RenderingContext::uniformMatrix4x2fv(WebGLUniformLocation*, GC3Dboolean, Float32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniformMatrix4x2fv()");
}

void WebGL2RenderingContext::uniformMatrix3x4fv(WebGLUniformLocation*, GC3Dboolean, Float32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniformMatrix3x4fv()");
}

void WebGL2RenderingContext::uniformMatrix4x3fv(WebGLUniformLocation*, GC3Dboolean, Float32List&&, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] uniformMatrix4x3fv()");
}

void WebGL2RenderingContext::vertexAttribI4i(GC3Duint, GC3Dint, GC3Dint, GC3Dint, GC3Dint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] vertexAttribI4i()");
}

void WebGL2RenderingContext::vertexAttribI4iv(GC3Duint, Int32List&&)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] vertexAttribI4iv()");
}

void WebGL2RenderingContext::vertexAttribI4ui(GC3Duint, GC3Duint, GC3Duint, GC3Duint, GC3Duint)
{
    LOG(WebGL, "[[ NOT IMPLEMENTED ]] vertexAttribI4ui()");
}

否则在 WebGL1 中它对我有用。在带有 MacOS 10.14.6 的 2014 Macbook Pro 和带有 iOS 13.1 的 iPhoneX 上测试

const fs = `
precision highp float;

    #define FOO() \
        true

void main() {
    gl_FragColor = vec4(1.0);
}
`;

const gl = document.createElement('canvas').getContext('webgl');
const sh = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(sh, fs);
gl.compileShader(sh);
const success = gl.getShaderParameter(sh, gl.COMPILE_STATUS);
if (success) {
  console.log('pass: shader compiled successfully');
} else {
  console.error('fail: shader failed to compile');
}

建议您对 >= 32 和 <= 127 进行测试检查，或者使用十六进制编辑器或 hexdump 查看您的文件。
至于 #define 本身，JavaScript 中的 #define 确实没有多大意义，因为 JavaScript 不像 C/C++ 具有非常好的字符串操作。

const subs = {
  width: 100,
  height: 200,
}

const fs = `
void main() {
  vec2 thingSize = vec2(${subs.width}, ${subs.height});
}
`;

console.log(fs);

甚至

function preprocess(s, subs) {
  const re = new RegExp(Object.keys(subs).join('|'), 'g');
  return s.replace(re, m => subs[m] || '');
}

const subs = { WIDTH: 123, HEIGHT: 456 };
const fs = preprocess(`
void main() {
  vec2 thingSize = vec2(WIDTH, HEIGHT);
}
`, subs);

console.log(fs);

并不是说您不应该使用 #define 只是指出有很多简单的方法可以在 JavaScript 中操作字符串，因此 GLSL 预处理器不如在 C 中那么有用(OpenGL 是基于 C 的 API)