gpt4 book ai didi

javascript - vertexAttribPointer 的目的是什么?

转载 作者:数据小太阳 更新时间:2023-10-29 05:12:26 26 4
gpt4 key购买 nike

我正在使用 javascript 和 webgl 编写游戏引擎。为了测试它,我编写了一个绘制立方体的程序。为了让这个程序工作,vertexAttribPointer 必须在我调用绑定(bind)缓冲区之后但在我调用绘制三 Angular 形之前调用。我想知道这个方法到底做了什么,为什么我必须按这个顺序调用这些方法?

我最好的猜测是它初始化了属性,但我不明白为什么在这种情况下必须在客户端调用它。

我在下面包含了一些来源。一切都是用 typescript 写的。有关完整来源,请参阅 github.com/dkellycollins/nemesis

设置着色器:

var cubeShader = new shaderProgram();
cubeShader.addShader(shaders.colorVertexShader);
cubeShader.addShader(shaders.colorFragmentShader);
cubeShader.init();
cubeShader.enableAttrib("position", 3, 4 * (3 + 3), 0);
cubeShader.enableAttrib("color", 3, 4 * (3 + 3), 3 * 4);

着色器程序:

class shaderProgram {
constructor() {
this.Id = gl.createProgram();
}

public Id;

public addShader(shader:WebGLShader[]):void {
if(shader instanceof Array) {
shader.forEach(s => {
gl.attachShader(this.Id, s);
});
} else {
gl.attachShader(this.Id, shader);
}
}

public init():void {
gl.linkProgram(this.Id);
}

public setActive() {
gl.useProgram(this.Id);
}

public enableAttrib(attribName: string, index: number, stride:number, offset: number) {
var attrib = gl.getAttribLocation(this.Id, attribName);
gl.enableVertexAttribArray(attrib);
gl.vertexAttribPointer(attrib, index, gl.FLOAT, false, stride, offset);
}

public setFloatAttrib(attribName:string, value:number) {
var attrib = gl.getAttribLocation(this.Id, attribName);
gl.vertexAttrib1f(attrib, value);
}

public setMatrix(uniName: string, value: number[]) {
var uniform = gl.getUniformLocation(this.Id, uniName);
gl.uniformMatrix4fv(uniform, false, value);
}
}

渲染立方体:

public render():void {
gl.drawElements(gl.TRIANGLES, this._triangles, gl.UNSIGNED_SHORT, 0);
}

顶点着色器源代码:

attribute vec3 position; //the position of the point
uniform mat4 Pmatrix;
uniform mat4 Vmatrix;
uniform mat4 Mmatrix;
attribute vec3 color; //the color of the point
varying vec3 vColor;
void main(void) { //pre-built function
gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.); //0. is the z, and 1 is w
vColor=color;
}

最佳答案

它告诉 WebgL 如何解释数据:

gl.vertexAttribPointer(attrib, index, gl.FLOAT, false, stride, offset);

这意味着:对于属性 attribindex 类型的 gl.FLOAT 组件规范化在此调用时绑定(bind)的 gl.ARRAY_BUFFER 中从 offsetstride 开始。

客户端可以随意设置它的数据,只要它们可以像上面描述的那样。

关于javascript - vertexAttribPointer 的目的是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26677685/

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