DOCTYPE html html xmlns http www w3 org 1999 xhtml lang en head title WebGL texture example title meta charset utf 8 head body canvas id canvas width 640 height 480 Your browser doesn t appear to support the HTML5 b canvas b element canvas canvas id texture style width 256px height 256px script var jsonmodelsquare desc simple quad made up of two triangles verts 0 5 0 5 0 0 0 5 0 5 0 0 0 5 0 5 0 0 0 5 0 5 0 0 0 5 0 5 0 0 0 5 0 5 0 0 texCoords 0 0 1 0 1 0 1 0 1 0 0 0 0 0 1 0 1 0 0 0 0 0 0 0 script script var gl var program var canvas document getElementById canvas gl canvas getContext webgl gl clearColor 0 0 1 0 0 0 1 0 enable transparency gl enable gl DEPTH TEST gl depthFunc gl LEQUAL gl depthMask false gl enable gl BLEND gl blendFunc gl SRC ALPHA gl ONE MINUS SRC ALPHA var vssrc attribute vec3 position attribute vec2 coord varying vec2 texCoord void main void gl Position vec4 position 1 0 texCoord coord var fssrc precision mediump float uniform sampler2D texture0 varying vec2 texCoord void main void gl FragColor texture2D texture0 texCoord gl FragColor vec4 1 0 1 0 1 0 1 0 shaders var vs gl createShader gl VERTEX SHADER gl shaderSource vs vssrc gl compileShader vs if gl getShaderParameter vs gl COMPILE STATUS alert gl getShaderInfoLog vs var fs gl createShader gl FRAGMENT SHADER gl shaderSource fs fssrc gl compileShader fs if gl getShaderParameter fs gl COMPILE STATUS alert gl getShaderInfoLog fs program gl createProgram gl attachShader program vs gl attachShader program fs gl linkProgram program if gl getProgramParameter program gl LINK STATUS alert gl getProgramInfoLog program gl useProgram program setup the vertex coord data var buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER buffer gl bufferData gl ARRAY BUFFER new Float32Array jsonmodelsquare verts gl STATIC DRAW var position gl getAttribLocation program position gl vertexAttribPointer position 3 gl FLOAT false 0 0 gl enableVertexAttribArray position var tbuffer gl createBuffer gl bindBuffer gl ARRAY BUFFER tbuffer gl bufferData gl ARRAY BUFFER new Float32Array jsonmodelsquare texCoords gl STATIC DRAW var texCoord gl getAttribLocation program coord gl vertexAttribPointer texCoord 2 gl FLOAT false 0 0 gl enableVertexAttribArray texCoord var texture0 gl getUniformLocation program texture0 gl uniform1i texture0 0 load the texture but you can only draw it once it has been loaded hence the draw is in the onload which is called when the data and texture data is setup const level 0 const internalFormat gl RGBA const width 1 const height 1 const border 0 const srcFormat gl RGBA const srcType gl UNSIGNED BYTE var texture gl createTexture gl activeTexture gl TEXTURE0 const image new Image image src https notebook xbdev net var images food jpg image onload function gl bindTexture gl TEXTURE 2D texture gl texImage2D gl TEXTURE 2D level internalFormat srcFormat srcType image 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 texParameteri gl TEXTURE 2D gl TEXTURE MIN FILTER gl LINEAR gl generateMipmap gl TEXTURE 2D draw gl clear gl COLOR BUFFER BIT gl DEPTH BUFFER BIT gl drawArrays gl TRIANGLES 0 jsonmodelsquare verts length 3 onload script body html
ram if gl getProgramParameter program gl LINK STATUS alert gl getProgramInfoLog program gl useProgram program setup the vertex coord data var buffer gl createBuffer gl bindBuffer gl ARRAY BUFFER buffer gl bufferData gl ARRAY BUFFER new Float32Array jsonmodelsquare verts gl STATIC DRAW var position gl getAttribLocation program position gl vertexAttribPointer position 3 gl FLOAT false 0 0 gl enableVertexAttribArray position var tbuffer gl createBuffer gl bindBuffer gl ARRAY BUFFER tbuffer gl bufferData gl ARRAY BUFFER new Float32Array jsonmodelsquare texCoords gl STATIC DRAW var texCoord gl getAttribLocation program coord gl vertexAttribPointer texCoord 2 gl FLOAT false 0 0 gl enableVertexAttribArray texCoord var texture0 gl getUniformLocation program texture0 gl uniform1i texture0 0 load the texture but you can only draw it once it has been loaded hence the draw is in the onload which is called when the data and texture data is setup const level 0 const internalFormat gl RGBA const width 1 const height 1 const border 0 const srcFormat gl RGBA const srcType gl UNSIGNED BYTE var texture gl createTexture gl activeTexture gl TEXTURE0 const image new Image image src https notebook xbdev net var images food jpg image onload function gl bindTexture gl TEXTURE 2D texture gl texImage2D gl TEXTURE 2D level internalFormat srcFormat srcType image 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 texParameteri gl TEXTURE 2D gl TEXTURE MIN FILTER gl LINEAR gl generateMipmap gl TEXTURE 2D draw gl clear gl COLOR BUFFER BIT gl DEPTH BUFFER BIT gl drawArrays gl TRIANGLES 0 jsonmodelsquare verts length 3 onload script body html