main = (async () => {
// create a shader program (= vertex shader + fragment shader)
const program = createProgram(gl, vertexShader, fragmentShader)
// create a buffer to hold vertex positions
const vertexBuffer = createVertexBuffer(gl)
// store uniforms and attributes locations
const a_positionLoc = gl.getAttribLocation(program, 'a_position')
const u_timeLoc = gl.getUniformLocation(program, 'u_time')
const u_resolutionLoc = gl.getUniformLocation(program, 'u_resolution')
const u_mouseLoc = gl.getUniformLocation(program, 'u_mouse')
gl.canvas.addEventListener('mousemove', e => gl.uniform2f(u_mouseLoc, e.offsetX * devicePixelRatio, gl.canvas.height - e.offsetY * devicePixelRatio))
const texture = await loadTexture(gl, 'https://gist.githubusercontent.com/mbostock/9511ae067889eefa5537eedcbbf87dab/raw/944b6e5fe8dd535d6381b93d88bf4a854dac53d4/mona-lisa.jpg')
// set viewport before drawing
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
// define what program for drawing(rendering)
gl.useProgram(program)
// start rendering loop
function* rendering(){
const startTime = Date.now()
while(true) {
// update u_time and u_resolution uniforms
const time = (Date.now() - startTime) / 1000
gl.uniform1f(u_timeLoc, time)
gl.uniform2f(u_resolutionLoc, gl.canvas.width, gl.canvas.height)
gl.bindTexture(gl.TEXTURE_2D, texture)
// clear the canvas before we start drawing on it.
gl.clearColor(1.0, 1.0, Math.sin(time) / 2.0 + 0.5, 1.0)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
// set vertexBuffer to 'a_position' attribute
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer) // bind vertexBuffer to ARRAY_BUFFER
gl.enableVertexAttribArray(a_positionLoc) // enable individual attributes
const numComponents = 2 // pull out 2 values from vertexBuffer per iteration (=per vertex)
const type = gl.FLOAT // the data in the buffer is 32bit floats
const normalize = false // don't normalize
const stride = 0 // how many bytes to get from one set of values to the next
const offset = 0 // how many bytes inside the buffer to start from
gl.vertexAttribPointer(a_positionLoc, numComponents, type, normalize, stride, offset) // Bind the buffer currently bound to gl.ARRAY_BUFFER to a generic vertex attribute
// make a draw call
const primitiveType = gl.TRIANGLE_STRIP // set how the vertices should connect
const count = 4 // specify the number of indices (vertices) to be rendered
gl.drawArrays(primitiveType, offset, count); // Render primitives from array data
yield time
}
}
return rendering()
})()
