WebGL Notes (vii): stickers (end of note)

The previous article mentions two restrictions on mapping:

1. Cross-domain security restrictions

Similar to Ajax, but there is no test of the Security configuration file (some XML) under the root directory. Of course, not surprisingly, the local browse (file protocol) call relative path picture is also not possible. So, even testing can only be done under one web platform.

2, Picture format problems

There is a hint on the MDN:

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

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

I understand that the width and height of the image can only be 2^n (n=0| natural number), in pixels (px). But the limit is much more than that. Test the picture format through the situation:

• gif,8 bit color
• PNG,32/64 bit color
• bmp,32 bit color

jpg format do not know what reason, unexpectedly did not pass; It should be noted that the number of color digits should also be 2^n,24; Although 8-bit gifs are available, the 8-bit PNG does not. Tag/tiff not supported. PNG transparency is not supported, GIF transparency is supported.

Is the original in the MDN example, please download the details in the properties.

MDN Examples of decals: https://developer.mozilla.org/samples/webgl/sample6/index.html

This example makes a large modification, and increases the lighting effect. Note that there is no light change in the original example.

We first modify the shader

<IDtype= "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);

        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:

New Iwebgl (' GLCanvas ', 0);

/* cube vertex and triangular polygon vertex index order */

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,  

    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 Map */

Igl.loadtexture2 (' ff32.png ');

/* Set the scene */

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

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

function () {

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

    Igl.drawcube ();

}

/* Animated Effect */

SetInterval (animate, 40);

I think the effect is good.

Ops ... Forgot the link:

Webgl-step-07pro.html

Ff32.png

WebGL Notes (vii): stickers (end of note)