WebGL Learning Note Five

This chapter is mainly about the texture of the further explanation, we often need to put the real picture in the Web page rather than to create a picture, through the texture we can be rasterized graphics and image texture to form a map and the picture in the graphic display. The basic process is consistent with the previous chapters, in the shader is mainly added a sampler of the variable function is to remove the graphics from the texture unit on the different coordinates of the element display, here first to set the texture coordinates and WEBGL coordinates to form a map, then create an Image object, create a texture object, open a texture unit , binds the texture object to the texture cell, configures the texture parameter, adds the image object to the texture cell, passes the texture in the texture unit to the sampler, and the sampler displays the texture image based on the corresponding relationship between the texture coordinates and the WEBGL coordinates. Http://localhost:8080/WebGL5/TexturedQuad.html

The effect is as follows:

Look at the code:

<! DOCTYPE html>
<title>TexturedQuad.html</title>

<meta http-equiv= "keywords" content= "keyword1,keyword2,keyword3" >
<meta http-equiv= "description" content= "This is my page" >
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">

<!--<link rel= "stylesheet" type= "Text/css" href= "./styles.css" >-->
<script src= "Js/cuon-matrix.js" ></script>
<script src= "Js/cuon-utils.js" ></script>
<script src= "Js/webgl-debug.js" ></script>
<script src= "Js/webgl-utils.js" ></script>
<script type= "Text/javascript" >
var vshader_source=//fixed-point shader
' attribute vec4 a_position;\n ' +//defines the VEC4 variable and declares that the variable is of type attribute
' attribute float a_pointsize;\n ' +
' attribute vec2 a_textcoord;\n ' +
' Varying vec2 v_textcoord;\n ' +
' void main () {\ n ' +
' gl_position=a_position;\n ' +//assigns the attribute variable to the internal
' gl_pointsize=a_pointsize;\n ' +
' v_textcoord=a_textcoord;\n ' +//passing data to the chip shader
'}\n ';

var fshader_source=//chip Shader
' Precision mediump float;\n ' +
' Uniform sampler2d u_sampler;\n ' +
' Varying vec2 v_textcoord;\n ' +
' void main () {\ n ' +
' Gl_fragcolor=texture2d (u_sampler,v_textcoord); \ n ' +//
'}\n ';

function Main () {
var Canvas=document.getelementbyid ("WebGL");

var gl=getwebglcontext (canvas);
if (!GL) {
Console.log ("GL load fail!");
Return
}

if (!initshaders (Gl,vshader_source,fshader_source)) {//Initialize shader
Console.log ("Fail init shader ()!");
return;
}


var n=initvertexbuffers (GL);//assign vertex coordinates and texture coordinates
if (n<0) {
Console.log ("Failed to set the positions of the vertices");
Return
}
Gl.clearcolor (0.0, 0.0, 1.0, 1.0);
Inittextures (Gl,n);


}
function Initvertexbuffers (GL) {
var verticestextcoords=new float32array ([
-0.5,0.5,2,-0.3,1.7,
-0.5,-0.5,2,-0.3,-0.2,
0.5,0.5,2,1.7,1.7,
0.5,-0.5,2,1.7,-0.2,
]);//typed array


The number of Var n=4;//points

var vertextexcoordbuffer=gl.createbuffer ();//create buffers in WebGL
if (!vertextexcoordbuffer) {
Console.log ("Failed to create the buffer object!");
return-1;
}

Gl.bindbuffer (GL. Array_buffer,vertextexcoordbuffer)//bind buffer with Array_buffer to specify the purpose of the buffer
Gl.bufferdata (GL. Array_buffer,verticestextcoords,gl. Static_draw);//write data to buffer Static_draw buffer optimization puts vertex and texture coordinates into the buffer

var fsize=verticestextcoords.bytes_per_element;//the byte size of each element in the array
alert (fsize);
Set vertex coordinates to remove coordinates from a buffer
var a_position=gl.getattriblocation (Gl.program, ' a_position ');
Gl.vertexattribpointer (A_POSITION,2,GL. float,false,5*fsize,0);//The data passed in the buffer is assigned to attribute object 2 is the number of components of the fixed point 3*fsize means that the number of bytes separated by the adjacent two vertices can also be understood as the two values per 3*fsize byte are those 0 means it's actually The offset is where it starts.
Gl.enablevertexattribarray (a_position);//Open attribute variable


Assigning texture coordinates to WEBGL
var a_textcoord=gl.getattriblocation (Gl.program, ' A_textcoord ');
Gl.vertexattribpointer (A_TEXTCOORD,2,GL. Float,false,5*fsize,3*fsize);
Gl.enablevertexattribarray (A_textcoord);

Set the size of a point
var a_pointsize=gl.getattriblocation (Gl.program, ' a_pointsize ');
Gl.vertexattribpointer (A_POINTSIZE,1,GL. Float,false,5*fsize,2*fsize);
Gl.enablevertexattribarray (a_pointsize);
return n;
}
function Inittextures (gl,n) {
alert (n);
var texture=gl.createtexture ();//create texture objects to manage textures
if (!texture) {
Console.log ("Failed to texture");
return false;
}
U_sampler is used to store textures.
var u_sampler=gl.getuniformlocation (Gl.program, ' U_sampler ');
if (!u_sampler) {
Console.log ("Failed to U_sampler");
return false;
}
Load picture Create picture object asynchronously loading a picture after the call to the Loadtexture function does not complete before you continue to execute the following code
var image=new image ();

Image.onload=function () {
Loadtexture (gl,n,texture,u_sampler,image);//Pass the image and parameters of the texture unit to the sampler
};
Image.src= "Image/sky.jpg";
return true;
}

function Loadtexture (gl,n,texture,u_sampler,image) {
alert (image.height);
Gl.pixelstorei (GL. unpack_flip_y_webgl,1);//Y-axis inversion of the image
Gl.activetexture (GL. TEXTURE0);//Open unit No. No. 0
Console.log (Gl.activetexture (GL. TEXTURE0));
Gl.bindtexture (GL. texture_2d,texture);//bind a texture object to a texture cell because you cannot manipulate the texture object directly but you can manipulate the texture unit
Gl.texparameteri (GL. Texture_2d,gl. Texture_min_filter,gl. LINEAR);//Configure the parameters of the texture
/* Gl.texparameteri (GL. Texture_2d,gl. Texture_wrap_s,gl. Clamp_to_edge);//Not enough on the x-axis to automatically fill
Gl.texparameteri (GL. Texture_2d,gl. Texture_wrap_t,gl. Mirrored_repeat)///Low gray Auto Tian on y-axis */
Gl.teximage2d (GL. Texture_2d,0,gl. Rgb,gl. Rgb,gl. Unsigned_byte,image);//Configure Texture Images
Gl.uniform1i (u_sampler,0);//Pass the 0-unit texture to the texture sampler

Gl.clear (GL. Color_buffer_bit);
Gl.drawarrays (GL. TRIANGLE_STRIP,0,N);
}
</script>

<body onload= "main ()" >
<canvas id= "WebGL" width= "height=" ></canvas>
</body>

WebGL Learning Note Five