javascript P5捕获着色器编译错误

3bygqnnd  于 2023-02-28  发布在  Java
关注(0)|答案(1)|浏览(132)

我正在网上做一个着色器编辑器。用户可以在文本区域创建自己的着色器,它将被应用到网络摄像头上。
问题是我没有手表来捕捉着色器编译错误并显示给用户。它们只是在开发者控制台中引发一个错误。
我的代码

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

这里的try/catch不起作用;在catch没有运行的情况下,我仍然会在控制台中显示此错误
p5.min.js:2糟糕!编译片段着色器时出错:ERROR:0:4:"asd":语法错误
我还收到了另一个错误
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不起作用,我必须重新加载页面才能让任何东西重新工作。
所以,我真正想做的是在应用着色器之前验证/编译着色器,并且在运行时处理错误。

rqenqsqc

rqenqsqc1#

我通过查看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
  }

相关问题