background

This article appears in Data Visualization and Graphics

If necessary, you can refer to the above mentioned theories related to texture and simple use. Based on the above, you can carry out multi-texture practice (more to help partners in the group to get rid of pit in advance!!!!).

This outline

  1. Multi – texture rendering implementation ideas
  2. Multi-texture rendering coding(several scenes)

1. Multi-texture rendering implementation ideas

Multi-texture rendering refers more to gl_FragColor taking a texture2D * texture2D relationship. This article will cover the need for multi-vertex rendering and coordinate overlapping to help with advanced vertex rendering.

  1. Define vertexArray(2point for this article’s example)
  2. Define textureArray
  3. Create buffer (note the common buffer for multiple render nodes here)
  4. Register shader with this step by step. Bind data and render.

Multi-texture rendering coding(several scenes)

The first gl_FragColor takes the blend texture texture2D * texture2D

The Shader part is easy…

// vertex attribute vec2 a_position; // Attribute vec2a_texcoord; // Texture uniform vec2 u_resolution; varying vec2 v_texCoord; Void main() {// Coordinate conversion pixel ->1.0,0.0... vec2 zeroToOne = a_position / u_resolution; Vec2 zeroToTwo = zeroToOne * 2.0; Vec2 clipSpace = ZeroTotwo-1.0; gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); // Use v_texCoord = a_texCoord for fragment; } // fragment uniform sampler2D u_image0; Uniform sampler2D u_image1; // From vertex shader VARYING VEC2 v_texCoord; void main() { vec4 color0 = texture2D(u_image0, v_texCoord); vec4 color1 = texture2D(u_image1, v_texCoord); gl_FragColor = color0 * color1; // mix texture}Copy the code

JavaScript is also very easy to create node coordinates/textures /shader& data link/render done!

Github var texcoordBuffer = gl.createBuffer(); // Texture gl.bindBuffer(gl.array_buffer, texcoordBuffer); // bufferData ... for(... Images length){// Loop over gl.bindtexture (gl.texture_2d, texture); } var positionBuffer = gl.createBuffer(); // Triangle gl.bindbuffer (gl.array_buffer, positionBuffer); // Triangle gl.bindbuffer (gl.array_buffer, positionBuffer); // bufferData // The buffer is allocated to the attribute variable gl.vertexAttribPointer(texcoordLocation, size, type, normalize, stride, offset); gl.vertexAttribPointer( positionLocation, size, type, normalize, stride, offset); Gl / / open the attribute variables. EnableVertexAttribArray (positionLocation); gl.enableVertexAttribArray(texcoordLocation); / / texture!!!!!!!!!! Activate gl.activeTexture(gl.texture0); // Bind the given texture to the target (vertex) gl.bindtexture (gl.texture_2d, textures[0]); / / draw!!!!!! So let's say gl.drawArrays(TRIANGLES, 0, 6);Copy the code

The second multi-node texture (actually coordinates overlap the latter overlays the former…)

The Shader part wasn’t too difficult (nothing changed)…

// vertex attribute vec2 a_position; attribute vec2 a_texCoord; attribute lowp float textureIndex; uniform vec2 u_resolution; varying vec2 v_texCoord; varying lowp float indexPicker; void main() { vec2 zeroToOne = a_position / u_resolution; Vec2 zeroToTwo = zeroToOne * 2.0; Vec2 clipSpace = ZeroTotwo-1.0; gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); v_texCoord = a_texCoord; indexPicker = textureIndex; } // Fragment precision mediump float; // Texture Uniform sampler2D u_image[2]; // the texCoords passed in from the vertex shader. varying vec2 v_texCoord; varying lowp float indexPicker; Void main() {if (indexPicker < 0.5) {gl_FragColor = texture2D(u_image[0], v_texCoord); } else { gl_FragColor = texture2D(u_image[1], v_texCoord); }}Copy the code

JavaScript is also very easy to create node coordinates/textures /shader& data link/render done!

Github var texcoordBuffer = gl.createBuffer(); // Texture gl.bindBuffer(gl.array_buffer, texcoordBuffer); // bufferData ... for(... Images length){// Loop over gl.bindtexture (gl.texture_2d, texture); } // Note vertex!!!!! Var positionBuffer = gl.createBuffer(); // Triangle gl.bindbuffer (gl.array_buffer, positionBuffer); // Triangle gl.bindbuffer (gl.array_buffer, positionBuffer); // bufferData // The buffer is allocated to the attribute variable gl.vertexAttribPointer(texcoordLocation, size, type, normalize, stride, offset); gl.vertexAttribPointer( positionLocation, size, type, normalize, stride, offset); Gl / / open the attribute variables. EnableVertexAttribArray (positionLocation); gl.enableVertexAttribArray(texcoordLocation); / / texture!!!!!!!!!! Activate gl.activeTexture(gl.texture0); // Bind the given texture to the target (vertex) gl.bindtexture (gl.texture_2d, textures[0]); / / draw!!!!!! So gl.drawArrays(TRIANGLES, 0, Vertextarray.length /2); // Draw multiple (triangle combination) squaresCopy the code

!!!!!!!!!! Pay attention to the comments in the code (solve your confusion)

1. Webgl-utils. js webGL-related functions encapsulate the tool library

Full code example [Click on git Repository to view code example]

texture.html

texture1.html

Here are some things you might need to know about 2D rendering

  1. Texture cache
  2. Texture compression
  3. 2D/2D texture optimization
  4. Render optimization…

The last

Finally, we strongly hope that you can learn relevant theoretical knowledge; Theory may have little daily use, but it can determine how far you go. Writing speed I feel I can do it again, hahaha… Will continue to update recently (because we are developing our own rendering engine). It’s a long story… I’m sorry!)