英文:
P5 catch shader compilation errors
问题
我正在在网络上制作一个着色器编辑器。用户可以在文本区域中创建他们自己的着色器,然后将其应用于网络摄像头。
问题是,我没有办法捕获着色器编译错误并将其显示给用户。它们只会在开发者控制台中引发错误。
我的代码
try {
newShaderObj = pFive.createShader(defaultVertShader, fragShader)
pFive.shader(newShaderObj)
} catch (e) {
alert(e)
}
这里的 try / catch 不起作用;我仍然在控制台中看到这个错误,catch
永远不会运行
p5.min.js:2 糟糕!编译片段着色器时发生错误:错误:0:4: 'asd':语法错误
我还收到了另一个错误
p5.min.js:2 未捕获的类型错误:无法执行'WebGLRenderingContext'上的'useProgram':参数1不是'type 'WebGLProgram'。
如果我引入一个全局的 window.onerror
处理程序,我可以救出这个错误:
window.onerror = (ev, source, lineno, colno, err) => {
alert(err)
pFive.shader(defaultValidShader)
}
但它不告诉我任何关于底层编译错误的信息。而且,pFive.shader.defaultValidShader
无效,我必须重新加载页面才能再次工作。
所以,我真的想要做的是在应用着色器之前验证/编译着色器,并且有一种处理运行时错误的方式。
英文:
I am making a shader editor in the web. Users can create their own shaders in a textarea and it will be applied to a webcam.
The problem is that I have no watch to catch shader compilation errors and display them to the user. They just raise an error in developer console.
My code
try {
newShaderObj = pFive.createShader(defaultVertShader, fragShader)
pFive.shader(newShaderObj)
} catch (e) {
alert(e)
}
The try / catch here doesn't work; I still get this error shown in console, without the catch
ever running
> p5.min.js:2 Darn! An error occurred compiling the fragment shader:ERROR: 0:4: 'asd' : syntax error
I'm also getting this other error
> p5.min.js:2 Uncaught TypeError: Failed to execute 'useProgram' on 'WebGLRenderingContext': parameter 1 is not of type 'WebGLProgram'.
If I introduce a global window.onerror
handler, I can rescue this one:
window.onerror = (ev, source, lineno, colno, err) => {
alert(err)
pFive.shader(defaultValidShader)
}
But it doesn't tell me anything about the underlying compilation error. Also, that pFive.shader.defaultValidShader
doesn't work, and I have to reload the page to get anything working again.
So, what I would really like to do is validate/compile the shader before applying it, and also have a way to handle errors at runtime.
答案1
得分: 1
我通过查看p5 Shader类中的源代码(在init
函数中)找到了解决方法。
最终的代码如下:
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
}
英文:
I figured this out by looking at the source code in p5 Shader class (in the init
function)
and ended up with the following code:
newShaderObj = pFive.createShader(defaultVertShader, fragShader)
shaderError = checkShaderError(shaderObj, fragShader)
if (shaderError) {
alert(shaderError)
} else {
shaderObj = newShaderObj
pFive.shader(shaderObj)
}
And the checkShaderError
function:
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
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论