P5 捕获着色器编译错误

Question

我正在网络上制作一个着色器编辑器。用户可以在文本区域中创建自己的着色器，并将其应用于网络摄像头。

问题是我没有手表来捕获着色器编译错误并将它们显示给用户。他们只是在开发人员控制台中引发错误。

我的代码

    try {
      newShaderObj = pFive.createShader(defaultVertShader, fragShader)
      pFive.shader(newShaderObj)
    } catch (e) {
      alert(e)
    }

这里的try/catch不起作用；我仍然在控制台中显示此错误，而

catch

从未运行过

p5.min.js:2 该死！编译片段着色器时发生错误：ERROR: 0:4: 'asd' : syntax error

我也遇到了这个错误

p5.min.js:2 未捕获类型错误：无法在“WebGLRenderingContext”上执行“useProgram”：参数 1 不是“WebGLProgram”类型。

如果我引入一个全局

window.onerror

处理程序，我可以拯救这个：

    window.onerror = (ev, source, lineno, colno, err) => {
      alert(err)
      pFive.shader(defaultValidShader)
    }

但是它没有告诉我任何关于底层编译错误的信息。此外，

pFive.shader.defaultValidShader

不起作用，我必须重新加载页面才能再次运行。

所以，我真正想做的是在应用它之前验证/编译着色器，并且还有一种在运行时处理错误的方法。

Answer 1

我通过查看 p5 Shader 类中的源代码（在

init

 函数中）来解决这个问题

https://github.com/processing/p5.js/blob/64354940c5a116b1b27bbf4c6cb7f04b6c2b9f0a/src/webgl/p5.Shader.js

    newShaderObj = pFive.createShader(defaultVertShader, fragShader)
    shaderError = checkShaderError(shaderObj, fragShader)
    if (shaderError) {
      alert(shaderError)
    } else {
      shaderObj = newShaderObj
      pFive.shader(shaderObj)
    }

和

checkShaderError

功能：

  checkShaderError = (shaderObj, shaderText) => {
    gl = shaderObj._renderer.GL
    glFragShader = gl.createShader(gl.FRAGMENT_SHADER)
    gl.shaderSource(glFragShader, shaderText)
    gl.compileShader(glFragShader)
    if !gl.getShaderParameter(glFragShader, gl.COMPILE_STATUS) {
      return gl.getShaderInfoLog(glFragShader)
    }
    return null
  }