可以在Chrome Javascript REPL中编写WebGL吗？

Question

通常在使用WebGL时，会将大部分图形代码写入绑定到window.onload的函数中。为了REPL风格的图形开发，是否可以在javascript控制台中以交互方式编写OpenGL代码？

Answer 1

当然，但WebGL是一个非常冗长的API。你必须上传，编译和链接着色器，查找属性和制服，创建缓冲区和纹理并将数据上传到每个，然后绑定所有纹理，缓冲区，设置属性，并设置制服，最后调用一个绘制函数

从REPL中完成这一切将非常繁琐且容易出错。

当我调试时，我经常将这样的东西粘贴到devtools REPL

中

gl = document.querySelector("canvas").getContext("webgl");

这将为我提供页面中第一个画布的WebGLRenderingContext（这通常是我想要的）。然后我可以检查是否有错误

gl.getError();

我做的另一件常见事情是检查可用的扩展程序

document.createElements("canvas").getContext("webgl").getSupportedExtensions().join("\n");

否则，如果您正在寻找实时编辑WebGL，通常仅限于glslsandbox.com或vertexshaderart.com，您只需编辑单个着色器，而不是使用REPL中的整个WebGL API。还有shdr，它可以为您提供单个模型以及顶点和片段着色器。

如果你真的想要一个REPL，你可能需要一些引擎，在这种情况下它将是引擎名称REPL而不是WebGL REPL。