gpt4 book ai didi

javascript - WebGL 不绘制线条

转载 作者:行者123 更新时间:2023-12-03 05:11:35 25 4
gpt4 key购买 nike

我想在 WebGL 上下文中画一条线,但它不起作用。我可以清除 Canvas 颜色,因此我知道程序已编译,但不确定错误在哪里。

代码的主要部分是

  let canvas = document.getElementById("gl-canvas");

let gl = WebGLUtils.setupWebGL(canvas);
if (!gl) {
alert("WebGL isn't available");
}
let program = initShaders(gl, "vertex-shader", "fragment-shader");
gl.useProgram(program);
gl.viewport(0, 0, canvas.width, canvas.height);

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

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

let color = gl.getAttribLocation(program, "color");
let colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1,0,0,1, 1,0,0,1]), gl.STATIC_DRAW);
gl.vertexAttribPointer(color, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(color);

let vPosition = gl.getAttribLocation(program, "vPosition");
let positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([1,1,1,1, -1,-1,-1,1]), gl.STATIC_DRAW);
gl.vertexAttribPointer(vPosition, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vPosition);

gl.drawArrays(gl.LINES, 0, 1);

完整代码可见here

最佳答案

问题出在您的 drawArrays 调用上:

count Specifies the number of indices to be rendered.

每条线需要两个索引:起点和终点:

gl.drawArrays(gl.LINES, 0, 2);

webgl line

关于javascript - WebGL 不绘制线条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41795634/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com