html - HTML5 文本区域画布 webGL

Question

我正在寻找一个关于如何使 HTML5 画布识别我在同一页面的 textarea 上编写的 webgl 代码的好教程，并且画布呈现它

请帮忙

我已经查看了 codemirror 但我无法让它工作：s

Answer 1

为了设置您使用的 GLSL 着色器程序，您始终遵循相同的步骤：

1. 创建像素或顶点着色器context.createShader
2. 获取着色器的源代码
3. 通过设置着色器的源代码context.shaderSource
4. 编译着色器context.compileShader
5. 创建一个新的 webgl 程序context.createProgram
6. 将着色器附加到程序context.attachShader
7. 将着色器与context.linkProgram
8. 告诉画布使用完整的着色器程序context.useProgram

有关这些单独步骤的详细信息，可以在您可以搜索的无数 WebGL 教程中的任何一个中找到。您唯一想做的不同是第 2 步 - 如何获取像素和顶点着色器的源代码。

大多数教程将 GLSL 源代码存储<script>在 DOM 中的标签中。你可以这样做，但这不是唯一的方法。您也可以将其存储在表单的两个文本区域中，当您提交表单时，获取表单内容并使用内容执行上述步骤。