tinyjs-plugin-mesh/index.js

The Tiny.js plugin of mesh

/*!
 * Name: tinyjs-plugin-mesh
 * Description: The Tiny.js plugin of mesh
 * Author: yiiqii
 * Version: v1.3.1
 */
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t.Tiny=t.Tiny||{},t.Tiny.mesh={}))}(this,function(t){"use strict";var e=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},r=function(){function t(t,e){for(var r=0;r<e.length;r++){var i=e[r];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}return function(e,r,i){return r&&t(e.prototype,r),i&&t(e,i),e}}(),i=function t(e,r,i){null===e&&(e=Function.prototype);var n=Object.getOwnPropertyDescriptor(e,r);if(void 0===n){var s=Object.getPrototypeOf(e);return null===s?void 0:t(s,r,i)}if("value"in n)return n.value;var a=n.get;return void 0!==a?a.call(i):void 0},n=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},s=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},a=new Tiny.Point,o=new Tiny.Polygon,h=function(t){function h(t,r,i,n,a){e(this,h);var o=s(this,(h.__proto__||Object.getPrototypeOf(h)).call(this));return o._texture=t||Tiny.Texture.EMPTY,o.uvs=i||new Float32Array([0,0,1,0,1,1,0,1]),o.vertices=r||new Float32Array([0,0,100,0,100,100,0,100]),o.indices=n||new Uint16Array([0,1,3,2]),o.dirty=0,o.indexDirty=0,o.vertexDirty=0,o.autoUpdate=!0,o.blendMode=Tiny.BLEND_MODES.NORMAL,o.canvasPadding=h.defaults.canvasPadding,o.drawMode=a||h.DRAW_MODES.TRIANGLE_MESH,o.shader=null,o.tintRgb=new Float32Array([1,1,1]),o._glDatas={},o._uvTransform=new Tiny.TextureTransform(o._texture),o.uploadUvTransform=!1,o.pluginName="mesh",o._canvasDrawTimes=1,o}return n(h,t),r(h,[{key:"_renderWebGL",value:function(t){this.refresh(),t.setObjectRenderer(t.plugins[this.pluginName]),t.plugins[this.pluginName].render(this)}},{key:"_renderCanvas",value:function(t){this.refresh(),t.plugins[this.pluginName].render(this)}},{key:"_onTextureUpdate",value:function(){this._uvTransform.texture=this._texture,this.refresh()}},{key:"multiplyUvs",value:function(){this.uploadUvTransform||this._uvTransform.multiplyUvs(this.uvs)}},{key:"refresh",value:function(t){this.autoUpdate&&this.vertexDirty++,this._uvTransform.update(t)&&this._refresh()}},{key:"_refresh",value:function(){}},{key:"_calculateBounds",value:function(){this._bounds.addVertices(this.transform,this.vertices,0,this.vertices.length)}},{key:"containsPoint",value:function(t){if(!this.getBounds().contains(t.x,t.y))return!1;this.worldTransform.applyInverse(t,a);for(var e=this.vertices,r=o.points,i=this.indices,n=this.indices.length,s=this.drawMode===h.DRAW_MODES.TRIANGLES?3:1,u=0;u+2<n;u+=s){var d=2*i[u],l=2*i[u+1],f=2*i[u+2];if(r[0]=e[d],r[1]=e[d+1],r[2]=e[l],r[3]=e[l+1],r[4]=e[f],r[5]=e[f+1],o.contains(a.x,a.y))return!0}return!1}},{key:"destroy",value:function(t){for(var e in this._glDatas){var r=this._glDatas[e];r.destroy?r.destroy():(r.vertexBuffer&&(r.vertexBuffer.destroy(),r.vertexBuffer=null),r.indexBuffer&&(r.indexBuffer.destroy(),r.indexBuffer=null),r.uvBuffer&&(r.uvBuffer.destroy(),r.uvBuffer=null),r.vao&&(r.vao.destroy(),r.vao=null))}this._glDatas=null,i(h.prototype.__proto__||Object.getPrototypeOf(h.prototype),"destroy",this).call(this,t)}},{key:"texture",get:function(){return this._texture},set:function(t){this._texture!==t&&(this._texture=t,t&&(t.baseTexture.hasLoaded?this._onTextureUpdate():t.once("update",this._onTextureUpdate,this)))}},{key:"tint",get:function(){return Tiny.rgb2hex(this.tintRgb)},set:function(t){this.tintRgb=Tiny.hex2rgb(t,this.tintRgb)}},{key:"canvasDrawTimes",get:function(){return this._canvasDrawTimes||1},set:function(t){this._canvasDrawTimes=t>10?10:(t<0?1:0|t)||1}}]),h}(Tiny.Container);h.DRAW_MODES={TRIANGLE_MESH:0,TRIANGLES:1},h.defaults={canvasPadding:0};var u=Tiny.glCore,d=Tiny.Matrix.IDENTITY,l=function(t){function i(t){e(this,i);var r=s(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return r.shader=null,r}return n(i,t),r(i,[{key:"onContextChange",value:function(){var t=this.renderer.gl;this.shader=new Tiny.Shader(t,"attribute vec2 aVertexPosition;\nattribute vec2 aTextureCoord;\n\nuniform mat3 projectionMatrix;\nuniform mat3 translationMatrix;\nuniform mat3 uTransform;\n\nvarying vec2 vTextureCoord;\n\nvoid main(void) {\n    gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0);\n\n    vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy;\n}","varying vec2 vTextureCoord;\nuniform vec4 uColor;\n\nuniform sampler2D uSampler;\n\nvoid main(void) {\n    gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor;\n}")}},{key:"render",value:function(t){var e=this.renderer,r=e.gl,i=t._texture;if(i.valid){var n=t._glDatas[e.CONTEXT_UID];n||(e.bindVao(null),(n={shader:this.shader,vertexBuffer:u.GLBuffer.createVertexBuffer(r,t.vertices,r.STREAM_DRAW),uvBuffer:u.GLBuffer.createVertexBuffer(r,t.uvs,r.STREAM_DRAW),indexBuffer:u.GLBuffer.createIndexBuffer(r,t.indices,r.STATIC_DRAW),vao:null,dirty:t.dirty,indexDirty:t.indexDirty,vertexDirty:t.vertexDirty}).vao=new u.VertexArrayObject(r).addIndex(n.indexBuffer).addAttribute(n.vertexBuffer,n.shader.attributes.aVertexPosition,r.FLOAT,!1,8,0).addAttribute(n.uvBuffer,n.shader.attributes.aTextureCoord,r.FLOAT,!1,8,0),t._glDatas[e.CONTEXT_UID]=n),e.bindVao(n.vao),t.dirty!==n.dirty&&(n.dirty=t.dirty,n.uvBuffer.upload(t.uvs)),t.indexDirty!==n.indexDirty&&(n.indexDirty=t.indexDirty,n.indexBuffer.upload(t.indices)),t.vertexDirty!==n.vertexDirty&&(n.vertexDirty=t.vertexDirty,n.vertexBuffer.upload(t.vertices)),e.bindShader(n.shader),n.shader.uniforms.uSampler=e.bindTexture(i),e.state.setBlendMode(Tiny.correctBlendMode(t.blendMode,i.baseTexture.premultipliedAlpha)),n.shader.uniforms.uTransform&&(t.uploadUvTransform?n.shader.uniforms.uTransform=t._uvTransform.mapCoord.toArray(!0):n.shader.uniforms.uTransform=d.toArray(!0)),n.shader.uniforms.translationMatrix=t.worldTransform.toArray(!0),n.shader.uniforms.uColor=Tiny.premultiplyRgba(t.tintRgb,t.worldAlpha,n.shader.uniforms.uColor,i.baseTexture.premultipliedAlpha);var s=t.drawMode===h.DRAW_MODES.TRIANGLE_MESH?r.TRIANGLE_STRIP:r.TRIANGLES;n.vao.draw(s,t.indices.length,0)}}}]),i}(Tiny.ObjectRenderer);Tiny.WebGLRenderer.registerPlugin("mesh",l);var f=function(){function t(r){e(this,t),this.renderer=r}return r(t,[{key:"render",value:function(t){var e=this.renderer,r=e.context,i=t.worldTransform,n=e.resolution;e.roundPixels?r.setTransform(i.a*n,i.b*n,i.c*n,i.d*n,i.tx*n|0,i.ty*n|0):r.setTransform(i.a*n,i.b*n,i.c*n,i.d*n,i.tx*n,i.ty*n),e.context.globalAlpha=t.worldAlpha,e.setBlendMode(t.blendMode),t.drawMode===h.DRAW_MODES.TRIANGLE_MESH?this._renderTriangleMesh(t):this._renderTriangles(t)}},{key:"_renderTriangleMesh",value:function(t){for(var e=t.vertices.length/2,r=0;r<e-2;r++){var i=2*r;this._renderDrawTriangle(t,i,i+2,i+4)}}},{key:"_renderTriangles",value:function(t){for(var e=t.indices,r=e.length,i=0;i<r;i+=3){var n=2*e[i],s=2*e[i+1],a=2*e[i+2];this._renderDrawTriangle(t,n,s,a)}}},{key:"_renderDrawTriangle",value:function(t,e,r,i){var n=this.renderer.context,s=t.uvs,a=t.vertices,o=t._texture;if(o.valid){var h=o.baseTexture,u=h.width,d=h.height,l=h.source,f=void 0,v=void 0,c=void 0,_=void 0,y=void 0,g=void 0;if(t.uploadUvTransform){var p=t._uvTransform.mapCoord;f=(s[e]*p.a+s[e+1]*p.c+p.tx)*h.width,v=(s[r]*p.a+s[r+1]*p.c+p.tx)*h.width,c=(s[i]*p.a+s[i+1]*p.c+p.tx)*h.width,_=(s[e]*p.b+s[e+1]*p.d+p.ty)*h.height,y=(s[r]*p.b+s[r+1]*p.d+p.ty)*h.height,g=(s[i]*p.b+s[i+1]*p.d+p.ty)*h.height}else f=s[e]*h.width,v=s[r]*h.width,c=s[i]*h.width,_=s[e+1]*h.height,y=s[r+1]*h.height,g=s[i+1]*h.height;var T=a[e],x=a[r],m=a[i],w=a[e+1],b=a[r+1],A=a[i+1],D=t.canvasPadding/this.renderer.resolution;if(D>0){var M=D/Math.abs(t.worldTransform.a),O=D/Math.abs(t.worldTransform.d),P=(T+x+m)/3,k=(w+b+A)/3,R=T-P,B=w-k,E=Math.sqrt(R*R+B*B);T=P+R/E*(E+M),w=k+B/E*(E+O),B=b-k,x=P+(R=x-P)/(E=Math.sqrt(R*R+B*B))*(E+M),b=k+B/E*(E+O),B=A-k,m=P+(R=m-P)/(E=Math.sqrt(R*R+B*B))*(E+M),A=k+B/E*(E+O)}n.save(),n.beginPath(),n.moveTo(T,w),n.lineTo(x,b),n.lineTo(m,A),n.closePath(),n.clip();var U=f*y+_*c+v*g-y*c-_*v-f*g,W=T*y+_*m+x*g-y*m-_*x-T*g,C=f*x+T*c+v*m-x*c-T*v-f*m,S=f*y*m+_*x*c+T*v*g-T*y*c-_*v*m-f*x*g,H=w*y+_*A+b*g-y*A-_*b-w*g,I=f*b+w*c+v*A-b*c-w*v-f*A,j=f*y*A+_*b*c+w*v*g-w*y*c-_*v*A-f*b*g;n.transform(W/U,H/U,C/U,I/U,S/U,j/U),window.navigator.isAppXCanvasPlus&&"IMAGE"===l.tagName&&(l=window.navigator.canUseBinding?l.$realImage:l.src);for(var N=t.canvasDrawTimes;N>0;N--)n.drawImage(l,0,0,u*h.resolution,d*h.resolution,0,0,u,d);n.restore(),this.renderer.invalidateBlendMode()}}},{key:"renderMeshFlat",value:function(t){var e=this.renderer.context,r=t.vertices,i=r.length/2;e.beginPath();for(var n=1;n<i-2;++n){var s=2*n,a=r[s],o=r[s+1],h=r[s+2],u=r[s+3],d=r[s+4],l=r[s+5];e.moveTo(a,o),e.lineTo(h,u),e.lineTo(d,l)}e.fillStyle="#FF0000",e.fill(),e.closePath()}},{key:"destroy",value:function(){this.renderer=null}}]),t}();Tiny.CanvasRenderer.registerPlugin("mesh",f);var v=function(t){function i(t,r,n){e(this,i);var a=s(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return a._ready=!0,a.verticesX=r||10,a.verticesY=n||10,a.drawMode=h.DRAW_MODES.TRIANGLES,a.refresh(),a}return n(i,h),r(i,[{key:"_refresh",value:function(){for(var t=this._texture,e=this.verticesX*this.verticesY,r=[],i=[],n=[],s=this.verticesX-1,a=this.verticesY-1,o=t.width/s,h=t.height/a,u=0;u<e;u++){var d=u%this.verticesX,l=u/this.verticesX|0;r.push(d*o,l*h),i.push(d/s,l/a)}for(var f=s*a,v=0;v<f;v++){var c=v%s,_=v/s|0,y=_*this.verticesX+c,g=_*this.verticesX+c+1,p=(_+1)*this.verticesX+c,T=(_+1)*this.verticesX+c+1;n.push(y,g,p),n.push(g,T,p)}this.vertices=new Float32Array(r),this.uvs=new Float32Array(i),this.colors=new Float32Array([]),this.indices=new Uint16Array(n),this.dirty++,this.indexDirty++,this.multiplyUvs()}},{key:"_onTextureUpdate",value:function(){h.prototype._onTextureUpdate.call(this),this._ready&&this.refresh()}}]),i}(),c=10,_=function(t){function a(t,r,i,n,o){e(this,a);var h=s(this,(a.__proto__||Object.getPrototypeOf(a)).call(this,t,4,4));return h._origWidth=t.orig.width,h._origHeight=t.orig.height,h._width=h._origWidth,h._height=h._origHeight,h._leftWidth=void 0!==r?r:c,h._rightWidth=void 0!==n?n:c,h._topHeight=void 0!==i?i:c,h._bottomHeight=void 0!==o?o:c,h._cachedTint=16777215,h._tintedTexture=null,h._canvasUvs=null,h.refresh(!0),h}return n(a,v),r(a,[{key:"updateHorizontalVertices",value:function(){var t=this.vertices,e=this._topHeight+this._bottomHeight,r=this._height>e?1:this._height/e;t[9]=t[11]=t[13]=t[15]=this._topHeight*r,t[17]=t[19]=t[21]=t[23]=this._height-this._bottomHeight*r,t[25]=t[27]=t[29]=t[31]=this._height}},{key:"updateVerticalVertices",value:function(){var t=this.vertices,e=this._leftWidth+this._rightWidth,r=this._width>e?1:this._width/e;t[2]=t[10]=t[18]=t[26]=this._leftWidth*r,t[4]=t[12]=t[20]=t[28]=this._width-this._rightWidth*r,t[6]=t[14]=t[22]=t[30]=this._width}},{key:"_renderCanvas",value:function(t){var e=t.context,r=this.worldTransform,i=t.resolution,n=16777215!==this.tint,s=this._texture;n&&this._cachedTint!==this.tint&&(this._cachedTint=this.tint,this._tintedTexture=Tiny.CanvasTinter.getTintedTexture(this,this.tint));var a=n?this._tintedTexture:s.baseTexture.source;window.navigator.isAppXCanvasPlus&&"IMAGE"===a.tagName&&(a=window.navigator.canUseBinding?a.$realImage:a.src),this._canvasUvs||(this._canvasUvs=[0,0,0,0,0,0,0,0]);var o=this.vertices,h=this._canvasUvs,u=n?0:s.frame.x,d=n?0:s.frame.y,l=u+s.frame.width,f=d+s.frame.height;h[0]=u,h[1]=u+this._leftWidth,h[2]=l-this._rightWidth,h[3]=l,h[4]=d,h[5]=d+this._topHeight,h[6]=f-this._bottomHeight,h[7]=f;for(var v=0;v<8;v++)h[v]*=s.baseTexture.resolution;e.globalAlpha=this.worldAlpha,t.setBlendMode(this.blendMode),t.roundPixels?e.setTransform(r.a*i,r.b*i,r.c*i,r.d*i,r.tx*i|0,r.ty*i|0):e.setTransform(r.a*i,r.b*i,r.c*i,r.d*i,r.tx*i,r.ty*i);for(var c=0;c<3;c++)for(var _=0;_<3;_++){var y=2*_+8*c,g=Math.max(1,h[_+1]-h[_]),p=Math.max(1,h[c+5]-h[c+4]),T=Math.max(1,o[y+10]-o[y]),x=Math.max(1,o[y+11]-o[y+1]);e.drawImage(a,h[_],h[c+4],g,p,o[y],o[y+1],T,x)}}},{key:"_refresh",value:function(){i(a.prototype.__proto__||Object.getPrototypeOf(a.prototype),"_refresh",this).call(this);var t=this.uvs,e=this._texture;this._origWidth=e.orig.width,this._origHeight=e.orig.height;var r=1/this._origWidth,n=1/this._origHeight;t[0]=t[8]=t[16]=t[24]=0,t[1]=t[3]=t[5]=t[7]=0,t[6]=t[14]=t[22]=t[30]=1,t[25]=t[27]=t[29]=t[31]=1,t[2]=t[10]=t[18]=t[26]=r*this._leftWidth,t[4]=t[12]=t[20]=t[28]=1-r*this._rightWidth,t[9]=t[11]=t[13]=t[15]=n*this._topHeight,t[17]=t[19]=t[21]=t[23]=1-n*this._bottomHeight,this.updateHorizontalVertices(),this.updateVerticalVertices(),this.dirty++,this.multiplyUvs()}},{key:"width",get:function(){return this._width},set:function(t){this._width=t,this._refresh()}},{key:"height",get:function(){return this._height},set:function(t){this._height=t,this._refresh()}},{key:"leftWidth",get:function(){return this._leftWidth},set:function(t){this._leftWidth=t,this._refresh()}},{key:"rightWidth",get:function(){return this._rightWidth},set:function(t){this._rightWidth=t,this._refresh()}},{key:"topHeight",get:function(){return this._topHeight},set:function(t){this._topHeight=t,this._refresh()}},{key:"bottomHeight",get:function(){return this._bottomHeight},set:function(t){this._bottomHeight=t,this._refresh()}}]),a}(),y=function(t){function i(t,r){e(this,i);var n=s(this,(i.__proto__||Object.getPrototypeOf(i)).call(this,t));return n.points=r,n.vertices=new Float32Array(4*r.length),n.uvs=new Float32Array(4*r.length),n.colors=new Float32Array(2*r.length),n.indices=new Uint16Array(2*r.length),n.autoUpdate=!0,n.refresh(),n}return n(i,h),r(i,[{key:"_refresh",value:function(){var t=this.points;if(!(t.length<1)&&this._texture._uvs){this.vertices.length/4!==t.length&&(this.vertices=new Float32Array(4*t.length),this.uvs=new Float32Array(4*t.length),this.colors=new Float32Array(2*t.length),this.indices=new Uint16Array(2*t.length));var e=this.uvs,r=this.indices,i=this.colors;e[0]=0,e[1]=0,e[2]=0,e[3]=1,i[0]=1,i[1]=1,r[0]=0,r[1]=1;for(var n=t.length,s=1;s<n;s++){var a=4*s,o=s/(n-1);e[a]=o,e[a+1]=0,e[a+2]=o,e[a+3]=1,i[a=2*s]=1,i[a+1]=1,r[a=2*s]=a,r[a+1]=a+1}this.dirty++,this.indexDirty++,this.multiplyUvs(),this.refreshVertices()}}},{key:"refreshVertices",value:function(){var t=this.points;if(!(t.length<1))for(var e=t[0],r=void 0,i=0,n=0,s=this.vertices,a=t.length,o=0;o<a;o++){var h=t[o],u=4*o;n=-((r=o<t.length-1?t[o+1]:h).x-e.x),i=r.y-e.y;var d=Math.sqrt(i*i+n*n),l=this._texture.height/2;i/=d,n/=d,i*=l,n*=l,s[u]=h.x+i,s[u+1]=h.y+n,s[u+2]=h.x-i,s[u+3]=h.y-n,e=h}}},{key:"updateTransform",value:function(){this.autoUpdate&&this.refreshVertices(),this.containerUpdateTransform()}}]),i}();t.Mesh=h,t.MeshRenderer=l,t.CanvasMeshRenderer=f,t.Plane=v,t.NineSlicePlane=_,t.Rope=y,Object.defineProperty(t,"__esModule",{value:!0})});