WebGL notes (7): Paster (end of notes), end of webgl notes Paster

WebGL notes (7): Paster (end of notes), end of webgl notes Paster

The previous article mentioned two limitations on Textures:

1. Cross-origin security restrictions

It is similar to AJAX, but does not test whether the root directory has a security configuration file (some xml files. Of course, it is not surprising that local browsing (file protocol) cannot call relative path images. Therefore, the connection test can only be performed on one web platform.

2. Image Format Problems

There is a prompt on MDN:

Https://developer.mozilla.org/en/WebGL/Using_textures_in_WebGL

Note: Textures' widths and heights must be a power of two number of pixels (that is, 1, 2, 4, 8, 16, etc).

I understand that the width and height of an image can only be 2 ^ n (n = 0 | natural number), in pixels (px ). But the limit is far greater than that. Formats of images that have passed the test:

• GIF, 8-bit color
• PNG, 32/64-bit color
• BMP, 32-bit color

JPG format was not passed for any reason. It should be noted that the color bits should also be 2 ^ n and 24 bits were not passed. However, although 8-bit gif images can be used, however, 8-bit png is not supported. Tag/tiff is not supported. PNG transparency is not supported, and GIF transparency is supported.

It is the source image in the MDN example. Please download it and view the details in the property.

MDN examples of textures: https://developer.mozilla.org/samples/webgl/sample6/index.html

In this example, great changes are made and the lighting effect is added. Note that no light changes in the original example.

 

First, modify the Shader

<script id="shader-vs" type="x-shader/x-vertex">

    attribute highp vec3 aVertexNormal;

    attribute highp vec3 aVertexPosition;

    attribute highp vec2 aTextureCoord;

    uniform highp mat4 uNormalMatrix;

    uniform highp mat4 uMVMatrix;

    uniform highp mat4 uPMatrix;

    varying highp vec2 vTextureCoord;

    varying highp vec3 vLighting;

    void main(void) {

        gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

        vTextureCoord = aTextureCoord.st;

        highp vec3 ambientLight = vec3(0.6, 0.6, 0.6);

        highp vec3 directionalLightColor = vec3(0.5, 0.5, 0.75);

        highp vec3 directionalVector = vec3(0.85, 0.8, 0.75);

        highp vec4 transformedNormal = uNormalMatrix * vec4(aVertexNormal, 1.0);

        highp float directional = max(dot(transformedNormal.xyz, directionalVector), 0.0);

        vLighting = ambientLight + (directionalLightColor * directional);

    }

</script>

<script id="shader-fs" type="x-shader/x-fragment">

    varying highp vec2 vTextureCoord;

    varying highp vec3 vLighting;

    uniform sampler2D uSampler;

    void main(void) {

        highp vec2 texCoord = vec2(vTextureCoord.s, vTextureCoord.t);

        highp vec4 color = texture2D(uSampler, texCoord);

        gl_FragColor = vec4(color.rgb * vLighting, color.a);

    }

</script>

 

Some code:

var igl = new iWebGL('glcanvas', 0);

/* Sequence of cube vertex and triangle vertex Index */

var vs = CubeVertices();

igl.paramVertices('aVertexPosition').define(vs.data);

igl.paramVerticesIndex().define(vs.indices);

/* Vertex map data */

igl.paramVertices('aVertexNormal').define([  

    // Front  

     0.0,  0.0,  1.0,  

     0.0,  0.0,  1.0,  

     0.0,  0.0,  1.0,  

     0.0,  0.0,  1.0,

    // Back  

     0.0,  0.0, -1.0,  

     0.0,  0.0, -1.0,  

     0.0,  0.0, -1.0,  

     0.0,  0.0, -1.0, 

    // Top  

     0.0,  1.0,  0.0,  

     0.0,  1.0,  0.0,  

     0.0,  1.0,  0.0,  

     0.0,  1.0,  0.0,

    // Bottom  

     0.0, -1.0,  0.0,  

     0.0, -1.0,  0.0,  

     0.0, -1.0,  0.0,  

     0.0, -1.0,  0.0,  

    // Right  

     1.0,  0.0,  0.0,  

     1.0,  0.0,  0.0,  

     1.0,  0.0,  0.0,  

     1.0,  0.0,  0.0,  

    // Left  

    -1.0,  0.0,  0.0,  

    -1.0,  0.0,  0.0,  

    -1.0,  0.0,  0.0,  

    -1.0,  0.0,  0.0  

]);

igl.paramTexture('aTextureCoord').define([

// Front

0.0,  0.0,

1.0,  0.0,

1.0,  1.0,

0.0,  1.0,

// Back

0.0,  0.0,

1.0,  0.0,

1.0,  1.0,

0.0,  1.0,

// Top

0.0,  0.0,

1.0,  0.0,

1.0,  1.0,

0.0,  1.0,

// Bottom

0.0,  0.0,

1.0,  0.0,

1.0,  1.0,

0.0,  1.0,

// Right

0.0,  0.0,

1.0,  0.0,

1.0,  1.0,

0.0,  1.0,

// Left

0.0,  0.0,

1.0,  0.0,

1.0,  1.0,

0.0,  1.0

]);

/* Call the texture */

igl.loadTexture2('ff32.png');

/* Set the scenario */

igl.matrix.trans([0.0, 0.0, -5.0]);

igl.matrix.make(40, 640 / 480, 0.1, 100.0);

var animate = function(){

    igl.matrix.rotate(1, [1, 0, 1]);

    igl.drawCube();;

}

/* Animation effect */

setInterval(animate, 40);

 

I think the effect is good.

Ops... Forgot link:

WebGL-Step-07pro.html

Ff32.png