WebGL uses FBO to complete the cube Paster effect (with demo source code download) _ javascript skills

This article mainly introduces how WebGL uses FBO to implement cube Paster effect, and analyzes the specific steps and related techniques of WebGL to implement cube Paster effect in the form of a complete example, the demo source code is provided for readers to download and reference. If you need it, you can refer to the following example to describe how WebGL uses FBO to complete the cube Paster effect. We will share this with you for your reference. The details are as follows:

This article mainly records some basic points of WebGL, and also learns how to use FBO and environment textures. Take a look (WebGL, Chrome, Firefox, and IE11 are supported ).

The main implementation process is as follows: first use FBO to output the current environment in the cube texture, then draw the current cube, and finally draw the ball, and paste the texture associated with FBO on this sphere.

When starting WebGL, it is best to have some OpenGL basics. When we talked about Obj perfection and MD2 earlier, we may have discovered that, because of the addition and use of the shader, most of Opengl APIs have not been used. WebGL is similar to this. Most of the functions are the main functions of the coloring tool. Record the main process and you can compare them to see if they are similar. to familiarize yourself with the basic functions of WebGL, in this paper, we do not use a perfect framework, but only use a framework (gl-matrix.js) to help calculate the matrix ).

Like using OpenGL, We need to initialize the use environment and extract some global usage. The related code is as follows:

Initialization:

Var gl; // WebGLRenderingContextvar cubeVBO; // Cube buffer IDvar sphereVBO; // sphere VBOvar sphereEBO; // sphere EBOvar cubeTexID; // Cube Texture IDvar fboBuffer; // The callback cache object var glCubeProgram; // The Cube shader applies var glSphereProgram; // The Sphere shader applies var fboWidth = 512; // The callback cache binds the texture width var fboHeight = 512; // The callback cache binds the texture height var targets; // The Cube is considerate to each direction var pMatrix = mat4.create (); // The Perspective matrix var vMatrix = mat4.create (); // view matrix var eyePos = vec3.fromValues (0.0, 1.0, 0.0); // eye position Var eyeLookat = vec3.fromValues (0.0,-0.0, 0.0); // var spherePos = vec3.fromValues (0.0,-0.0, 0.0) in the eye direction; // var canvanName in the sphere position; function webGLStart (cName) {canvanName = cName; InitWebGL (); encrypt (); InitSphereShader (); InitCubeBuffer (); InitSphereBuffer (); InitFBOCube (); // RenderFBO (); gl. clearColor (0.0, 0.0, 0.0, 1.0); gl. enable (gl. DEPTH_TEST); tick ();} function InitWebGL () {// var canvas = do Cument. getElementById (canvanName); InitGL (canvanName);} function InitGL (canvas) {try {// WebGLRenderingContext gl = canvas. getContext ("experimental-webgl"); gl. viewportWidth = canvas. width; gl. viewportHeight = canvas. height; targets = [gl. TEXTURE_CUBE_MAP_POSITIVE_X, gl. TEXTURE_CUBE_MAP_NEGATIVE_X, gl. TEXTURE_CUBE_MAP_POSITIVE_Y, gl. TEXTURE_CUBE_MAP_NEGATIVE_Y, gl. TEXTURE_CUBE_MAP_POSITIVE_Z, gl. T EXTURE_CUBE_MAP_NEGATIVE_Z];} catch (e) {}if (! Gl) {alert ("your browser does not support WebGL ");}}

Here, we initialize the WebGL's upstream and downstream environment on the webpage and provide a series of initialization processes. The following describes the code of the cube in the room.

Cube:

function InitCubeShader() {  //WebGLShader  var shader_vertex = GetShader("cubeshader-vs");  var shader_fragment = GetShader("cubeshader-fs");  //WebglCubeProgram  glCubeProgram = gl.createProgram();  gl.attachShader(glCubeProgram, shader_vertex);  gl.attachShader(glCubeProgram, shader_fragment);  gl.linkProgram(glCubeProgram);  if (!gl.getProgramParameter(glCubeProgram, gl.LINK_STATUS)) {    alert("Shader hava error.");  }  gl.useProgram(glCubeProgram);  glCubeProgram.positionAttribute = gl.getAttribLocation(glCubeProgram, "a_position");  glCubeProgram.normalAttribute = gl.getAttribLocation(glCubeProgram, "a_normal");  glCubeProgram.texCoordAttribute = gl.getAttribLocation(glCubeProgram, "a_texCoord");  glCubeProgram.view = gl.getUniformLocation(glCubeProgram, "view");  glCubeProgram.perspective = gl.getUniformLocation(glCubeProgram, "perspective");}function InitCubeBuffer() {  var cubeData = [      -10.0, -10.0, -10.0, 0.0, 0.0, -10.0, 1.0, 0.0,      -10.0, 10.0, -10.0, 0.0, 0.0, -10.0, 1.0, 1.0,      10.0, 10.0, -10.0, 0.0, 0.0, -10.0, 0.0, 1.0,      10.0, 10.0, -10.0, 0.0, 0.0, -10.0, 0.0, 1.0,      10.0, -10.0, -10.0, 0.0, 0.0, -10.0, 0.0, 0.0,      -10.0, -10.0, -10.0, 0.0, 0.0, -10.0, 1.0, 0.0,      -10.0, -10.0, 10.0, 0.0, 0.0, 10.0, 0.0, 0.0,      10.0, -10.0, 10.0, 0.0, 0.0, 10.0, 1.0, 0.0,      10.0, 10.0, 10.0, 0.0, 0.0, 10.0, 1.0, 1.0,      10.0, 10.0, 10.0, 0.0, 0.0, 10.0, 1.0, 1.0,      -10.0, 10.0, 10.0, 0.0, 0.0, 10.0, 0.0, 1.0,      -10.0, -10.0, 10.0, 0.0, 0.0, 10.0, 0.0, 0.0,      -10.0, -10.0, -10.0, 0.0, -10.0, 0.0, 0.0, 0.0,      10.0, -10.0, -10.0, 0.0, -10.0, 0.0, 1.0, 0.0,      10.0, -10.0, 10.0, 0.0, -10.0, 0.0, 1.0, 1.0,      10.0, -10.0, 10.0, 0.0, -10.0, 0.0, 1.0, 1.0,      -10.0, -10.0, 10.0, 0.0, -10.0, 0.0, 0.0, 1.0,      -10.0, -10.0, -10.0, 0.0, -10.0, 0.0, 0.0, 0.0,      10.0, -10.0, -10.0, 10.0, 0.0, 0.0, 0.0, 0.0,      10.0, 10.0, -10.0, 10.0, 0.0, 0.0, 1.0, 0.0,      10.0, 10.0, 10.0, 10.0, 0.0, 0.0, 1.0, 1.0,      10.0, 10.0, 10.0, 10.0, 0.0, 0.0, 1.0, 1.0,      10.0, -10.0, 10.0, 10.0, 0.0, 0.0, 0.0, 1.0,      10.0, -10.0, -10.0, 10.0, 0.0, 0.0, 0.0, 0.0,      10.0, 10.0, -10.0, 0.0, 10.0, 0.0, 0.0, 0.0,      -10.0, 10.0, -10.0, 0.0, 10.0, 0.0, 1.0, 0.0,      -10.0, 10.0, 10.0, 0.0, 10.0, 0.0, 1.0, 1.0,      -10.0, 10.0, 10.0, 0.0, 10.0, 0.0, 1.0, 1.0,      10.0, 10.0, 10.0, 0.0, 10.0, 0.0, 0.0, 1.0,      10.0, 10.0, -10.0, 0.0, 10.0, 0.0, 0.0, 0.0,      -10.0, 10.0, -10.0, -10.0, 0.0, 0.0, 0.0, 0.0,      -10.0, -10.0, -10.0, -10.0, 0.0, 0.0, 1.0, 0.0,      -10.0, -10.0, 10.0, -10.0, 0.0, 0.0, 1.0, 1.0,      -10.0, -10.0, 10.0, -10.0, 0.0, 0.0, 1.0, 1.0,      -10.0, 10.0, 10.0, -10.0, 0.0, 0.0, 0.0, 1.0,      -10.0, 10.0, -10.0, -10.0, 0.0, 0.0, 0.0, 0.0,  ];  cubeVBO = gl.createBuffer();  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVBO);  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cubeData), gl.STATIC_DRAW);}function RenderCube() {  gl.useProgram(glCubeProgram);  gl.bindBuffer(gl.ARRAY_BUFFER, cubeVBO);  gl.vertexAttribPointer(glCubeProgram.positionAttribute, 3, gl.FLOAT, false, 32, 0);  gl.enableVertexAttribArray(glCubeProgram.positionAttribute);  gl.vertexAttribPointer(glCubeProgram.normalAttribute, 3, gl.FLOAT, false, 32, 12);  gl.enableVertexAttribArray(glCubeProgram.normalAttribute);  gl.vertexAttribPointer(glCubeProgram.texCoordAttribute, 2, gl.FLOAT, false, 32, 24);  gl.enableVertexAttribArray(glCubeProgram.texCoordAttribute);  gl.uniformMatrix4fv(glCubeProgram.view, false, vMatrix);  gl.uniformMatrix4fv(glCubeProgram.perspective, false, pMatrix);  gl.drawArrays(gl.TRIANGLES, 0, 36);}

The above code is mainly divided into the initialization of the cube's coloring machine object, initialization of the relevant cache, and then draw the cube, it can be said that in Opengl, if you use the coloring machine to draw, the process is similar, in Opengl, there are no fixed pipeline functions, such as InterleavedArrays, to specify whether it is a vertex, a normal, or a texture. vertexAttribPointer is used to transmit data between the application and the shader. In the previous MD2 animated animation implementation, the parameter transfer later in the animated version also has related applications.

The main code of the cube coloring tool is as follows:

Cube coloring er implementation: