background

This article appears in Data Visualization and Graphics

I have introduced the content related to texture above, and implemented it in 2D using WebGL. Today, the content of last class is continued for 3D realization of texture, which can also be regarded as learning the mode of MDN-Tutorial. I feel that such learning track is also the original intention (I am afraid that you and I can’t stick to it every time I talk about the theory of graphics in a long way At present, the best way, for WebGL learning or graphics learning can have an understanding. Without further ado, we will begin today’s content (mostly code talk) as quickly as possible through some basic apis… Step 1 Become an API engineer)

Texture related content is introduced above, you can refer to above if necessary

This outline

  1. What’s the difference between 2D and 3D? Drawing ideas?
  2. Coding (simple use of textures in WebGL)

The coding section introduces webgl-utils(some useprogram,linkProgram abbreviation is not too magic)& Martix (some generation/calculation of matrix..) Tool library

1.2 Differences between D and 3D

First of all, we all know that 2D is just a plane, 3D can be understood as six planes, so this article mainly solves how to add five planes (of course, adding will be accompanied by some problems, it doesn’t matter step by step).

This article will correct some of the feedbacks above, such as too few code comments. Ok, LET me write as much as I can

WebGl Coding starts by reviewing the steps

  1. shader
  2. To create the program
  3. Processing coordinates and texture correlation
  4. Gets and binds coordinate information
  5. Draw the draw

It looks so simple so let’s write it together

coding

Take a look at the effect before you start coding

I’m missing a GIF and I’ll fill it in tomorrow somewhere with a computer.

1. shader

I have received feedback from friends that the Shader section takes care of newbies, so I will add a comment line by line to introduce it. Of course, more details or have to look at the relevant information. I don’t speak well (mainly lazy cancer sufferers)

Vec4 is a variable named attribute vec4 a_position; vec4 is a variable named attribute vec4 a_position; Vec4 is a vector a_position variable named attribute vec2 a_texcoord; // Uniform variables can be used on vertices and tiles (if two shader names have the same name, they can be shared). The variable name varying VEC2 V_TEXCOord specifies the name of the variable varying VEC2 V_texcoord. Void main() {// gl_Position vertex coordinates gl_Position = u_matrix * a_position; // Pass texture coordinates to the fragment shader v_texcoord = a_texcoord; } // fragment shader // precision limit mediump medium precision float data type; // fragment shader // mediump medium precision float data type; // fragment shader // precision limit mediump medium precision float data type; Vec2 V_TEXCOord Specifies the name of the variable varying VEC2 V_texcoord. Uniform variable (read-only global) sampler2D uniform variable u_texture; Void main() {// gl_FragColor color information here is the texture texture2D is the sampler texture v_texcoord texture coordinates see js code interspersed to understand gl_FragColor = texture2D(u_texture, v_texcoord); }Copy the code

I wrote this note I admire. Don’t leave a message. I told you to ask, you didn’t ask. To know that will not ask nothing ashamed to learn that is their own strong promotion raise refueling

2. To create the program

// use webgl-utils as useVertex and useFragment and linkProgram... var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-3d", "fragment-shader-3d"]);Copy the code

3. Coordinate processing and texture correlation

/ / the vertex coordinates transformation happened six surface var positions = new Float32Array ([0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5]); / / picture cross-domain solution Way, of course, a lot of you can also draw canvas2d canvas is then created texture on the standard supports the photo cross-domain interested can check function requestCORSIfNotSameOrigin (img. url) { if ((new URL(url, window.location.href)).origin ! == window.location.origin) { img.crossOrigin = ""; }} / / loading pictures And finish binding texture in the load function loadImageAndCreateTextureInfo (url) {var Tex = gl. CreateTexture (); gl.bindTexture(gl.TEXTURE_2D, tex); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([0, 0, 255, 255])); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR); var textureInfo = { width: 1, height: 1, texture: tex, }; var img = new Image(); img.addEventListener('load', function() { textureInfo.width = img.width; textureInfo.height = img.height; gl.bindTexture(gl.TEXTURE_2D, textureInfo.texture); // Call texImage2D() to write the loaded image graphics data to the texture gl.teximage2d (gl.texture_2d, 0, gl.rgba, gl.rgba, gl.unsigned_byte, img); }); requestCORSIfNotSameOrigin(img, url); img.src = url; return textureInfo; } var texInfo = loadImageAndCreateTextureInfo('https://webglfundamentals.org/webgl/resources/leaves.jpg');Copy the code

4. Obtain and bind coordinate information

  var positionLocation = gl.getAttribLocation(program, "a_position");
  var texcoordLocation = gl.getAttribLocation(program, "a_texcoord");

  var matrixLocation = gl.getUniformLocation(program, "u_matrix");
  var textureLocation = gl.getUniformLocation(program, "u_texture");

  var positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  setGeometry(gl);

  var texcoordBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer);
  setTexcoords(gl);

  var texture = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
                new Uint8Array([0, 0, 255, 255]));
Copy the code

5. Use program and provide buffer to fetch data and draw

gl.vertexAttribPointer( positionLocation, size, type, normalize, stride, offset); / / enabled texcoord attribute gl. EnableVertexAttribArray (texcoordLocation); // Bind texcoord buffer.gl.bindBuffer (gl.array_buffer, texcoordBuffer); . gl.drawArrays(gl.TRIANGLES, 0, 6 * 6);Copy the code

Ok, that’s it. Just for the sake of your exercise, the important thing to note is that the above code takes one texture and you can take multiple textures if you want to change multiple images. It can also be combined into a texture and adjusted with coordinate information.

All code please go to Github download and use

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. This column I speed up (a week 1-2) other columns (1) computer graphics related to the basic knowledge will take over. And then the follow-up mainly write data visualization direction.

What’s next? I am ready to wrap up the MDN-tutorial section. Then start the formal visualization link (can introduce a few commonly used libraries 2D and 3D can, we have a look at what useful libraries need me to go through it). Or everyone put forward suggestions!