• Vertex shader
export let vs_transform = `#version 300 es layout (location = 0) in vec3 aPos; layout (location = 1) in vec2 aTexCoord; out vec2 TexCoord; uniform mat4 transform; Void main() {gl_Position = transform * vec4(aPos, 1.0); TexCoord = vec2(aTexCoord.x, aTexCoord.y); } `
Copy the code
  • Chip shader
export let fs_transform = `#version 300 es precision mediump float; out vec4 FragColor; in vec2 TexCoord; // texture samplers uniform sampler2D texture1; uniform sampler2D texture2; void main() { // linearly interpolate between both textures (80% container, 20% awesomeface) FragColor = mix(texture(texture1, TexCoord), texture(texture2, TexCoord), 0.2); } `
Copy the code
  • createVertexArray bindVertexArray
  • createBuffer bindBuffer bufferData vertexAttribPointer enableVertexAttribArray
  • createBuffer bufferData
ourShader = new Shader(gl, vs_transform, fs_transform); Let are = new Float32Array ([0.5, 0.5, 0.0, 1.0, 1.0, 0.5, 0.5, 0.0, 1.0, 0.0, 0.5, 0.5, 0.0, 0.0, 0.0, 0.5, 0.5, 0.0, 0.0, 1.0]); let indices = new Uint16Array([ 0, 1, 3, 1, 2, 3 ]); VAO = gl.createVertexArray(); let VBO = gl.createBuffer(); let EBO = gl.createBuffer(); gl.bindVertexArray(VAO); gl.bindBuffer(gl.ARRAY_BUFFER, VBO); gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW); gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, EBO); gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW); gl.vertexAttribPointer(0, 3, gl.FLOAT, false, 5 * sizeFloat, 0); gl.enableVertexAttribArray(0); gl.vertexAttribPointer(1, 2, gl.FLOAT, false, 5 * sizeFloat, (3 * sizeFloat)); gl.enableVertexAttribArray(1);Copy the code
  • createTexture bindTexture texParameteri texImage2D
texture1 = gl.createTexture(); initTexture(gl, texture1); const image1 = new Image(); image1.onload = function () { gl.bindTexture(gl.TEXTURE_2D, texture1); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image1); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.generateMipmap(gl.TEXTURE_2D); }; image1.src = ".. /.. /textures/container.jpg"; texture2 = gl.createTexture(); initTexture(gl, texture2); const image2 = new Image(); image2.onload = function () { gl.bindTexture(gl.TEXTURE_2D, texture2); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image2); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR); gl.generateMipmap(gl.TEXTURE_2D); }; image2.src = ".. /.. /textures/awesomeface.png"; ourShader.use(gl); ourShader.setInt(gl, "texture1", 0); ourShader.setInt(gl, "texture2", 1); requestAnimationFrame(render); function initTexture(gl, texture) { gl.bindTexture(gl.TEXTURE_2D, texture); const width = 1; const height = 1; const pixel = new Uint8Array([0, 0, 255]); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, width, height, 0, gl.RGB, gl.UNSIGNED_BYTE, pixel); }Copy the code
  • activeTexture bindTexture
  • getUniformLocation uniformMatrix4fv
  • bindVertexArray
function render() { processInput(); Gl. ClearColor (0.2, 0.3, 0.3, 1.0); gl.clear(gl.COLOR_BUFFER_BIT); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, texture1); gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, texture2); let transform = mat4.create(); Mat4. translate(transform, transform, vec3.fromValues(0.5, -0.5, 0.0)); mat4.rotateZ(transform, transform, performance.now() / 1000); ourShader.use(gl); let transformLoc = gl.getUniformLocation(ourShader.programId, "transform"); gl.uniformMatrix4fv(transformLoc, false, transform); gl.bindVertexArray(VAO); gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0); requestAnimationFrame(render); } function processInput() { }Copy the code