UNPKG

vue-phenomenon

Version:

Vue component wrapping a Phenomenon renderer.

2 lines 5.67 kB
(("undefined"!==typeof self?self:this)["webpackJsonpvue_phenomenon"]=("undefined"!==typeof self?self:this)["webpackJsonpvue_phenomenon"]||[]).push([[1],{cf56:function(t,e,i){"use strict";i.r(e);var r=["x","y","z"],s=function(t){Object.assign(this,{uniforms:{},geometry:{vertices:[{x:0,y:0,z:0}]},mode:0,modifiers:{},attributes:[],multiplier:1,buffers:[]}),Object.assign(this,t),this.prepareProgram(),this.prepareUniforms(),this.prepareAttributes()};s.prototype.compileShader=function(t,e){var i=this.gl.createShader(t);return this.gl.shaderSource(i,e),this.gl.compileShader(i),i},s.prototype.prepareProgram=function(){var t=this.gl,e=this.vertex,i=this.fragment,r=t.createProgram();t.attachShader(r,this.compileShader(35633,e)),t.attachShader(r,this.compileShader(35632,i)),t.linkProgram(r),t.useProgram(r),this.program=r},s.prototype.prepareUniforms=function(){for(var t=Object.keys(this.uniforms),e=0;e<t.length;e+=1){var i=this.gl.getUniformLocation(this.program,t[e]);this.uniforms[t[e]].location=i}},s.prototype.prepareAttributes=function(){void 0!==this.geometry.vertices&&this.attributes.push({name:"aPosition",size:3}),void 0!==this.geometry.normal&&this.attributes.push({name:"aNormal",size:3}),this.attributeKeys=[];for(var t=0;t<this.attributes.length;t+=1)this.attributeKeys.push(this.attributes[t].name),this.prepareAttribute(this.attributes[t])},s.prototype.prepareAttribute=function(t){for(var e=this.geometry,i=this.multiplier,s=e.vertices,n=e.normal,o=new Float32Array(i*s.length*t.size),a=0;a<i;a+=1)for(var h=t.data&&t.data(a,i),u=a*s.length*t.size,f=0;f<s.length;f+=1)for(var c=0;c<t.size;c+=1){var l=this.modifiers[t.name];o[u]=void 0!==l?l(h,f,c,this):"aPosition"===t.name?s[f][r[c]]:"aNormal"===t.name?n[f][r[c]]:h[c],u+=1}this.attributes[this.attributeKeys.indexOf(t.name)].data=o,this.prepareBuffer(this.attributes[this.attributeKeys.indexOf(t.name)])},s.prototype.prepareBuffer=function(t){var e=t.data,i=t.name,r=t.size,s=this.gl.createBuffer();this.gl.bindBuffer(34962,s),this.gl.bufferData(34962,e,35044);var n=this.gl.getAttribLocation(this.program,i);this.gl.enableVertexAttribArray(n),this.gl.vertexAttribPointer(n,r,5126,!1,0,0),this.buffers[this.attributeKeys.indexOf(t.name)]={buffer:s,location:n,size:r}},s.prototype.render=function(t){var e=this,i=this.uniforms,r=this.multiplier,s=this.gl;s.useProgram(this.program);for(var n=0;n<this.buffers.length;n+=1){var o=this.buffers[n],a=o.location,h=o.buffer,u=o.size;s.enableVertexAttribArray(a),s.bindBuffer(34962,h),s.vertexAttribPointer(a,u,5126,!1,0,0)}Object.keys(t).forEach((function(e){i[e].value=t[e].value})),Object.keys(i).forEach((function(t){var r=i[t];e.uniformMap[r.type](r.location,r.value)})),s.drawArrays(this.mode,0,r*this.geometry.vertices.length),this.onRender&&this.onRender(this)},s.prototype.destroy=function(){for(var t=0;t<this.buffers.length;t+=1)this.gl.deleteBuffer(this.buffers[t].buffer);this.gl.deleteProgram(this.program),this.gl=null};var n=function(t){var e=this,i=t||{},r=i.canvas;void 0===r&&(r=document.querySelector("canvas"));var s=i.context;void 0===s&&(s={});var n=i.contextType;void 0===n&&(n="experimental-webgl");var o=i.settings;void 0===o&&(o={});var a=r.getContext(n,Object.assign({alpha:!1,antialias:!1},s));Object.assign(this,{gl:a,canvas:r,uniforms:{},instances:new Map,shouldRender:!0}),Object.assign(this,{devicePixelRatio:1,clearColor:[1,1,1,1],position:{x:0,y:0,z:2},clip:[.001,100]}),Object.assign(this,o),this.uniformMap={float:function(t,e){return a.uniform1f(t,e)},vec2:function(t,e){return a.uniform2fv(t,e)},vec3:function(t,e){return a.uniform3fv(t,e)},vec4:function(t,e){return a.uniform4fv(t,e)},mat2:function(t,e){return a.uniformMatrix2fv(t,!1,e)},mat3:function(t,e){return a.uniformMatrix3fv(t,!1,e)},mat4:function(t,e){return a.uniformMatrix4fv(t,!1,e)}},a.enable(a.DEPTH_TEST),a.depthFunc(a.LEQUAL),!1===a.getContextAttributes().alpha&&(a.clearColor.apply(a,this.clearColor),a.clearDepth(1)),this.onSetup&&this.onSetup(a),window.addEventListener("resize",(function(){return e.resize()})),this.resize(),this.render()};n.prototype.resize=function(){var t=this.gl,e=this.canvas,i=this.devicePixelRatio,r=this.position;e.width=e.clientWidth*i,e.height=e.clientHeight*i;var s=t.drawingBufferWidth,n=t.drawingBufferHeight,o=s/n;t.viewport(0,0,s,n);var a=Math.tan(Math.PI/180*22.5),h=[1,0,0,0,0,1,0,0,0,0,1,0,r.x,r.y,(o<1?1:o)*-r.z,1];this.uniforms.uProjectionMatrix={type:"mat4",value:[.5/a,0,0,0,0,o/a*.5,0,0,0,0,-(this.clip[1]+this.clip[0])/(this.clip[1]-this.clip[0]),-1,0,0,-2*this.clip[1]*(this.clip[0]/(this.clip[1]-this.clip[0])),0]},this.uniforms.uViewMatrix={type:"mat4",value:[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1]},this.uniforms.uModelMatrix={type:"mat4",value:h}},n.prototype.toggle=function(t){t!==this.shouldRender&&(this.shouldRender=void 0!==t?t:!this.shouldRender,this.shouldRender&&this.render())},n.prototype.render=function(){var t=this;this.gl.clear(16640),this.instances.forEach((function(e){e.render(t.uniforms)})),this.onRender&&this.onRender(this),this.shouldRender&&requestAnimationFrame((function(){return t.render()}))},n.prototype.add=function(t,e){void 0===e&&(e={uniforms:{}}),void 0===e.uniforms&&(e.uniforms={}),Object.assign(e.uniforms,JSON.parse(JSON.stringify(this.uniforms))),Object.assign(e,{gl:this.gl,uniformMap:this.uniformMap});var i=new s(e);return this.instances.set(t,i),i},n.prototype.remove=function(t){var e=this.instances.get(t);void 0!==e&&(e.destroy(),this.instances.delete(t))},n.prototype.destroy=function(){var t=this;this.instances.forEach((function(e,i){e.destroy(),t.instances.delete(i)})),this.toggle(!1)},e["default"]=n}}]); //# sourceMappingURL=vue-phenomenon.umd.min.1.js.map