javascript - What is the purpose of vertexAttribPointer? -

javascript - What is the purpose of vertexAttribPointer? -

i writing game engine using javascript , webgl. test out have written programme draws cube. programme work vertexattribpointer must called after have called bind buffers before phone call draw triangles. wondering method did , why have phone call these methods in order?

my best guess initializes attribute don't understand why must called on client side if case.

i have include of source below. written in typescript. total source see github.com/dkellycollins/nemesis

setting shader:

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

shaderprogram:

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

rendering cube:

public render():void { gl.drawelements(gl.triangles, this._triangles, gl.unsigned_short, 0); }

vertex shader source:

attribute vec3 position; //the position of point uniform mat4 pmatrix; uniform mat4 vmatrix; uniform mat4 mmatrix; attribute vec3 color; //the color of point varying vec3 vcolor; void main(void) { //pre-built function gl_position = pmatrix*vmatrix*mmatrix*vec4(position, 1.); //0. z, , 1 w vcolor=color; }

it tells webgl how interpret data:

gl.vertexattribpointer(attrib, index, gl.float, false, stride, offset);

this means: attribute attrib there index components of type gl.float not normalized starting @ offset , stride apart in bound gl.array_buffer.

the client free set info anyway wishes long can described above.

javascript opengl-es typescript webgl