文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在WebGL中修复这个属性错误？

问如何在WebGL中修复这个属性错误？
EN

Stack Overflow用户

提问于 2021-03-21 14:46:49

回答 1查看 1.5K关注 0票数 2

我正在跟踪我正在做的一个类的演示，并且一直在下面的代码中得到一个错误：

<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行中的“‘属性’：非法使用保留词”。我已经在堆栈溢出中查找过类似的问题，无法找到解决这个问题的方法。我试过使用其他版本的WebGL，但没有起作用。initShaders是一个帮助程序库，由我为Edward编写的“交互式计算机图形学”()一书的作者使用，并用于其他示例。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);
    
  
};

javascript

glsl

webgl

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-03-21 14:51:50

在GLSL 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;
}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66733725

复制

相似问题

问如何在WebGL中修复这个属性错误？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在WebGL中修复这个属性错误？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在WebGL中修复这个属性错误？
EN