Shadertoy 着色器未在 p5js 中编译

Question

我一直在尝试导入一些我想在 p5.js 中使用的漂亮的 shadertoy 代码。

https://www.shadertoy.com/view/wtGyRz如果有人想看的话，这里是shadertoy代码。

我相信我已将所有内容更改为 WEBGL 的正确格式，但它一直出现编译错误，我不完全确定原因。我对 WEBGL 和使用着色器比较陌生，所以非常感谢帮助。

所以这是我超级简单的 js 代码：

let theShader;

function preload(){
  
  theShader = loadShader('shader.vert', 'shader.frag');
}

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  noStroke();
}

function draw() {  
  shader(theShader);

  theShader.setUniform("iResolution", [width, height]);
  theShader.setUniform("iFrame", frameCount);
  theShader.setUniform("iMouse", [mouseX, map(mouseY, 0, height, height, 0)]);
  theShader.setUniform("iTime", millis()/1000);

  rect(0,0,width, height);
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}

和我的顶点着色器：

attribute vec3 aPosition;

attribute vec2 aTexCoord;

void main() {

  vec4 positionVec4 = vec4(aPosition, 1.0);
  positionVec4.xy = positionVec4.xy * 2.0 - 1.0;

  gl_Position = positionVec4;
}

最后是错误点，我的片段着色器

#ifdef GL_ES
precision mediump float;
#endif
  
#define width 800.f
#define height 450.f
#define numColors 10
#define numCircles 100

uniform vec2 iResolution;
uniform int iFrame;
uniform vec2 iMouse;
uniform float iTime;


vec3 GetColor(vec2 coord, vec4 circles[numCircles], vec3 colors[numColors], float timeDelay){
    int value = 0;
    float r;
    float xc;
    float yc;
    float d = sqrt((coord[0] - xc)*(coord[0]-xc)+(coord[1]-yc)*(coord[1]-yc));
    for(int i = 0; i < numCircles; i++)
    {
        xc = circles[i][0];
        yc = circles[i][1];
        r = circles[i][2];
        d = sqrt((coord[0] - xc)*(coord[0]-xc)+(coord[1]-yc)*(coord[1]-yc));
        if(d <= r && iTime >= timeDelay * float(i))
        {
            value+= int(circles[i][3]);
        }
    }
    return colors[value % numColors];
}

void main(){
    float timeDelay = 0.05f;
    float timeFactor = 50.f;
    vec3 colors[numColors] = vec3[numColors](vec3(0.976, 0.254, 0.266),vec3(0.952, 0.447, 0.172),vec3(0.972, 0.588, 0.117),\
    vec3(0.976, 0.517, 0.290),vec3(0.976, 0.780, 0.309),vec3(0.564, 0.745, 0.427),vec3(0.262, 0.666, 0.545),\
    vec3(0.301,0.564,0.556),vec3(0.341,0.458,0.564),vec3(0.152,0.490,0.631));
    float timeInt = 0.f;
    int i = 0;
    float xGap = 1.f/11.f;
    float yGap = 1.f/11.f;
    vec4 circles[numCircles];
    for(float y = height * yGap; y < height; y+= height * yGap)
    {
        for (float x = width * xGap; x < width; x += width * xGap)
        {
            circles[i] = vec4(x, y, iTime * timeFactor - timeFactor * timeDelay * float(i),i+1);
            i++;
        }
    }

  vec3 col = GetColor(gl_FragCoord, circles, colors, timeDelay);
  gl_FragColor = vec4(col,1.0);
}

老实说，我不知道为什么它不能编译。在我未经训练的眼中，一切看起来都很好，所以我认为这可能是我不习惯的某种小语法。

Answer 1

问题是 shadertoy 着色器是用于 WebGL2 的 GLSL ES 3.0 着色器，但 p5.js 仅支持 GLSL ES 1.0 和 WebGL1

不兼容性包括几行末尾的 \，这就是产生此错误的原因

glShaderSource: Shader source contains invalid characters

这花了一段时间才找到。 Firefox 给出了更好的错误

WebGL warning: shaderSource: source contains illegal character 0x5c.

删除 \ 个字符，您将开始收到更多相关错误，例如

Darn! An error occurred compiling the fragment shader:
ERROR: 0:33: '%' : integer modulus operator supported in GLSL ES 3.00 and above only
ERROR: 0:37: '0.05f' : Floating-point suffix unsupported prior to GLSL ES 3.00
ERROR: 0:37: '0.05f' : syntax error

删除f后缀，出现更多版本相关问题

An error occurred compiling the fragment shader:
ERROR: 0:33: '%' : integer modulus operator supported in GLSL ES 3.00 and above only
ERROR: 0:39: '[]' : array constructor supported in GLSL ES 3.00 and above only
ERROR: 0:39: '[]' : first-class arrays (array initializer) supported in GLSL ES 3.00 and above only
ERROR: 0:39: '=' : Invalid operation for arrays
ERROR: 0:39: '=' : cannot convert from 'const array[10] of 3-component vector of float' to 'mediump array[10] of 3-component vector of float'
ERROR: 0:56: 'GetColor' : no matching overloaded function found
ERROR: 0:56: '=' : dimension mismatch
ERROR: 0:56: '=' : cannot convert from 'const mediump float' to 'mediump 3-component vector of float

Shadertoy 着色器未在 p5js 中编译

Shadertoy shader not compiling in p5js

webgl

p5.js