You could draw a solid color model is not enough, in order to present a more realistic model, we also need to paint texture maps to the model.

Loss of context

GPU as a public resource, it will be used by multiple processes simultaneously, in the absence of sufficient resources (such as a PC or a mobile phone while entering the sleep or wake before state), we will lose hold of the context of the situation, to ensure the robustness of running, we have to deal with it after the loss of context.

Canvas provides us with two events to listen, the context of loss and recovery, see the specific use the following code:

. 1  var Canvas = document.getElementById ( "myGLCanvas" );
 2  // listener missing event context 
. 3 canvas.addEventListener ( "webglcontextlost", function (Event) {
 . 4      // cancel the default behavior 
. 5      the event.preventDefault ();
 . 6      / / stop codes continue drawing 
. 7 }, to false );
 . 8  // listening event context recovery 
. 9 canvas.addEventListener ( "webglcontextrestored", function () {
 10      // re-initialization code 
11      // Note that by Canvas getContext the method of obtaining the context object does not require reacquisition, the context object can continue to use the previously acquired 
12     // resumes drawing code 
13 is }, to false );

Simulate the loss of context

We want to test whether the loss of the context of normal handling code, you need to trigger the loss of context, we can use the following js library to simulate the loss of context:

https://github.com/KhronosGroup/WebGLDeveloperTools

Can refer to its src \ debug \ lost-context-simulator-test.html exemplary directory used.

2D mapping and cube mapping

We need to be attached to 2D image on the 3D model, need to use the 2D images using UV coordinates to determine a 3D surface point may correspond to one pixel on a 2D image or a plurality of pixels (samples), the following is a uv coordinate coordinate system:

(S corresponding to u, t corresponding to v), the range [0-1].

Cube map is a 2D image contains six mapping, environment mapping is generally used to implement or realize the environment reflecting, the following example applications can exhibit good environmental reflections:

https://threejs.org/examples/#webgl_materials_envmaps

In addition to the cube mapping it is also commonly used to create a sky box (SkyBox).

Texture Size

We submitted to the height and width of the GPU image size must be 2 ^ n, namely (2,4,8,16,32,64,128,256 ...), but in the WebGL and OpenGL ES 2.0, we can also use the aspect of non-n-th power of 2 pictures that NPOT (non Power of two);

If we use the n-th power of 2 non-picture, there will be some of the following restrictions:

You can not use MipMap mapping;
Sampling the texture map in the shader: texture filtering with only the nearest point or linear, repeating pattern can not be used.

Specific look: https://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

Flip on the y-axis

Let's look at the difference between the coordinate system of the coordinate system of the DOM object of Image and WebGL textures:

Can be found, two y-axis coordinate system is just the opposite, in order to make it consistent with the coordinate system, we need to use the following code to flip the y-axis:

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);

Texture Filtering

Our picture texture and size of the area to be rendered is not always exactly the same, when the texture is smaller than the area in need of Texture rendering extension, it is larger than when the texture rendering area in need of Texture contraction;

MipMap

When texture stretching too large and too large contraction, will appear blurred and serrated, in order to solve this problem, we can use the texture sets sized to correspond to render the regions of different sizes, the GPU will be automatically selected according to the size of the rendering area;

advantage

When the model is both away from or closer to the camera, the display will be more natural;
Higher rendering efficiency;

Shortcoming

Memory usage will increase as a single picture 1/3;

Create a method of MipMap

After submitting texture, call gl.generateMipmap WebGL method automatically generates MipMap specified texture;
After passing through the external tool, directly generate all MipMap good, manual submission, the method generally used for special situations, such as different levels of MipMap inconsistent texture image;

Packing texture coordinates

GL_REPEAT: outside the scope of the texture coordinates are ignored integer part, form a repeating effect.
GL_MIRRORED_REPEAT: outside the scope of the texture coordinates is ignored integer part, be inverted an odd number, but when the integer part is formed as a mirror effect.
GL_CLAMP_TO_EDGE: outside the scope of the texture coordinates are truncated to 0 and 1, the effect of forming the texture extending edge.

activeTexture和bindTexture

gl.activeTexture

Activation current mapping operation, subsequent code designated texture which is operated, the parameter is an enumeration gl.TEXTURE0 gl.TEXTURE7 (See maximum gl.MAX_COMBINED_TEXTURE_IMAGE_UNITS, minimum is 8);

BindTexture later calls to bind the current mapping operation, if there is no call to call bindTexture activeTexture, activate default texture unit number 0 (the default will be appreciated that the call gl.activeTexture (gl.TEXTURE0) code);

gl.bindTexture

Binding specifies texture to texture activeTexture activation unit, and can specify the type of texture;

More detailed information can be found here: https://www.jianshu.com/p/1829b4acc58d

Examples

https://hammerc.github.io/dou3d-ts/examples/learningNotes/lesson_4/index.html

WebGL study notes (six): the texture map