webgl 中的变化未按预期工作

Question

我是 WebGL 的新手，现在正在学习可变变量。在此，我的预期输出是下图。

在下面的代码中，我尝试将颜色从顶点着色器传递到片段 shader.The drawArray 中传递的基元类型是一个三角形，但它不绘制 triangles.I 编写此代码以了解变化WebGL 中的变量，来自 WebGLfundamental 网站。我不知道出了什么问题，因为据我所知，这是我应该做的。

我期待的输出是：

代码是：

"use strict";

var vs = `#version 300 es

precision highp float;

in vec2 a_position;
in vec4 a_color;

out vec4 v_color;

void main(){
 gl_Position = vec4(a_position, 0, 1);
 v_color = a_color;
}
`;


var fs = `#version 300 es

precision highp float;

in  vec4 v_color;

out vec4 outColor;

void main(){
 outColor = v_color;
}
`;


function main() {
    var canvas = document.querySelector("#c");
    var gl = canvas.getContext("webgl2");
    if (!gl) {
        return;
    }

    var program = webglUtils.createProgramFromSources(gl, [vs, fs]);

    var vertexPosition = gl.getAttribLocation(program, 'a_position');
    var vertexColor = gl.getAttribLocation(program, 'a_color');

    var vao = gl.createVertexArray();
    gl.bindVertexArray(vao);

    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    var position = [
        -150, -100,
        150, -100,
        -150, 100,
        -150, 100,
        150, -100,
        150, 100
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(position), gl.STATIC_DRAW);

    gl.enableVertexAttribArray(vertexPosition);

    var size = 2;
    var type = gl.FLOAT;
    var normalize = false;
    var stride = 0;
    var offset = 0;

    gl.vertexAttribPointer(vertexPosition, size, type, normalize, stride, offset);


    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    var color = [
        0.7, 0.2, 0.9, 1,
      0.6, 0.7, 0.2, 1,
      0.5, 0.7, 0.9, 1,
      0.4, 0.7, 0.2, 1,
      0.7, 0.2, 0.9, 1,
      0.5, 0.7, 0.9, 1,
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(color), gl.STATIC_DRAW);

    gl.enableVertexAttribArray(vertexColor);

    var size =4;
    var type = gl.FLOAT;
    var normalize = false;
    var stride = 0;
    var offset = 0;

    gl.vertexAttribPointer(vertexColor, size, type, normalize, stride, offset);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clearColor(0, 0, 0, 0);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.useProgram(program);

    gl.bindVertexArray(vao);

    var offset = 0;
    var count = 6;
    gl.drawArrays(gl.TRIANGLES, offset, count);

}


main();

 body{
     overflow: hidden;
    }

    canvas {
        width: 100vw;
        height: 100vh;
        display: block;
    }

<script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
<canvas id="c">
</canvas>

Answer 1

问题是您以像素为单位提供位置，但 WebGL 需要剪辑 space 中的位置。因此，除了仅显示 300x200 矩形的中心 2x2 单元外，您正在绘制您认为正在绘制的内容。

例如，如果我们只是破解并将头寸除以 300,200

gl_Position = vec4(a_position / vec2(300, 200);

然后就可以了

"use strict";

var vs = `#version 300 es

precision highp float;

in vec2 a_position;
in vec4 a_color;

out vec4 v_color;

void main(){
 gl_Position = vec4(a_position / vec2(300, 200), 0, 1);
 v_color = a_color;
}
`;


var fs = `#version 300 es

precision highp float;

in  vec4 v_color;

out vec4 outColor;

void main(){
 outColor = v_color;
}
`;


function main() {
    var canvas = document.querySelector("#c");
    var gl = canvas.getContext("webgl2");
    if (!gl) {
        return;
    }

    var program = webglUtils.createProgramFromSources(gl, [vs, fs]);

    var vertexPosition = gl.getAttribLocation(program, 'a_position');
    var vertexColor = gl.getAttribLocation(program, 'a_color');

    var vao = gl.createVertexArray();
    gl.bindVertexArray(vao);

    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    var position = [
        -150, -100,
        150, -100,
        -150, 100,
        -150, 100,
        150, -100,
        150, 100
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(position), gl.STATIC_DRAW);

    gl.enableVertexAttribArray(vertexPosition);

    var size = 2;
    var type = gl.FLOAT;
    var normalize = false;
    var stride = 0;
    var offset = 0;

    gl.vertexAttribPointer(vertexPosition, size, type, normalize, stride, offset);


    var buffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

    var color = [
        0.7, 0.2, 0.9, 1,
      0.6, 0.7, 0.2, 1,
      0.5, 0.7, 0.9, 1,
      0.4, 0.7, 0.2, 1,
      0.7, 0.2, 0.9, 1,
      0.5, 0.7, 0.9, 1,
    ];

    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(color), gl.STATIC_DRAW);

    gl.enableVertexAttribArray(vertexColor);

    var size =4;
    var type = gl.FLOAT;
    var normalize = false;
    var stride = 0;
    var offset = 0;

    gl.vertexAttribPointer(vertexColor, size, type, normalize, stride, offset);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    gl.clearColor(0, 0, 0, 0);

    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    gl.useProgram(program);

    gl.bindVertexArray(vao);

    var offset = 0;
    var count = 6;
    gl.drawArrays(gl.TRIANGLES, offset, count);

}


main();

body{
     overflow: hidden;
    }

    canvas {
        width: 100vw;
        height: 100vh;
        display: block;
    }

<script src="https://webgl2fundamentals.org/webgl/resources/webgl-utils.js"></script>
<canvas id="c">
</canvas>

将位置从像素 space 转换为剪辑 space 的正常方法是 use a matrix

webgl 中的变化未按预期工作

varying in webgl is not working as expected

webgl

webgl2