如何在 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'：非法使用保留字” 。 我已經在 stackoverflow 中查找了類似的問題，但找不到針對此特定問題的解決方案。 我嘗試過使用其他版本的 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

在 GLSL ES 3.00 中不推薦使用關鍵字attribute和varying 。 比較OpenGL ES 着色語言 1.00 規范和OpenGL ES 着色語言 3.00 規范。 使用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 中修復此屬性錯誤？

問題描述

1 個解決方案

解決方案1
1 已采納 2021-03-21 14:51:50

如何在 WebGL 中修復此屬性錯誤？

問題描述

1 個解決方案

解決方案1 1 已采納 2021-03-21 14:51:50

解決方案1
1 已采納 2021-03-21 14:51:50