As stated in the WebGL Programming Guide:
Traditional 3D graphics programs are usually developed in languages such as C or C++ and compiled into binary executable files for a particular platform. This means programs cannot run across platforms. In contrast, WebGL programs are made up of HTML and JavaScript that need only be placed on the Web to execute. WebGL is derived from OpenGL ES.
OpenGL is a low-level driver-level graphical interface, but this low-level interface is not called by JavaScript in the browser. When WebGL was introduced in 2010, it allowed engineers to use JavaScript to invoke the partially encapsulated OpenGL ES2.0 standard interface to provide hardware-level 3D graphics acceleration. So GLSL programs actually run on OpenGL drivers.
A, DOM
With that background, here’s how to run shader code on a web page, starting with DOM:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="Width = device - width, initial - scale = 1.0">
<title>webgl</title>
<style>
body {margin: 0; overflow: hidden; }</style>
</head>
<body onload="main()">
<canvas id="album" width="300" height="300">
Please use a browser that supports "canvas"
</canvas>
<script src="./js/lib/webgl-utils.js"></script>
<script src="./js/lib/webgl-debug.js"></script>
<script src="./js/lib/cuon-utils.js"></script>
<script src="./js/lib/cuon-matrix.js"></script>
<script src="./index.js"></script>
</body>
</html>
Copy the codeOk, simple can not be a simple DOM structure, the entire page only needs a
It also references several files from the toolkit provided in the WebGL Programming Guide:
<script src="./js/lib/webgl-utils.js"></script>
<script src="./js/lib/webgl-debug.js"></script>
<script src="./js/lib/cuon-utils.js"></script>
<script src="./js/lib/cuon-matrix.js"></script>
Copy the codeThe following is a list of their respective codes. Their functions are to encapsulate code, compatible versions, provide utility functions, etc., but we will not go into details here:
// webgl-utils.js
WebGLUtils=function(){var o=function(e,n){for(var t=["webgl"."experimental-webgl"."webkit-3d"."moz-webgl"],i=null,o=0; o<t.length; ++o){try{i=e.getContext(t[o],n)}catch(e){}if(i)break}return i};return{create3DContext:o,setupWebGL:function(e,n,t){t=t||function(e){var n=document.getElementsByTagName("body") [0];if(n){var t=window.WebGLRenderingContext?'It doesn\'t appear your computer can support WebGL.<br/><a href="http://get.webgl.org">Click here for more information.</a>':'This page requires a browser that supports WebGL.<br/><a href="http://get.webgl.org">Click here to upgrade your browser.</a>'; e&&(t+="<br/><br/>Status: "+e),n.innerHTML='
'
+t+"</div>"}},e.addEventListener&&e.addEventListener("webglcontextcreationerror".function(e){t(e.statusMessage)},!1);var i=o(e,n);return i||(window.WebGLRenderingContext,t("")),i}}}(),window.requestAnimationFrame||(window.requestAnimationFrame=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(e,n){window.setTimeout(e,1e3/60)}),window.cancelAnimationFrame||(window.cancelAnimationFrame=window.cancelRequestAnimationFrame||window.webkitCancelAnimationFrame||window.webkitCancelRequestAnimationFrame||window.mozCancelAnimationFrame||window.mozCancelRequestAnimationFrame||window.msCancelAnimationFrame||window.msCancelRequestAnimationFrame||window.oCancelAnimationFrame||window.oCancelRequestAnimationFrame||window.clearTimeout);
Copy the code// webgl-debug.js
WebGLDebugUtils=function(){var a={enable: {0:!0},disable: {0:!0},getParameter: {0:!0},drawArrays: {0:!0},drawElements: {0:!0.2:!0},createShader: {0:!0},getShaderParameter: {1:!0},getProgramParameter: {1:!0},getVertexAttrib: {1:!0},vertexAttribPointer: {2:!0},bindTexture: {0:!0},activeTexture: {0:!0},getTexParameter: {0:!0.1:!0},texParameterf: {0:!0.1:!0},texParameteri: {0:!0.1:!0.2:!0},texImage2D: {0:!0.2:!0.6:!0.7:!0},texSubImage2D: {0:!0.6:!0.7:!0},copyTexImage2D: {0:!0.2:!0},copyTexSubImage2D: {0:!0},generateMipmap: {0:!0},bindBuffer: {0:!0},bufferData: {0:!0.2:!0},bufferSubData: {0:!0},getBufferParameter: {0:!0.1:!0},pixelStorei: {0:!0.1:!0},readPixels: {4:!0.5:!0},bindRenderbuffer: {0:!0},bindFramebuffer: {0:!0},checkFramebufferStatus: {0:!0},framebufferRenderbuffer: {0:!0.1:!0.2:!0},framebufferTexture2D: {0:!0.1:!0.2:!0},getFramebufferAttachmentParameter: {0:!0.1:!0.2:!0},getRenderbufferParameter: {0:!0.1:!0},renderbufferStorage: {0:!0.1:!0},clear: {0:!0},depthFunc: {0:!0},blendFunc: {0:!0.1:!0},blendFuncSeparate: {0:!0.1:!0.2:!0.3:!0},blendEquation: {0:!0},blendEquationSeparate: {0:!0.1:!0},stencilFunc: {0:!0},stencilFuncSeparate: {0:!0.1:!0},stencilMaskSeparate: {0:!0},stencilOp: {0:!0.1:!0.2:!0},stencilOpSeparate: {0:!0.1:!0.2:!0.3:!0},cullFace: {0:!0},frontFace: {0:!0}},r=null;function o(e){if(null==r)for(var t in r={},e)"number"= =typeof e[t]&&(r[e[t]]=t)}function n(){if(null==r)throw"WebGLDebugUtils.init(ctx) not called"}function f(e){n();var t=r[e];return void 0! ==t? t:"*UNKNOWN WebGL ENUM (0x"+e.toString(16) +")"}function u(e,t,r){var n=a[e];return void 0! ==n&&n[t]? f(r):r.toString()}function S(e){vart=e.getParameter(e.MAX_VERTEX_ATTRIBS),r=e.createBuffer(); e.bindBuffer(e.ARRAY_BUFFER,r);for(var n=0; n<t; ++n)e.disableVertexAttribArray(n),e.vertexAttribPointer(n,4,e.FLOAT,!1.0.0),e.vertexAttrib1f(n,0); e.deleteBuffer(r);var a=e.getParameter(e.MAX_TEXTURE_IMAGE_UNITS);for(n=0; n<a; ++n)e.activeTexture(e.TEXTURE0+n),e.bindTexture(e.TEXTURE_CUBE_MAP,null),e.bindTexture(e.TEXTURE_2D,null);for(e.activeTexture(e.TEXTURE0),e.useProgram(null),e.bindBuffer(e.ARRAY_BUFFER,null),e.bindBuffer(e.ELEMENT_ARRAY_BUFFER,null),e.bindFramebuffer(e.FRAMEBUFFER,null),e.bindRenderbuffer(e.RENDERBUFFER,null),e.disable(e.BLEND),e.disable(e.CULL_FACE),e.disable(e.DEPTH_TEST),e.disable(e.DITHER),e.disable(e.SCISSOR_TEST),e.blen dColor(0.0.0.0),e.blendEquation(e.FUNC_ADD),e.blendFunc(e.ONE,e.ZERO),e.clearColor(0.0.0.0),e.clearDepth(1),e.clearStencil(- 1),e.colorMask(!0,!0,!0,!0),e.cullFace(e.BACK),e.depthFunc(e.LESS),e.depthMask(!0),e.depthRange(0.1),e.frontFace(e.CCW),e.hint(e.GENERATE_MIPMAP_HINT,e.DONT_CARE),e.lineWidth(1),e.pixelStorei(e.PACK_ALIGNMENT,4),e.pixelStorei(e.UNPACK_ALIGNMENT,4),e.pixelStorei(e.UNPACK_FLIP_Y_WEBGL,!1),e.pixelStorei(e.UNPACK_PREMULTIPLY_ALPHA_WEBGL,!1),e.UNPACK_COLORSPACE_CONVERSION_WEBGL&&e.pixelStorei(e.UNPACK_COLORSPACE_CONVERSION_WEBGL,e.BROWSER_DEFAULT_WEBGL),e.po lygonOffset(0.0),e.sampleCoverage(1,!1),e.scissor(0.0,e.canvas.width,e.canvas.height),e.stencilFunc(e.ALWAYS,0.4294967295),e.stencilMask(4294967295),e.stencilOp(e.KEEP,e.KEEP,e.KEEP),e.viewport(0.0,e.canvas.clientWidth,e.canvas.clientHeight),e.clear(e.COLOR_BUFFER_BIT|e.DEPTH_BUFFER_BIT|e.STENCIL_BUFFER_BIT); e.getError();) ; }return{init:o,mightBeEnum:function(e){return n(),void 0! ==r[e]},glEnumToString:f,glFunctionArgToString:u,makeDebugContext:function(t,a){o(t),a=a||function(e,t,r){for(var n,a="",i=0; i<r.length; ++i)a+=(0==i?"":",")+u(t,i,r[i]); n="WebGL error "+f(e)+" in "+t+"("+a+")".window.console&&window.console.log&&window.console.log(n)};var i={};function e(r,n){return function(){var e=r[n].apply(r,arguments),t=r.getError();return 0! =t&&(i[t]=!0,a(t,n,arguments)),e}}var r={};for(var n in t)"function"= =typeoft[n]? r[n]=e(t,n):r[n]=t[n];return r.getError=function(){for(var e in i)if(i[e])return i[e]=!1,e;return t.NO_ERROR},r},makeLostContextSimulatingContext:function(r){var e={},a=1,n=!1,i=[],t=void 0,o=void 0,f=void 0,u={};function c(e,t){var r=e[t];return function(){if(! n)return function(e){for(var t=0; t<e.length; ++t){var r=e[t];if((n=r)instanceof WebGLBuffer||n instanceof WebGLFramebuffer||n instanceof WebGLProgram||n instanceof WebGLRenderbuffer||n instanceof WebGLShader||n instanceof WebGLTexture)return r.__webglDebugContextLostId__==a}var n;return!0} (arguments)? r.apply(e,arguments) :void(u[e.INVALID_OPERATION]=!0)}}for(var l in r)"function"= =typeofr[l]? e[l]=c(r,l):e[l]=r[l];function b(e){return{statusMessage:e}}e.loseContext=function(){if(! n){for(n=!0,++a; r.getError();) ; !function(){for(var e=Object.keys(u),t=0; t<e.length; ++t)delete glErrorShdow_[e]}(),u[r.CONTEXT_LOST_WEBGL]=!0,setTimeout(function(){t&&t(b("context lost"))},0)}},e.restoreContext=function(){if(n){if(! o)throw"You can not restore the context without a listener"; setTimeout(function(){if(function(){for(var e=0; e<i.length; ++e){vart=i[e]; tinstanceofWebGLBuffer? r.deleteBuffer(t):tinstanceofWebctxFramebuffer? r.deleteFramebuffer(t):tinstanceofWebctxProgram? r.deleteProgram(t):tinstanceofWebctxRenderbuffer? r.deleteRenderbuffer(t):tinstanceofWebctxShader? r.deleteShader(t):tinstanceof WebctxTexture&&r.deleteTexture(t)}}(),S(r),n=!1,o){vare=o; o=f,f=void 0,e(b("context restored"}})),0)}},e.getError=function(){if(! n)for(; e=r.getError();) u[e]=!0;for(var e in u)if(u[e])return delete u[e],e;return r.NO_ERROR};for(var s=["createBuffer"."createFramebuffer"."createProgram"."createRenderbuffer"."createShader"."createTexture"],g=0; g<s.length; ++g)e[A=s[g]]=function(t){return function(){if(n)return null;var e=t.apply(r,arguments);return e.__webglDebugContextLostId__=a,i.push(e),e}}(r[A]);var E=["getActiveAttrib"."getActiveUniform"."getBufferParameter"."getContextAttributes"."getAttachedShaders"."getFramebufferAttachmentParameter"."getParameter"."getProgramParameter"."getProgramInfoLog"."getRenderbufferParameter"."getShaderParameter"."getShaderInfoLog"."getShaderSource"."getTexParameter"."getUniform"."getUniformLocation"."getVertexAttrib"];for(g=0; g<E.length; ++g)e[A=E[g]]=function(e){return function(){return n?null:e.apply(r,arguments)}}(e[A]);var d,m,T,R=["isBuffer"."isEnabled"."isFramebuffer"."isProgram"."isRenderbuffer"."isShader"."isTexture"];for(g=0; g<R.length; ++g){varA; e[A=R[g]]=function(e){return function(){return! n&&e.apply(r,arguments)}}(e[A])}function x(t){return"function"= =typeoft? t:function(e){t.handleEvent(e)}}return e.checkFramebufferStatus=(d=e.checkFramebufferStatus,function(){returnn? r.FRAMEBUFFER_UNSUPPORTED:d.apply(r,arguments)}),e.getAttribLocation=(m=e.getAttribLocation,function(){return n?- 1:m.apply(r,arguments)}),e.getVertexAttribOffset=(T=e.getVertexAttribOffset,function(){return n?0:T.apply(r,arguments)}),e.isContextLost=function(){return n},e.registerOnContextLostListener=function(e){t=x(e)},e.registerOnContextRestoredListener=function(e){n? f=x(e):o=x(e)},e},resetToInitialState:S}}();
Copy the code// cuon-utils.js
function initShaders(e,r,a){var t=createProgram(e,r,a);returnt? (e.useProgram(t),e.program=t,!0) : (console.log("Failed to create program"),!1)}function createProgram(e,r,a){var t=loadShader(e,e.VERTEX_SHADER,r),o=loadShader(e,e.FRAGMENT_SHADER,a);if(! t||! o)return null;var l=e.createProgram();if(! l)return null;if(e.attachShader(l,t),e.attachShader(l,o),e.linkProgram(l),! e.getProgramParameter(l,e.LINK_STATUS)){var n=e.getProgramInfoLog(l);return console.log("Failed to link program: "+n),e.deleteProgram(l),e.deleteShader(o),e.deleteShader(t),null}return l}function loadShader(e,r,a){var t=e.createShader(r);if(null==t)return console.log("unable to create shader"),null;if(e.shaderSource(t,a),e.compileShader(t),! e.getShaderParameter(t,e.COMPILE_STATUS)){var o=e.getShaderInfoLog(t);return console.log("Failed to compile shader: "+o),e.deleteShader(t),null}return t}function getWebGLContext(e,r){var a=WebGLUtils.setupWebGL(e);returna? ((arguments.length<2||r)&&(a=WebGLDebugUtils.makeDebugContext(a)),a):null}
Copy the code// cuon-matrix.js
var Matrix4=function(t){var e,r,n;if(t&&"object"= =typeof t&&t.hasOwnProperty("elements")) {for(r=t.elements,n=new Float32Array(16),e=0; e<16; ++e)n[e]=r[e];this.elements=n}else this.elements=new Float32Array([1.0.0.0.0.1.0.0.0.0.1.0.0.0.0.1])}; Matrix4.prototype.setIdentity=function(){var t=this.elements;return t[0] =1,t[4] =0,t[8] =0,t[12] =0,t[1] =0,t[5] =1,t[9] =0,t[13] =0,t[2] =0,t[6] =0,t[10] =1,t[14] =0,t[3] =0,t[7] =0,t[11] =0,t[15] =1.this},Matrix4.prototype.set=function(t){var e,r,n;if((r=t.elements)! ==(n=this.elements)){for(e=0; e<16; ++e)n[e]=r[e];return this}},Matrix4.prototype.concat=function(t){var e,r,n,o,i,s,a,u;if(r=this.elements,n=this.elements,r===(o=t.elements))for(o=new Float32Array(16),e=0; e<16; ++e)o[e]=r[e];for(e=0; e<4; e++)i=n[e],s=n[e+4],a=n[e+8],u=n[e+12],r[e]=i*o[0]+s*o[1]+a*o[2]+u*o[3],r[e+4]=i*o[4]+s*o[5]+a*o[6]+u*o[7],r[e+8]=i*o[8]+s*o[9]+a*o[10]+u*o[11],r[e+12]=i*o[12]+s*o[13]+a*o[14]+u*o[15];return this},Matrix4.prototype.multiply=Matrix4.prototype.concat,Matrix4.prototype.multiplyVector3=function(t){var e=this.elements,r=t.elements,n=new Vector3,o=n.elements;return o[0]=r[0]*e[0]+r[1]*e[4]+r[2]*e[8]+e[12],o[1]=r[0]*e[1]+r[1]*e[5]+r[2]*e[9]+e[13],o[2]=r[0]*e[2]+r[1]*e[6]+r[2]*e[10]+e[14],n},Matrix4.prototype.multiplyVector4=function(t){var e=this.elements,r=t.elements,n=new Vector4,o=n.elements;return o[0]=r[0]*e[0]+r[1]*e[4]+r[2]*e[8]+r[3]*e[12],o[1]=r[0]*e[1]+r[1]*e[5]+r[2]*e[9]+r[3]*e[13],o[2]=r[0]*e[2]+r[1]*e[6]+r[2]*e[10]+r[3]*e[14],o[3]=r[0]*e[3]+r[1]*e[7]+r[2]*e[11]+r[3]*e[15],n},Matrix4.prototype.transpose=function(){var t,e;return e=(t=this.elements)[1],t[1]=t[4],t[4]=e,e=t[2],t[2]=t[8],t[8]=e,e=t[3],t[3]=t[12],t[12]=e,e=t[6],t[6]=t[9],t[9]=e,e=t[7],t[7]=t[13],t[13]=e,e=t[11],t[11]=t[14],t[14]=e,this},Matrix4.prototype.setInverseOf=function(t){var e,r,n,o,i;if(r=t.elements,n=this.elements,(o=new Float32Array(16))0]=r[5]*r[10]*r[15]-r[5]*r[11]*r[14]-r[9]*r[6]*r[15]+r[9]*r[7]*r[14]+r[13]*r[6]*r[11]-r[13]*r[7]*r[10],o[4]=-r[4]*r[10]*r[15]+r[4]*r[11]*r[14]+r[8]*r[6]*r[15]-r[8]*r[7]*r[14]-r[12]*r[6]*r[11]+r[12]*r[7]*r[10],o[8]=r[4]*r[9]*r[15]-r[4]*r[11]*r[13]-r[8]*r[5]*r[15]+r[8]*r[7]*r[13]+r[12]*r[5]*r[11]-r[12]*r[7]*r[9],o[12]=-r[4]*r[9]*r[14]+r[4]*r[10]*r[13]+r[8]*r[5]*r[14]-r[8]*r[6]*r[13]-r[12]*r[5]*r[10]+r[12]*r[6]*r[9],o[1]=-r[1]*r[10]*r[15]+r[1]*r[11]*r[14]+r[9]*r[2]*r[15]-r[9]*r[3]*r[14]-r[13]*r[2]*r[11]+r[13]*r[3]*r[10],o[5]=r[0]*r[10]*r[15]-r[0]*r[11]*r[14]-r[8]*r[2]*r[15]+r[8]*r[3]*r[14]+r[12]*r[2]*r[11]-r[12]*r[3]*r[10],o[9]=-r[0]*r[9]*r[15]+r[0]*r[11]*r[13]+r[8]*r[1]*r[15]-r[8]*r[3]*r[13]-r[12]*r[1]*r[11]+r[12]*r[3]*r[9],o[13]=r[0]*r[9]*r[14]-r[0]*r[10]*r[13]-r[8]*r[1]*r[14]+r[8]*r[2]*r[13]+r[12]*r[1]*r[10]-r[12]*r[2]*r[9],o[2]=r[1]*r[6]*r[15]-r[1]*r[7]*r[14]-r[5]*r[2]*r[15]+r[5]*r[3]*r[14]+r[13]*r[2]*r[7]-r[13]*r[3]*r[6],o[6]=-r[0]*r[6]*r[15]+r[0]*r[7]*r[14]+r[4]*r[2]*r[15]-r[4]*r[3]*r[14]-r[12]*r[2]*r[7]+r[12]*r[3]*r[6],o[10]=r[0]*r[5]*r[15]-r[0]*r[7]*r[13]-r[4]*r[1]*r[15]+r[4]*r[3]*r[13]+r[12]*r[1]*r[7]-r[12]*r[3]*r[5],o[14]=-r[0]*r[5]*r[14]+r[0]*r[6]*r[13]+r[4]*r[1]*r[14]-r[4]*r[2]*r[13]-r[12]*r[1]*r[6]+r[12]*r[2]*r[5],o[3]=-r[1]*r[6]*r[11]+r[1]*r[7]*r[10]+r[5]*r[2]*r[11]-r[5]*r[3]*r[10]-r[9]*r[2]*r[7]+r[9]*r[3]*r[6],o[7]=r[0]*r[6]*r[11]-r[0]*r[7]*r[10]-r[4]*r[2]*r[11]+r[4]*r[3]*r[10]+r[8]*r[2]*r[7]-r[8]*r[3]*r[6],o[11]=-r[0]*r[5]*r[11]+r[0]*r[7]*r[9]+r[4]*r[1]*r[11]-r[4]*r[3]*r[9]-r[8]*r[1]*r[7]+r[8]*r[3]*r[5],o[15]=r[0]*r[5]*r[10]-r[0]*r[6]*r[9]-r[4]*r[1]*r[10]+r[4]*r[2]*r[9]+r[8]*r[1]*r[6]-r[8]*r[2]*r[5].0===(i=r[0]*o[0]+r[1]*o[4]+r[2]*o[8]+r[3]*o[12]))return this;for(i=1/i,e=0; e<16; e++)n[e]=o[e]*i;return this},Matrix4.prototype.invert=function(){return this.setInverseOf(this)},Matrix4.prototype.setOrtho=function(t,e,r,n,o,i){var s,a,u,h;if(t===e||r===n||o===i)throw"null frustum";return a=1/(e-t),u=1/(n-r),h=1/(i-o),(s=this.elements)[0] =2*a,s[1] =0,s[2] =0,s[3] =0,s[4] =0,s[5] =2*u,s[6] =0,s[7] =0,s[8] =0,s[9] =0,s[10] =2 -*h,s[11] =0,s[12]=-(e+t)*a,s[13]=-(n+r)*u,s[14]=-(i+o)*h,s[15] =1.this},Matrix4.prototype.ortho=function(t,e,r,n,o,i){return this.concat((new Matrix4).setOrtho(t,e,r,n,o,i))},Matrix4.prototype.setFrustum=function(t,e,r,n,o,i){var s,a,u,h;if(t===e||n===r||o===i)throw"null frustum";if(o<=0)throw"near <= 0";if(i<=0)throw"far <= 0";return a=1/(e-t),u=1/(n-r),h=1/(i-o),(s=this.elements)[0] =2*o*a,s[1] =0,s[2] =0,s[3] =0,s[4] =0,s[5] =2*o*u,s[6] =0,s[7] =0,s[8]=(e+t)*a,s[9]=(n+r)*u,s[10]=-(i+o)*h,s[11] =- 1,s[12] =0,s[13] =0,s[14] =2 -*o*i*h,s[15] =0.this},Matrix4.prototype.frustum=function(t,e,r,n,o,i){return this.concat((new Matrix4).setFrustum(t,e,r,n,o,i))},Matrix4.prototype.setPerspective=function(t,e,r,n){var o,i,s,a;if(r===n||0===e)throw"null frustum";if(r<=0)throw"near <= 0";if(n<=0)throw"far <= 0";if(t=Math.PI*t/180/2.0===(s=Math.sin(t)))throw"null frustum";return i=1/(n-r),a=Math.cos(t)/s,(o=this.elements)[0]=a/e,o[1] =0,o[2] =0,o[3] =0,o[4] =0,o[5]=a,o[6] =0,o[7] =0,o[8] =0,o[9] =0,o[10]=-(n+r)*i,o[11] =- 1,o[12] =0,o[13] =0,o[14] =2 -*r*n*i,o[15] =0.this},Matrix4.prototype.perspective=function(t,e,r,n){return this.concat((new Matrix4).setPerspective(t,e,r,n))},Matrix4.prototype.setScale=function(t,e,r){var n=this.elements;return n[0]=t,n[4] =0,n[8] =0,n[12] =0,n[1] =0,n[5]=e,n[9] =0,n[13] =0,n[2] =0,n[6] =0,n[10]=r,n[14] =0,n[3] =0,n[7] =0,n[11] =0,n[15] =1.this},Matrix4.prototype.scale=function(t,e,r){var n=this.elements;return n[0]*=t,n[4]*=e,n[8]*=r,n[1]*=t,n[5]*=e,n[9]*=r,n[2]*=t,n[6]*=e,n[10]*=r,n[3]*=t,n[7]*=e,n[11]*=r,this},Matrix4.prototype.setTranslate=function(t,e,r){var n=this.elements;return n[0] =1,n[4] =0,n[8] =0,n[12]=t,n[1] =0,n[5] =1,n[9] =0,n[13]=e,n[2] =0,n[6] =0,n[10] =1,n[14]=r,n[3] =0,n[7] =0,n[11] =0,n[15] =1.this},Matrix4.prototype.translate=function(t,e,r){var n=this.elements;return n[12]+=n[0]*t+n[4]*e+n[8]*r,n[13]+=n[1]*t+n[5]*e+n[9]*r,n[14]+=n[2]*t+n[6]*e+n[10]*r,n[15]+=n[3]*t+n[7]*e+n[11]*r,this},Matrix4.prototype.setRotate=function(t,e,r,n){var o,i,s,a,u,h,p,c,l,f,m,M;return t=Math.PI*t/180,o=this.elements,i=Math.sin(t),s=Math.cos(t),0! ==e&&0===r&&0===n? (e<0&&(i=-i),o[0] =1,o[4] =0,o[8] =0,o[12] =0,o[1] =0,o[5]=s,o[9]=-i,o[13] =0,o[2] =0,o[6]=i,o[10]=s,o[14] =0,o[3] =0,o[7] =0,o[11] =0) :0===e&&0! ==r&&0===n? (r<0&&(i=-i),o[0]=s,o[4] =0,o[8]=i,o[12] =0,o[1] =0,o[5] =1,o[9] =0,o[13] =0,o[2]=-i,o[6] =0,o[10]=s,o[14] =0,o[3] =0,o[7] =0,o[11] =0) :0===e&&0===r&&0! ==n? (n<0&&(i=-i),o[0]=s,o[4]=-i,o[8] =0,o[12] =0,o[1]=i,o[5]=s,o[9] =0,o[13] =0,o[2] =0,o[6] =0,o[10] =1,o[14] =0,o[3] =0,o[7] =0,o[11] =0) : (1! ==(a=Math.sqrt(e*e+r*r+n*n))&&(e*=u=1/a,r*=u,n*=u),h=1-s,p=e*r,c=r*n,l=n*e,f=e*i,m=r*i,M=n*i,o[0]=e*e*h+s,o[1]=p*h+M,o[2]=l*h-m,o[3] =0,o[4]=p*h-M,o[5]=r*r*h+s,o[6]=c*h+f,o[7] =0,o[8]=l*h+m,o[9]=c*h-f,o[10]=n*n*h+s,o[11] =0,o[12] =0,o[13] =0,o[14] =0),o[15] =1.this},Matrix4.prototype.rotate=function(t,e,r,n){return this.concat((new Matrix4).setRotate(t,e,r,n))},Matrix4.prototype.setLookAt=function(t,e,r,n,o,i,s,a,u){var h,p,c,l,f,m,M,y,x,v,w,A;return p=n-t,c=o-e,l=i-r,m=(c*=f=1/Math.sqrt(p*p+c*c+l*l))*u-(l*=f)*a,M=l*s-(p*=f)*u,y=p*a-c*s,v=(M*=x=1/Math.sqrt(m*m+M*M+y*y))*l-(y*=x)*c,w=y*p-(m*=x)*l,A=m*c-M*p,(h=this.elements)[0]=m,h[1]=v,h[2]=-p,h[3] =0,h[4]=M,h[5]=w,h[6]=-c,h[7] =0,h[8]=y,h[9]=A,h[10]=-l,h[11] =0,h[12] =0,h[13] =0,h[14] =0,h[15] =1.this.translate(-t,-e,-r)},Matrix4.prototype.lookAt=function(t,e,r,n,o,i,s,a,u){return this.concat((new Matrix4).setLookAt(t,e,r,n,o,i,s,a,u))},Matrix4.prototype.dropShadow=function(t,e){var r=new Matrix4,n=r.elements,o=t[0]*e[0]+t[1]*e[1]+t[2]*e[2]+t[3]*e[3];return n[0]=o-e[0]*t[0],n[1]=-e[1]*t[0],n[2]=-e[2]*t[0],n[3]=-e[3]*t[0],n[4]=-e[0]*t[1],n[5]=o-e[1]*t[1],n[6]=-e[2]*t[1],n[7]=-e[3]*t[1],n[8]=-e[0]*t[2],n[9]=-e[1]*t[2],n[10]=o-e[2]*t[2],n[11]=-e[3]*t[2],n[12]=-e[0]*t[3],n[13]=-e[1]*t[3],n[14]=-e[2]*t[3],n[15]=o-e[3]*t[3].this.concat(r)},Matrix4.prototype.dropShadowDirectionally=function(t,e,r,n,o,i,s,a,u){var h=n*t+o*e+i*r;return this.dropShadow([t,e,r,-h],[s,a,u,0])};var Vector3=function(t){var e=new Float32Array(3); t&&"object"= =typeof t&&(e[0]=t[0],e[1]=t[1],e[2]=t[2]),this.elements=e}; Vector3.prototype.normalize=function(){var t=this.elements,e=t[0],r=t[1],n=t[2],o=Math.sqrt(e*e+r*r+n*n);return o?1==o||(o=1/o,t[0]=e*o,t[1]=r*o,t[2]=n*o):(t[0] =0,t[1] =0,t[2] =0),this};var Vector4=function(t){var e=new Float32Array(4); t&&"object"= =typeof t&&(e[0]=t[0],e[1]=t[1],e[2]=t[2],e[3]=t[3]),this.elements=e};
Copy the code
Second, JavaScript,
Next is to write JS, yes is that fast.
// index.js
// Vertex shader code
var VSHADER_SOURCE =` attribute vec4 a_Position; varying vec2 uv; Void main() {gl_Position = vec4(vec2(a_Position), 0.0, 1.0); Uv = vec2 (0.5, 0.5) * (vec2 (a_Position) + vec2 (1.0, 1.0)); } `
// Chip shader code
var FSHADER_SOURCE =` precision mediump float; varying vec2 uv; void main() { gl_FragColor = vec4(0.,0.,0.,1.); } `;
function main() {
var canvas = document.getElementById('album');
// Set the width and height according to the actual situation
canvas.width = 375;
canvas.height = 667;
// Get the WebGL context (getWebGLContext is the default of the tool library introduced earlier)
var gl = getWebGLContext(canvas);
if(! gl) {console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize the shader (initShaders are functions defined by the tool library, passing in context, vertex/fragment shader code)
if(! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Failed to intialize shaders.');
return;
}
// Set vertex data (initVertexBuffers function see below)
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the vertex information');
return;
}
// Empty the canvas
gl.clearColor(0.0.0.0.0.0.1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw vertices (three points make a rectangle, four points can draw two triangles, form a rectangle, which is our canvas)
gl.drawArrays(gl.TRIANGLE_FAN, 0.4);
}
// Initialize the vertex buffer
function initVertexBuffers(gl) {
// Vertex coordinates (four points of the canvas)
var verticesTexCoords = new Float32Array([
1.0.1.0.1.0.1.0.1.0.1.0.1.0.1.0
]);
// Number of vertices (4 points determine a rectangle)
var n = 4;
// Create a vertex buffer
var vertexTexCoordBuffer = gl.createBuffer();
if(! vertexTexCoordBuffer) {console.log('Failed to create the buffer object');
return - 1;
}
// Bind buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
// Get the size of each element of the array
var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
// Get the location of a_Position and set the buffer
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return - 1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 2.0);
gl.enableVertexAttribArray(a_Position);
return n;
}
Copy the codeWith this code in hand, we can add our effects by modifying the slice shader code.
By modifying the slice shader code (changing the color to red), you actually see a change after refreshing. What if we wanted to animate?
Very simply, we add a variable about time to the fragment shader code:
var FSHADER_SOURCE =`
precision mediump float;
varying vec2 uv;
uniform float time; // Change time
void main() {
gl_FragColor = vec4(0..0..0..1.);
}
`;
Copy the codeThen add the following code at the end of the main() function:
var t = 0;
var time = gl.getUniformLocation(gl.program, 'time');
if (time < 0) {
console.log('Failed to get the storage location of time');
return- 1; } gl.uniform1f(time, .0); render(gl, time, t);Copy the codeAdd a render function to index.js:
function render(gl, time, t) {
t += 0.01;
gl.uniform1f(time, t); // Each render passes the latest time into the fragment shader
// The canvas needs to be emptied each time
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0.4);
requestAnimationFrame(render.bind(this, gl, time, t));
}
Copy the codeAfter adding it, let’s modify the slice shader (introducing a time change) to see if it works:
var FSHADER_SOURCE =`
precision mediump float;
varying vec2 uv;
uniform float time; // Change time
void main() {
float r = uv.x;
float g = uv.y;
float b = abs(sin(time));
gl_FragColor = vec4(r,g,b,1.);
}
`;
Copy the codePhotoshop: Gradient to GIF is a disaster:
Load the material
Of course we can’t work with pixels all the time, video or images can be processed on canvas in the form of textures. Here’s how to display the texture on the canvas. Start by simply preloading the tile resources we want:
function main() {
var canvas = document.getElementById('album');
// Set the width and height according to the actual situation
canvas.width = 375;
canvas.height = 667;
// Preload the texture resources here
var imgList = [];
preload(imgList, [
'./images/img1.jpg'.'./images/img2.jpg'].function() {
// Start initializing WebGL after loading is complete
// Get the WebGL context
var gl = getWebGLContext(canvas);
if(! gl) {console.log('Failed to get the rendering context for WebGL');
return;
}
// ...})}// Images are preloaded
function preload(imgList, arrayOfImages, callback) {
var sum = arrayOfImages.length;
var count = 0;
arrayOfImages.forEach(function(value){
var image = new Image()
image.src = value;
image.onload = function() {
imgList.push(image)
if (++count == sum) {
callback && callback()
}
}
})
}
Copy the codeThe next step is to initialize the material content and add the WebGL code we wrote earlier to the bottom of the resource preloaded callback:
function main() {
var canvas = document.getElementById('album');
// Set the width and height according to the actual situation
canvas.width = 375;
canvas.height = 667;
// Preload the map resources here.
var imgList = [];
preload(imgList, [
'./images/img8.jpg'.'./images/img9.jpg'].function() {
// ...
// Draw vertices (save this step for later)
// gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
// Add a material initialization function
if(! initTextures(gl, imgList)) {console.log('Failed to intialize the texture.');
return;
}
var t = 0;
var time = gl.getUniformLocation(gl.program, 'time');
if (time < 0) {
console.log('Failed to get the storage location of time');
return - 1;
}
gl.uniform1f(time, . 0); render(gl, time, t); })}// Initialize the material
function initTextures(gl, imgList) {
// There are two images, so create two materials
var texture0 = gl.createTexture();
var texture1 = gl.createTexture();
if(! texture0 && ! texture1) {console.log('Failed to create the texture object');
return false;
}
var u_Sampler0 = gl.getUniformLocation(gl.program, 'u_Sampler0');
if(! u_Sampler0) {console.log('Failed to get the storage location of u_Sampler0');
return false;
}
var u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1');
if(! u_Sampler1) {console.log('Failed to get the storage location of u_Sampler1');
return false;
}
// Load our material and initialize it (functions are defined below)
loadTexture(gl, texture0, u_Sampler0, imgList[0].0);
loadTexture(gl, texture1, u_Sampler1, imgList[1].1);
return true;
}
// Load the material
function loadTexture(gl, texture, u_Sampler, image, index) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
gl.activeTexture(gl['TEXTURE'+index])
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.uniform1i(u_Sampler, index);
return true;
}
Copy the codeIf you execute the code at this time, you will find an error, because we have added two new variables u_Sampler0 and u_Sampler1 to hold the two texture images, so we need to add:
// Chip shader code
var FSHADER_SOURCE =`
precision mediump float;
varying vec2 uv;
uniform float time; // Change time
uniform sampler2D u_Sampler0;
uniform sampler2D u_Sampler1;
void main() {
// Use the built-in mix() function to interpolate linear gradients for both images
vec4 color = mix(texture2D(u_Sampler0, uv), texture2D(u_Sampler1, uv), abs(sin(time)));
gl_FragColor = vec4(color);
}
`;
Copy the code
In fact, this is the general transition effect, we can also use some built-in functions to do more transitions:
// Chip shader code
var FSHADER_SOURCE =`
precision mediump float;
varying vec2 uv;
uniform float time; // Change time
uniform sampler2D u_Sampler0;
uniform sampler2D u_Sampler1;
void main() {
// Use the built-in mix() function to interpolate linear gradients for both images
vec4 color = mix(texture2D(u_Sampler0, uv), texture2D(u_Sampler1, uv), abs(sin(time)));
gl_FragColor = vec4(color);
}
`;
Copy the code
Here’s another complicated one:
// Chip shader code
var FSHADER_SOURCE =`
precision mediump float;
varying vec2 uv;
uniform float time; // Change time
uniform sampler2D u_Sampler0;
uniform sampler2D u_Sampler1;
void main() {
float m = smoothstep(0.5.0., uv.x - abs(sin(time))*1.5);
gl_FragColor = mix(texture2D(u_Sampler0, (uv - 0.5) * (1.0 - m) + 0.5), texture2D(u_Sampler1, (uv - 0.5) * m + 0.5), m);
}
`;
Copy the code
Let’s do another scaled one:
// Chip shader code
var FSHADER_SOURCE =`
precision mediump float;
varying vec2 uv;
uniform float time; // Change time
uniform sampler2D u_Sampler0;
uniform sampler2D u_Sampler1;
void main() {
st -= . 5;
st *= 1.-smoothstep(0..1..abs(sin(time)));
st += . 5;
vec4 color = mix(texture2D(u_Sampler0, st), texture2D(u_Sampler1, uv), abs(sin(time)));
}
`;
Copy the code
Here is the complete indexJS code:
// Vertex shader code
var VSHADER_SOURCE =` attribute vec4 a_Position; varying vec2 uv; Void main() {gl_Position = vec4(vec2(a_Position), 0.0, 1.0); Uv = vec2 (0.5, 0.5) * (vec2 (a_Position) + vec2 (1.0, 1.0)); } `
// Chip shader code
var FSHADER_SOURCE =` precision mediump float; varying vec2 uv; uniform float time; Uniform sampler2D u_Sampler0; uniform sampler2D u_Sampler1; Void main() {float m = smoothstep(-0.5, 0., uv.x - abs(sin(time))*1.5); Gl_FragColor = mix(texture2D(u_Sampler0, (UV-0.5) * (1.0-m) + 0.5), texture2D(u_Sampler1, (UV-0.5) * m + 0.5), texture2D(u_Sampler1, (UV-0.5) * m + 0.5), m); } `;
function main() {
var canvas = document.getElementById('album');
// Set the width and height according to the actual situation
canvas.width = 375;
canvas.height = 667;
// Preload the texture resources here
var imgList = [];
preload(imgList, [
'./images/img8.jpg'.'./images/img9.jpg'].function() {
// Get the WebGL context (getWebGLContext is the default of the tool library introduced earlier)
var gl = getWebGLContext(canvas);
if(! gl) {console.log('Failed to get the rendering context for WebGL');
return;
}
// Initialize the shader (initShaders are functions defined by the tool library, passing in context, vertex/fragment shader code)
if(! initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {console.log('Failed to intialize shaders.');
return;
}
// Set vertex data (initVertexBuffers function see below)
var n = initVertexBuffers(gl);
if (n < 0) {
console.log('Failed to set the vertex information');
return;
}
// Empty the canvas
gl.clearColor(0.0.0.0.0.0.1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
// Draw vertices
// gl.drawArrays(gl.TRIANGLE_FAN, 0, 4);
// Set the texture
if(! initTextures(gl, imgList)) {console.log('Failed to intialize the texture.');
return;
}
var t = 0;
var time = gl.getUniformLocation(gl.program, 'time');
if (time < 0) {
console.log('Failed to get the storage location of time');
return - 1;
}
gl.uniform1f(time, . 0); render(gl, time, t); })}// Initialize the vertex buffer
function initVertexBuffers(gl) {
// Vertex coordinates
var verticesTexCoords = new Float32Array([
1.0.1.0.1.0.1.0.1.0.1.0.1.0.1.0
]);
// Number of vertices
var n = 4;
// Create a vertex buffer
var vertexTexCoordBuffer = gl.createBuffer();
if(! vertexTexCoordBuffer) {console.log('Failed to create the buffer object');
return - 1;
}
// Bind buffer
gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW);
// Get the size of each element of the array
var FSIZE = verticesTexCoords.BYTES_PER_ELEMENT;
// Get the location of a_Position and set the buffer
var a_Position = gl.getAttribLocation(gl.program, 'a_Position');
if (a_Position < 0) {
console.log('Failed to get the storage location of a_Position');
return - 1;
}
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 2.0);
gl.enableVertexAttribArray(a_Position);
return n;
}
function render(gl, time, t) {
t += 0.01;
gl.uniform1f(time, t);
// The canvas needs to be emptied each time
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLE_FAN, 0.4);
requestAnimationFrame(render.bind(this, gl, time, t));
}
// Images are preloaded
function preload(imgList, arrayOfImages, callback) {
var sum = arrayOfImages.length;
var count = 0;
arrayOfImages.forEach(function(value){
var image = new Image()
image.src = value;
image.onload = function() {
imgList.push(image)
if (++count == sum) {
callback && callback()
}
}
})
}
// Initialize the material
function initTextures(gl, imgList) {
var texture0 = gl.createTexture();
var texture1 = gl.createTexture();
if(! texture0 && ! texture1) {console.log('Failed to create the texture object');
return false;
}
var u_Sampler0 = gl.getUniformLocation(gl.program, 'u_Sampler0');
if(! u_Sampler0) {console.log('Failed to get the storage location of u_Sampler0');
return false;
}
var u_Sampler1 = gl.getUniformLocation(gl.program, 'u_Sampler1');
if(! u_Sampler1) {console.log('Failed to get the storage location of u_Sampler1');
return false;
}
loadTexture(gl, texture0, u_Sampler0, imgList[0].0);
loadTexture(gl, texture1, u_Sampler1, imgList[1].1);
return true;
}
// Load the material
function loadTexture(gl, texture, u_Sampler, image, index) {
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
gl.activeTexture(gl['TEXTURE'+index])
gl.bindTexture(gl.TEXTURE_2D, texture)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
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.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
gl.uniform1i(u_Sampler, index);
return true;
}
Copy the code