webgl-Four bis

The first few times in the graphic graphics interior is filled with a solid color, but there are many good pictures in reality, we do not need a little bit of painting, this chapter is the picture in the form of texture loaded into the pieces, the main process is as follows, the first is to define the coordinates of the point attribute variable used in JavaScript to assign values, Next, the variable defining the VEC2 of the varying is used to pass texture coordinates from the vertex shader to the slice shader in the slice shader to define the sampler to store the texture image and related parameters around, next is to assign a value to each variable, the assignment method with the previous, first create buffer, bind matrix, write data, Gets the variable storage address, and then writes the buffer data, finally activates the variable, thus assigns the vertex coordinates and the texture coordinates the value, finally is the sampler assigns the value sampler is uniform first creates the texture object, obtains the sampler address, obtains the image object, sets the image Y axis inversion, Because the texture object cannot be manipulated directly, assign a texture to a single member, activate the unit, bind the texture object to the texture unit, configure the texture parameters, configure the texture image, assign the last sampler, and then draw the graphic.

Next is 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 grey automatic 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-Four bis