如何修复 WebGL 中的这个属性错误？

Question

我正在关注 class 我正在做的演示，但我在下面的代码中不断收到错误消息：

<html>
    <head>

        <script id="vertex-shader" type="x-shader/x-vertex">
            # version 300 es

            attribute vec4 vPosition;

            void main()
            {
              gl_Position = vPosition;
            }
            </script>

            <script id="fragment-shader" type="x-shader/x-fragment">
            # version 300 es

            precision mediump float;

            uniform vec4 fColor;

            void main()
            {
                gl_fragColor = fColor;
            }
        </script>

    <script type="text/javascript" src="initShaders.js"></script>
    <script type="text/javascript" src="triangle.js"></script>

    </head>
    <body data-new-gr-c-s-check-loaded="14.998.0" data-gr-ext-installed=""><canvas id="gl-canvas" width="512" height="512"> 
        <canvas id="gl-canvas" width="512" height="512"> </canvas>
    </body>
    
</html>

这里的问题是我在第 7 行不断收到 "'attribute': 非法使用保留字"。我已经在 Whosebug 中查找了类似的问题，但找不到针对此特定问题的解决方案。我试过使用其他版本的 WebGL，但没有用。 initShaders 是我用于 class 的书的作者使用的辅助库，Edward Angel 的交互式计算机图形学也适用于其他示例。 triangle.js 脚本如下：

"use strict"; var gl; var points; window.onload = function init() { var canvas = document.getElementById( "gl-canvas" ); gl = canvas.getContext('webgl2'); if (!gl) { alert( "WebGL 2.0 isn't available" ); } // // Initialize our data for a single triangle // // First, initialize the three points. // vertices = new Float32Array([ // -1, -1 , // 0, 1 , // 1, -1 // ]); var vertices = [(1,-1,0), (-0.5, 1, 0), (0, -1, 0), (0,-1,0), (0.5, 1, 0), (1,-1,0)]; // // Configure WebGL // gl.viewport( 0, 0, canvas.width, canvas.height); gl.clearColor( 1.0, 1.0, 1.0, 1.0 ); // Load shaders and initialize attribute buffers var program = initShaders( gl, "vertex-shader", "fragment-shader" ); gl.useProgram( program ); // Load the data into the GPU var bufferId = gl.createBuffer(); gl.bindBuffer( gl.ARRAY_BUFFER, bufferId ); gl.bufferData( gl.ARRAY_BUFFER, flatten(vertices), gl.STATIC_DRAW ); // Associate out shader variables with our data buffer var vPosition = gl.getAttribLocation( program, "vPosition" ); gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 ); gl.enableVertexAttribArray( vPosition ); var fColor = gl.getUniformLocation(program, "fColor"); gl.clear(gl.COLOR_BUGGER_BIT); gl.uniform4f(fColor, 0.0, 1.0, 0.0, 1.0); gl.drawArrays(gl.TRIANGLES, 0,3); gl.uniform4f(fColor, 0.0, 0.0, 1.0, 1.0); gl.drawArrays(gl.TRIANGLES, 3,3); };

Answer 1

关键字 attribute 和 varying 在 GLSL ES 3.00 中已弃用。比较 OpenGL ES Shading Language 1.00 Specification and OpenGL ES Shading Language 3.00 Specification。使用 in 和 out 而不是 attribute 和 varying:

#version 300 es

in vec4 vPosition;

void main()
{
    gl_Position = vPosition;
}

gl_FragColor（不区分大小写 gl_fragColor）也已过时。相反，您需要声明一个 out 变量::

#version 300 es

precision mediump float;

uniform vec4 fColor;
out vec4 fragColor;

void main()
{
    fragColor = fColor;
}

如何修复 WebGL 中的这个属性错误？

How can I fix this attribute error in WebGL?

javascript

glsl

webgl