WebGL工作原理
step1：create vertexData
step2：create buffer and load vertexData to buffer
const buffer = gl.createBuffer()
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW)
step3： create vertex shader and fragment shader, create a program and attach shaders to the program
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vertexShader, `
attribute vec3 position;
void main() {
gl_Position = vec4(position, 1);
}
`)
// compiles a GLSL shader into binary data so that it can be used by a WebGLProgram.
gl.compileShader(vertexShader)
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragmentShader,`
void main() {
gl_FragColor = vec4(1, 0, 0, 1);
}
`)
gl.compileShader(fragmentShader)
const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program)
step4：enable vertex attributes
//returns the location of an attribute variable in a given WebGLProgram ( get the index )
const positionLocation = gl.getAttribLocation(program, `position`)
//turns on the generic vertex attribute array at the specified index into the list of attribute arrays.
gl.enableVertexAttribArray(positionLocation) // positionLocation is a index present position attribute.
//binds the buffer currently bound to gl.ARRAY_BUFFER to a generic vertex attribute of the current vertex buffer object and specifies its layout.
gl.vertexAttribPointer(positionLocation, 3, gl.FLOAT, false, 0, 0)
step5：draw
gl.useProgram(program)
gl.drawArrays(gl.TRIANGLES, 0, 3)
