varVshader_source =[ "Attribute Vec4 a_position;", "Uniform mat4 U_projmatrix;", "Uniform float u_pointsize;", "Void Main () {", "gl_pointsize = u_pointsize;", "Gl_position = U_projmatrix * a_position;", "}"].join ("\ n")varFshader_source =[ "Precision Mediump float;", "Uniform sampler2d u_sampler;", "Void Main () {",
"Gl_fragcolor = Texture2d (U_SAMPLER,VEC2 (GL_POINTCOORD.X,1.0-GL_POINTCOORD.Y));","}"].join ("\ n")functionMain () {varCanvas = document.getElementById (' WebGL '); varGL =getwebglcontext (canvas); if(!GL) {Console.log (' Failed to get the rendering context for WebGL '); return; } if(!initshaders (GL, Vshader_source, Fshader_source)) {Console.log (' Failed to intialize shaders. '); return; } varprojmatrix4=NewMatrix4 (); Projmatrix4.setortho (-1,1,-1,1,0.0,1.0); varU_projmatrix=gl.getuniformlocation (Gl.program, ' U_projmatrix ')); GL.UNIFORMMATRIX4FV (U_projmatrix,false, projmatrix4.elements); varPosition=gl.getattriblocation (Gl.program, ' a_position ')); gl.vertexattrib3f (Position,0.0,0.0,0.0); Gl.clearcolor (0, 0, 0, 1); Gl.clear (GL. Color_buffer_bit); LOADIMG (GL);}functionloadimg (GL) {varImage=NewImage (); Image.onload=function() {drawpic (gl,image)} image.src= "Pic.png";}functionDrawpic (gl,image) {varWidth=Image.width; varheight=Image.height; varPointsize=gl.getuniformlocation (Gl.program, "U_pointsize"); gl.uniform1f (Pointsize,math.max (width,height)); varTexture=gl.createtexture (); //Gl.pixelstorei (GL. unpack_flip_y_webgl,1);Gl.activetexture (GL. TEXTURE0); Gl.bindtexture (GL. Texture_2d,texture); Gl.texparameteri (GL. Texture_2d,gl. Texture_mag_filter,gl. NEAREST); Gl.texparameteri (GL. Texture_2d,gl. Texture_min_filter,gl. NEAREST); Gl.texparameteri (GL. Texture_2d,gl. Texture_wrap_s,gl. Clamp_to_edge); Gl.texparameteri (GL. Texture_2d,gl. Texture_wrap_t,gl. Clamp_to_edge); Gl.uniform1i (Gl.getuniformlocation (Gl.program,"U_sampler"), 0); Gl.teximage2d (GL. texture_2d,0, GL. Rgba,gl. Rgba,gl. Unsigned_byte,image); Gl.clear (GL. Color_buffer_bit); Gl.drawarrays (GL. POINTS,0,1); Gl.bindtexture (GL. texture_2d,NULL);}
Add a picture on a point of WEBGL (using texture on points)