javascript - Webgl 未捕获引用错误 : createShaderFromScriptElement is not defined

标签 javascript html canvas html5-canvas webgl

我找不到我在这里遗漏了什么,为什么会出现此错误?未捕获的 ReferenceError:未定义 createShaderFromScriptElement

我从一个常见的教程中得到这个并粘贴它。浏览器:Firefox 和 Chrome --> 两种浏览器都出现同样的错误

    <!DOCTYPE HTML>
<html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Zooming via HTML5 Canvas Context</title>
    </head>
    <body>

        <canvas id="canvas" width="200" height="200"></canvas>

        <script id="2d-vertex-shader" type="x-shader/x-vertex">
            attribute vec2 a_position;

            void main() {
            gl_Position = vec4(a_position, 0, 1);
            }
        </script>

        <script id="2d-fragment-shader" type="x-shader/x-fragment">
            void main() {
            gl_FragColor = vec4(0,1,0,1);  // green
            }
        </script>

        <script>
            window.onload = function() {
                // Get A WebGL context
                var canvas = document.getElementById("canvas");
                var gl = canvas.getContext("experimental-webgl");

                // setup a GLSL program

                var vertexShader = createShaderFromScriptElement(gl, "2d-vertex-shader");
                var fragmentShader = createShaderFromScriptElement(gl, "2d-fragment-shader");
                var program = createProgram(gl, [vertexShader, fragmentShader]);
                gl.useProgram(program);

                // look up where the vertex data needs to go.
                var positionLocation = gl.getAttribLocation(program, "a_position");

                // Create a buffer and put a single clipspace rectangle in
                // it (2 triangles)
                var buffer = gl.createBuffer();
                gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
                gl.bufferData(
                        gl.ARRAY_BUFFER,
                        new Float32Array([
                            -1.0, -1.0,
                            1.0, -1.0,
                            -1.0,  1.0,
                            -1.0,  1.0,
                            1.0, -1.0,
                            1.0,  1.0]),
                        gl.STATIC_DRAW);
                gl.enableVertexAttribArray(positionLocation);
                gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

                // draw
                gl.drawArrays(gl.TRIANGLES, 0, 6);
            }

        </script>


    </body>
</html>

最佳答案

createShaderFromScript 是外部脚本的一部分,而不是内置脚本。

无论您查看的是什么演示,都可能包含一个 webgl-utils 文件,如下所示:

http://greggman.github.com/webgl-fundamentals/webgl/resources/webgl-utils.js

它定义了一个 createShaderFromScript

关于javascript - Webgl 未捕获引用错误 : createShaderFromScriptElement is not defined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13358924/

相关文章:

javascript - Chrome 中的SQLite

javascript - JSPerf 测试结果随着测试运行而变慢?

javascript - 设置 "action"时 Pebble.JS 卡 - "scrollable"失败

html - 如何正确对齐社交页脚和页脚菜单?

c# - UWP 等同于用于序列化 XAML 的 XamlWriter

javascript - 使用 DOM-Javascript VS 纯 Javascript 对象的陷阱?

HTML Canvas 水平翻转仅在每秒单击一次时有效

javascript - 为 chrome 扩展注入(inject) CSS

html - Google Zeitgeist 2011 可视化

java - 如何在 Swing 中缩放 Canvas 上图像的特定区域