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