Javascript 如何修复WebGL中的此属性错误？_Javascript_Glsl_Webgl

Javascript 如何修复WebGL中的此属性错误？

javascript glsl webgl

Javascript 如何修复WebGL中的此属性错误？,javascript,glsl,webgl,Javascript,Glsl,Webgl,我正在跟踪我正在做的一个类的演示，我不断在下面的代码中发现一个错误： <html> <head> <script id="vertex-shader" type="x-shader/x-vertex"> # version 300 es attribute vec4 vPosition; void main()

我正在跟踪我正在做的一个类的演示，我不断在下面的代码中发现一个错误：

<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>

GLSL ES 3.00中不推荐使用关键字

属性

和

变量

。比较和。使用

输入

和

输出

而不是

属性

和

变化

：

#版本300 es
在vec4位置；
void main（）
{
gl_位置=V位置；
}

gl\u FragColor

（不区分大小写

gl\u FragColor

）也已过时。相反，您需要声明一个

out

变量：

#版本300 es
精密中泵浮子；
均匀vec4彩色；
out vec4 fragColor；
void main（）
{
fragColor=fColor；
}

谢谢！工作起来很有魅力：）演示代码已经过时了，我还需要解决一些问题，但我问题中的这一步就像你说的那样有效。


"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);
    
  
};