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

Source: Internet
Author: User

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

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.