From 763c37faaaeb4704f2b54341d54bfbfa7a2f5877 Mon Sep 17 00:00:00 2001 From: jjandxa Date: Sat, 15 Apr 2017 17:03:36 +0800 Subject: [PATCH] add in canvas_lines and canvas_sphere to background animation. --- _config.yml | 19 ++++++++++++++++++- layout/_scripts/vendors.swig | 10 ++++++++++ source/css/_variables/base.styl | 2 +- source/lib/three/canvas_lines.min.js | 20 ++++++++++++++++++++ source/lib/three/canvas_sphere.min.js | 20 ++++++++++++++++++++ 5 files changed, 69 insertions(+), 2 deletions(-) create mode 100644 source/lib/three/canvas_lines.min.js create mode 100644 source/lib/three/canvas_sphere.min.js diff --git a/_config.yml b/_config.yml index 8a6534991..6f481857f 100755 --- a/_config.yml +++ b/_config.yml @@ -479,9 +479,15 @@ fancybox: true # Canvas-nest canvas_nest: false -#three_waves +# three_waves three_waves: false +# canvas_lines +canvas_lines: false + +# canvas_sphere +canvas_sphere: false + # Only fit scheme Pisces # Canvas-ribbon canvas_ribbon: false @@ -539,8 +545,19 @@ vendors: # three three: + + # three_waves + # https://github.com/jjandxa/three_waves three_waves: + # three_waves + # https://github.com/jjandxa/canvas_lines + canvas_lines: + + # three_waves + # https://github.com/jjandxa/canvas_sphere + canvas_sphere: + # Internal version: 1.0.0 # https://github.com/zproo/canvas-ribbon canvas_ribbon: diff --git a/layout/_scripts/vendors.swig b/layout/_scripts/vendors.swig index 37dd67604..d59da72ad 100644 --- a/layout/_scripts/vendors.swig +++ b/layout/_scripts/vendors.swig @@ -25,6 +25,16 @@ {% set js_vendors.three_waves = 'three/three-waves.min.js' %} {% endif %} +{% if theme.canvas_lines %} + {% set js_vendors.three = 'three/three.min.js' %} + {% set js_vendors.canvas_lines = 'three/canvas_lines.min.js' %} +{% endif %} + +{% if theme.canvas_sphere %} + {% set js_vendors.three = 'three/three.min.js' %} + {% set js_vendors.canvas_sphere = 'three/canvas_sphere.min.js' %} +{% endif %} + {% if theme.canvas_ribbon and theme.scheme === 'Pisces'%} {% set js_vendors.canvas_ribbon = 'canvas-ribbon/canvas-ribbon.js' %} {% endif %} diff --git a/source/css/_variables/base.styl b/source/css/_variables/base.styl index e1912e2b5..5da804b17 100644 --- a/source/css/_variables/base.styl +++ b/source/css/_variables/base.styl @@ -215,7 +215,7 @@ $headband-bg = $black-deep // Variables for header section elements. // -------------------------------------------------- -$head-bg = white +$head-bg = transparent // Site Meta $site-meta-text-align = center diff --git a/source/lib/three/canvas_lines.min.js b/source/lib/three/canvas_lines.min.js new file mode 100644 index 000000000..676b9f618 --- /dev/null +++ b/source/lib/three/canvas_lines.min.js @@ -0,0 +1,20 @@ +$(function(){var mouseX=0,mouseY=0,windowHalfX=window.innerWidth/2,windowHalfY=window.innerHeight/2,SEPARATION=200,AMOUNTX=10,AMOUNTY=10,camera,scene,renderer;init();animate();function init(){var container,separation=100,amountX=50,amountY=50,particles,particle;container=document.createElement("div");container.style.position="fixed";container.style.top="0px";container.style.left="0px";container.style.zIndex="-1";container.style.opacity="0.5";document.body.appendChild(container);camera=new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,1,10000);camera.position.z=100;scene=new THREE.Scene();renderer=new THREE.CanvasRenderer();renderer.setClearColor(16119801,0);renderer.setPixelRatio(window.devicePixelRatio);renderer.setSize(window.innerWidth,window.innerHeight);container.appendChild(renderer.domElement);var PI2=Math.PI*2;var material=new THREE.SpriteCanvasMaterial({color:10263708,program:function(context){context.beginPath();context.arc(0,0,0.5,0,PI2,true);context.fill()}});var geometry=new THREE.Geometry();for(var i=0;i<100;i++){particle=new THREE.Sprite(material);particle.position.x=Math.random()*2-1;particle.position.y=Math.random()*2-1;particle.position.z=Math.random()*2-1;particle.position.normalize();particle.position.multiplyScalar(Math.random()*10+450);particle.scale.x=particle.scale.y=10;scene.add(particle);geometry.vertices.push(particle.position)}var line=new THREE.Line(geometry,new THREE.LineBasicMaterial({color:10263708,opacity:0.5}));scene.add(line);document.addEventListener("mousemove",onDocumentMouseMove,false);document.addEventListener("touchstart",onDocumentTouchStart,false);document.addEventListener("touchmove",onDocumentTouchMove,false);window.addEventListener("resize",onWindowResize,false)}function onWindowResize(){windowHalfX=window.innerWidth/2;windowHalfY=window.innerHeight/2;camera.aspect=window.innerWidth/window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth,window.innerHeight)}function onDocumentMouseMove(event){mouseX=event.clientX-windowHalfX; +mouseY=event.clientY-windowHalfY}function onDocumentTouchStart(event){if(event.touches.length>1){mouseX=event.touches[0].pageX-windowHalfX}}function onDocumentTouchMove(event){if(event.touches.length==1){mouseX=event.touches[0].pageX-windowHalfX}}function animate(){requestAnimationFrame(animate);render()}function render(){camera.position.x+=(mouseX-camera.position.x)*0.05;camera.position.y+=(-mouseY+200-camera.position.y)*0.05;camera.lookAt(scene.position);renderer.render(scene,camera)}}); +THREE.RenderableObject=function(){this.id=0;this.object=null;this.z=0;this.renderOrder=0};THREE.RenderableFace=function(){this.id=0;this.v1=new THREE.RenderableVertex();this.v2=new THREE.RenderableVertex();this.v3=new THREE.RenderableVertex();this.normalModel=new THREE.Vector3();this.vertexNormalsModel=[new THREE.Vector3(),new THREE.Vector3(),new THREE.Vector3()];this.vertexNormalsLength=0;this.color=new THREE.Color();this.material=null;this.uvs=[new THREE.Vector2(),new THREE.Vector2(),new THREE.Vector2()];this.z=0;this.renderOrder=0};THREE.RenderableVertex=function(){this.position=new THREE.Vector3();this.positionWorld=new THREE.Vector3();this.positionScreen=new THREE.Vector4();this.visible=true};THREE.RenderableVertex.prototype.copy=function(vertex){this.positionWorld.copy(vertex.positionWorld);this.positionScreen.copy(vertex.positionScreen)};THREE.RenderableLine=function(){this.id=0;this.v1=new THREE.RenderableVertex();this.v2=new THREE.RenderableVertex();this.vertexColors=[new THREE.Color(),new THREE.Color()];this.material=null;this.z=0;this.renderOrder=0};THREE.RenderableSprite=function(){this.id=0;this.object=null;this.x=0;this.y=0;this.z=0;this.rotation=0;this.scale=new THREE.Vector2();this.material=null;this.renderOrder=0};THREE.Projector=function(){var _object,_objectCount,_objectPool=[],_objectPoolLength=0,_vertex,_vertexCount,_vertexPool=[],_vertexPoolLength=0,_face,_faceCount,_facePool=[],_facePoolLength=0,_line,_lineCount,_linePool=[],_linePoolLength=0,_sprite,_spriteCount,_spritePool=[],_spritePoolLength=0,_renderData={objects:[],lights:[],elements:[]},_vector3=new THREE.Vector3(),_vector4=new THREE.Vector4(),_clipBox=new THREE.Box3(new THREE.Vector3(-1,-1,-1),new THREE.Vector3(1,1,1)),_boundingBox=new THREE.Box3(),_points3=new Array(3),_points4=new Array(4),_viewMatrix=new THREE.Matrix4(),_viewProjectionMatrix=new THREE.Matrix4(),_modelMatrix,_modelViewProjectionMatrix=new THREE.Matrix4(),_normalMatrix=new THREE.Matrix3(),_frustum=new THREE.Frustum(),_clippedVertex1PositionScreen=new THREE.Vector4(),_clippedVertex2PositionScreen=new THREE.Vector4(); +this.projectVector=function(vector,camera){console.warn("THREE.Projector: .projectVector() is now vector.project().");vector.project(camera)};this.unprojectVector=function(vector,camera){console.warn("THREE.Projector: .unprojectVector() is now vector.unproject().");vector.unproject(camera)};this.pickingRay=function(vector,camera){console.error("THREE.Projector: .pickingRay() is now raycaster.setFromCamera().")};var RenderList=function(){var normals=[];var uvs=[];var object=null;var material=null;var normalMatrix=new THREE.Matrix3();function setObject(value){object=value;material=object.material;normalMatrix.getNormalMatrix(object.matrixWorld);normals.length=0;uvs.length=0}function projectVertex(vertex){var position=vertex.position;var positionWorld=vertex.positionWorld;var positionScreen=vertex.positionScreen;positionWorld.copy(position).applyMatrix4(_modelMatrix);positionScreen.copy(positionWorld).applyMatrix4(_viewProjectionMatrix);var invW=1/positionScreen.w;positionScreen.x*=invW;positionScreen.y*=invW;positionScreen.z*=invW;vertex.visible=positionScreen.x>=-1&&positionScreen.x<=1&&positionScreen.y>=-1&&positionScreen.y<=1&&positionScreen.z>=-1&&positionScreen.z<=1}function pushVertex(x,y,z){_vertex=getNextVertexInPool();_vertex.position.set(x,y,z);projectVertex(_vertex)}function pushNormal(x,y,z){normals.push(x,y,z)}function pushUv(x,y){uvs.push(x,y)}function checkTriangleVisibility(v1,v2,v3){if(v1.visible===true||v2.visible===true||v3.visible===true){return true}_points3[0]=v1.positionScreen;_points3[1]=v2.positionScreen;_points3[2]=v3.positionScreen;return _clipBox.intersectsBox(_boundingBox.setFromPoints(_points3))}function checkBackfaceCulling(v1,v2,v3){return((v3.positionScreen.x-v1.positionScreen.x)*(v2.positionScreen.y-v1.positionScreen.y)-(v3.positionScreen.y-v1.positionScreen.y)*(v2.positionScreen.x-v1.positionScreen.x))<0}function pushLine(a,b){var v1=_vertexPool[a];var v2=_vertexPool[b];_line=getNextLineInPool();_line.id=object.id;_line.v1.copy(v1);_line.v2.copy(v2); +_line.z=(v1.positionScreen.z+v2.positionScreen.z)/2;_line.renderOrder=object.renderOrder;_line.material=object.material;_renderData.elements.push(_line)}function pushTriangle(a,b,c){var v1=_vertexPool[a];var v2=_vertexPool[b];var v3=_vertexPool[c];if(checkTriangleVisibility(v1,v2,v3)===false){return}if(material.side===THREE.DoubleSide||checkBackfaceCulling(v1,v2,v3)===true){_face=getNextFaceInPool();_face.id=object.id;_face.v1.copy(v1);_face.v2.copy(v2);_face.v3.copy(v3);_face.z=(v1.positionScreen.z+v2.positionScreen.z+v3.positionScreen.z)/3;_face.renderOrder=object.renderOrder;_face.normalModel.fromArray(normals,a*3);_face.normalModel.applyMatrix3(normalMatrix).normalize();for(var i=0;i<3;i++){var normal=_face.vertexNormalsModel[i];normal.fromArray(normals,arguments[i]*3);normal.applyMatrix3(normalMatrix).normalize();var uv=_face.uvs[i];uv.fromArray(uvs,arguments[i]*2)}_face.vertexNormalsLength=3;_face.material=object.material;_renderData.elements.push(_face)}}return{setObject:setObject,projectVertex:projectVertex,checkTriangleVisibility:checkTriangleVisibility,checkBackfaceCulling:checkBackfaceCulling,pushVertex:pushVertex,pushNormal:pushNormal,pushUv:pushUv,pushLine:pushLine,pushTriangle:pushTriangle}};var renderList=new RenderList();this.projectScene=function(scene,camera,sortObjects,sortElements){_faceCount=0;_lineCount=0;_spriteCount=0;_renderData.elements.length=0;if(scene.autoUpdate===true){scene.updateMatrixWorld()}if(camera.parent===null){camera.updateMatrixWorld()}_viewMatrix.copy(camera.matrixWorldInverse.getInverse(camera.matrixWorld));_viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix,_viewMatrix);_frustum.setFromMatrix(_viewProjectionMatrix);_objectCount=0;_renderData.objects.length=0;_renderData.lights.length=0;function addObject(object){_object=getNextObjectInPool();_object.id=object.id;_object.object=object;_vector3.setFromMatrixPosition(object.matrixWorld);_vector3.applyMatrix4(_viewProjectionMatrix);_object.z=_vector3.z;_object.renderOrder=object.renderOrder; +_renderData.objects.push(_object)}scene.traverseVisible(function(object){if(object instanceof THREE.Light){_renderData.lights.push(object)}else{if(object instanceof THREE.Mesh||object instanceof THREE.Line){if(object.material.visible===false){return}if(object.frustumCulled===true&&_frustum.intersectsObject(object)===false){return}addObject(object)}else{if(object instanceof THREE.Sprite){if(object.material.visible===false){return}if(object.frustumCulled===true&&_frustum.intersectsSprite(object)===false){return}addObject(object)}}}});if(sortObjects===true){_renderData.objects.sort(painterSort)}for(var o=0,ol=_renderData.objects.length;o0){for(var g=0;g0){continue}v2=_vertexPool[_vertexCount-2];_clippedVertex1PositionScreen.copy(v1.positionScreen);_clippedVertex2PositionScreen.copy(v2.positionScreen);if(clipLine(_clippedVertex1PositionScreen,_clippedVertex2PositionScreen)===true){_clippedVertex1PositionScreen.multiplyScalar(1/_clippedVertex1PositionScreen.w);_clippedVertex2PositionScreen.multiplyScalar(1/_clippedVertex2PositionScreen.w);_line=getNextLineInPool();_line.id=object.id;_line.v1.positionScreen.copy(_clippedVertex1PositionScreen);_line.v2.positionScreen.copy(_clippedVertex2PositionScreen);_line.z=Math.max(_clippedVertex1PositionScreen.z,_clippedVertex2PositionScreen.z);_line.renderOrder=object.renderOrder; +_line.material=object.material;if(object.material.vertexColors===THREE.VertexColors){_line.vertexColors[0].copy(object.geometry.colors[v]);_line.vertexColors[1].copy(object.geometry.colors[v-1])}_renderData.elements.push(_line)}}}}}else{if(object instanceof THREE.Sprite){_vector4.set(_modelMatrix.elements[12],_modelMatrix.elements[13],_modelMatrix.elements[14],1);_vector4.applyMatrix4(_viewProjectionMatrix);var invW=1/_vector4.w;_vector4.z*=invW;if(_vector4.z>=-1&&_vector4.z<=1){_sprite=getNextSpriteInPool();_sprite.id=object.id;_sprite.x=_vector4.x*invW;_sprite.y=_vector4.y*invW;_sprite.z=_vector4.z;_sprite.renderOrder=object.renderOrder;_sprite.object=object;_sprite.rotation=object.rotation;_sprite.scale.x=object.scale.x*Math.abs(_sprite.x-(_vector4.x+camera.projectionMatrix.elements[0])/(_vector4.w+camera.projectionMatrix.elements[12]));_sprite.scale.y=object.scale.y*Math.abs(_sprite.y-(_vector4.y+camera.projectionMatrix.elements[5])/(_vector4.w+camera.projectionMatrix.elements[13]));_sprite.material=object.material;_renderData.elements.push(_sprite)}}}}}if(sortElements===true){_renderData.elements.sort(painterSort)}return _renderData};function getNextObjectInPool(){if(_objectCount===_objectPoolLength){var object=new THREE.RenderableObject();_objectPool.push(object);_objectPoolLength++;_objectCount++;return object}return _objectPool[_objectCount++]}function getNextVertexInPool(){if(_vertexCount===_vertexPoolLength){var vertex=new THREE.RenderableVertex();_vertexPool.push(vertex);_vertexPoolLength++;_vertexCount++;return vertex}return _vertexPool[_vertexCount++]}function getNextFaceInPool(){if(_faceCount===_facePoolLength){var face=new THREE.RenderableFace();_facePool.push(face);_facePoolLength++;_faceCount++;return face}return _facePool[_faceCount++]}function getNextLineInPool(){if(_lineCount===_linePoolLength){var line=new THREE.RenderableLine();_linePool.push(line);_linePoolLength++;_lineCount++;return line}return _linePool[_lineCount++]}function getNextSpriteInPool(){if(_spriteCount===_spritePoolLength){var sprite=new THREE.RenderableSprite(); +_spritePool.push(sprite);_spritePoolLength++;_spriteCount++;return sprite}return _spritePool[_spriteCount++]}function painterSort(a,b){if(a.renderOrder!==b.renderOrder){return a.renderOrder-b.renderOrder}else{if(a.z!==b.z){return b.z-a.z}else{if(a.id!==b.id){return a.id-b.id}else{return 0}}}}function clipLine(s1,s2){var alpha1=0,alpha2=1,bc1near=s1.z+s1.w,bc2near=s2.z+s2.w,bc1far=-s1.z+s1.w,bc2far=-s2.z+s2.w;if(bc1near>=0&&bc2near>=0&&bc1far>=0&&bc2far>=0){return true}else{if((bc1near<0&&bc2near<0)||(bc1far<0&&bc2far<0)){return false}else{if(bc1near<0){alpha1=Math.max(alpha1,bc1near/(bc1near-bc2near))}else{if(bc2near<0){alpha2=Math.min(alpha2,bc1near/(bc1near-bc2near))}}if(bc1far<0){alpha1=Math.max(alpha1,bc1far/(bc1far-bc2far))}else{if(bc2far<0){alpha2=Math.min(alpha2,bc1far/(bc1far-bc2far))}}if(alpha20){setBlending(THREE.NormalBlending);setOpacity(1);setFillStyle("rgba("+Math.floor(_clearColor.r*255)+","+Math.floor(_clearColor.g*255)+","+Math.floor(_clearColor.b*255)+","+_clearAlpha+")");_context.fillRect(_clearBox.min.x|0,_clearBox.max.y|0,(_clearBox.max.x-_clearBox.min.x)|0,(_clearBox.min.y-_clearBox.max.y)|0)}_clearBox.makeEmpty()}};this.clearColor=function(){};this.clearDepth=function(){};this.clearStencil=function(){};this.render=function(scene,camera){if(camera instanceof THREE.Camera===false){console.error("THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.");return}var background=scene.background;if(background&&background.isColor){setFillStyle("rgb("+Math.floor(background.r*255)+","+Math.floor(background.g*255)+","+Math.floor(background.b*255)+")");_context.fillRect(0,0,_canvasWidth,_canvasHeight)}else{if(this.autoClear===true){this.clear()}}_this.info.render.vertices=0;_this.info.render.faces=0;_context.setTransform(_viewportWidth/_canvasWidth,0,0,-_viewportHeight/_canvasHeight,_viewportX,_canvasHeight-_viewportY);_context.translate(_canvasWidthHalf,_canvasHeightHalf);_renderData=_projector.projectScene(scene,camera,this.sortObjects,this.sortElements);_elements=_renderData.elements;_lights=_renderData.lights;_camera=camera;_normalViewMatrix.getNormalMatrix(camera.matrixWorldInverse);calculateLights();for(var e=0,el=_elements.length;e1){continue}if(_v2.positionScreen.z<-1||_v2.positionScreen.z>1){continue}if(_v3.positionScreen.z<-1||_v3.positionScreen.z>1){continue}_v1.positionScreen.x*=_canvasWidthHalf;_v1.positionScreen.y*=_canvasHeightHalf;_v2.positionScreen.x*=_canvasWidthHalf;_v2.positionScreen.y*=_canvasHeightHalf;_v3.positionScreen.x*=_canvasWidthHalf;_v3.positionScreen.y*=_canvasHeightHalf;if(material.overdraw>0){expand(_v1.positionScreen,_v2.positionScreen,material.overdraw);expand(_v2.positionScreen,_v3.positionScreen,material.overdraw);expand(_v3.positionScreen,_v1.positionScreen,material.overdraw)}_elemBox.setFromPoints([_v1.positionScreen,_v2.positionScreen,_v3.positionScreen]);if(_clipBox.intersectsBox(_elemBox)===true){renderFace3(_v1,_v2,_v3,0,1,2,element,material)}}}}_clearBox.union(_elemBox)}_context.setTransform(1,0,0,1,0,0)};function calculateLights(){_ambientLight.setRGB(0,0,0);_directionalLights.setRGB(0,0,0);_pointLights.setRGB(0,0,0);for(var l=0,ll=_lights.length;l1){mouseX=event.touches[0].pageX-windowHalfX}}function onDocumentTouchMove(event){if(event.touches.length==1){mouseX=event.touches[0].pageX-windowHalfX}}function animate(){requestAnimationFrame(animate);render()}function render(){camera.position.x+=(mouseX-camera.position.x)*0.05;camera.position.y+=(-mouseY+200-camera.position.y)*0.05;camera.lookAt(scene.position);renderer.render(scene,camera)}}); +THREE.RenderableObject=function(){this.id=0;this.object=null;this.z=0;this.renderOrder=0};THREE.RenderableFace=function(){this.id=0;this.v1=new THREE.RenderableVertex();this.v2=new THREE.RenderableVertex();this.v3=new THREE.RenderableVertex();this.normalModel=new THREE.Vector3();this.vertexNormalsModel=[new THREE.Vector3(),new THREE.Vector3(),new THREE.Vector3()];this.vertexNormalsLength=0;this.color=new THREE.Color();this.material=null;this.uvs=[new THREE.Vector2(),new THREE.Vector2(),new THREE.Vector2()];this.z=0;this.renderOrder=0};THREE.RenderableVertex=function(){this.position=new THREE.Vector3();this.positionWorld=new THREE.Vector3();this.positionScreen=new THREE.Vector4();this.visible=true};THREE.RenderableVertex.prototype.copy=function(vertex){this.positionWorld.copy(vertex.positionWorld);this.positionScreen.copy(vertex.positionScreen)};THREE.RenderableLine=function(){this.id=0;this.v1=new THREE.RenderableVertex();this.v2=new THREE.RenderableVertex();this.vertexColors=[new THREE.Color(),new THREE.Color()];this.material=null;this.z=0;this.renderOrder=0};THREE.RenderableSprite=function(){this.id=0;this.object=null;this.x=0;this.y=0;this.z=0;this.rotation=0;this.scale=new THREE.Vector2();this.material=null;this.renderOrder=0};THREE.Projector=function(){var _object,_objectCount,_objectPool=[],_objectPoolLength=0,_vertex,_vertexCount,_vertexPool=[],_vertexPoolLength=0,_face,_faceCount,_facePool=[],_facePoolLength=0,_line,_lineCount,_linePool=[],_linePoolLength=0,_sprite,_spriteCount,_spritePool=[],_spritePoolLength=0,_renderData={objects:[],lights:[],elements:[]},_vector3=new THREE.Vector3(),_vector4=new THREE.Vector4(),_clipBox=new THREE.Box3(new THREE.Vector3(-1,-1,-1),new THREE.Vector3(1,1,1)),_boundingBox=new THREE.Box3(),_points3=new Array(3),_points4=new Array(4),_viewMatrix=new THREE.Matrix4(),_viewProjectionMatrix=new THREE.Matrix4(),_modelMatrix,_modelViewProjectionMatrix=new THREE.Matrix4(),_normalMatrix=new THREE.Matrix3(),_frustum=new THREE.Frustum(),_clippedVertex1PositionScreen=new THREE.Vector4(),_clippedVertex2PositionScreen=new THREE.Vector4(); +this.projectVector=function(vector,camera){console.warn("THREE.Projector: .projectVector() is now vector.project().");vector.project(camera)};this.unprojectVector=function(vector,camera){console.warn("THREE.Projector: .unprojectVector() is now vector.unproject().");vector.unproject(camera)};this.pickingRay=function(vector,camera){console.error("THREE.Projector: .pickingRay() is now raycaster.setFromCamera().")};var RenderList=function(){var normals=[];var uvs=[];var object=null;var material=null;var normalMatrix=new THREE.Matrix3();function setObject(value){object=value;material=object.material;normalMatrix.getNormalMatrix(object.matrixWorld);normals.length=0;uvs.length=0}function projectVertex(vertex){var position=vertex.position;var positionWorld=vertex.positionWorld;var positionScreen=vertex.positionScreen;positionWorld.copy(position).applyMatrix4(_modelMatrix);positionScreen.copy(positionWorld).applyMatrix4(_viewProjectionMatrix);var invW=1/positionScreen.w;positionScreen.x*=invW;positionScreen.y*=invW;positionScreen.z*=invW;vertex.visible=positionScreen.x>=-1&&positionScreen.x<=1&&positionScreen.y>=-1&&positionScreen.y<=1&&positionScreen.z>=-1&&positionScreen.z<=1}function pushVertex(x,y,z){_vertex=getNextVertexInPool();_vertex.position.set(x,y,z);projectVertex(_vertex)}function pushNormal(x,y,z){normals.push(x,y,z)}function pushUv(x,y){uvs.push(x,y)}function checkTriangleVisibility(v1,v2,v3){if(v1.visible===true||v2.visible===true||v3.visible===true){return true}_points3[0]=v1.positionScreen;_points3[1]=v2.positionScreen;_points3[2]=v3.positionScreen;return _clipBox.intersectsBox(_boundingBox.setFromPoints(_points3))}function checkBackfaceCulling(v1,v2,v3){return((v3.positionScreen.x-v1.positionScreen.x)*(v2.positionScreen.y-v1.positionScreen.y)-(v3.positionScreen.y-v1.positionScreen.y)*(v2.positionScreen.x-v1.positionScreen.x))<0}function pushLine(a,b){var v1=_vertexPool[a];var v2=_vertexPool[b];_line=getNextLineInPool();_line.id=object.id;_line.v1.copy(v1);_line.v2.copy(v2); +_line.z=(v1.positionScreen.z+v2.positionScreen.z)/2;_line.renderOrder=object.renderOrder;_line.material=object.material;_renderData.elements.push(_line)}function pushTriangle(a,b,c){var v1=_vertexPool[a];var v2=_vertexPool[b];var v3=_vertexPool[c];if(checkTriangleVisibility(v1,v2,v3)===false){return}if(material.side===THREE.DoubleSide||checkBackfaceCulling(v1,v2,v3)===true){_face=getNextFaceInPool();_face.id=object.id;_face.v1.copy(v1);_face.v2.copy(v2);_face.v3.copy(v3);_face.z=(v1.positionScreen.z+v2.positionScreen.z+v3.positionScreen.z)/3;_face.renderOrder=object.renderOrder;_face.normalModel.fromArray(normals,a*3);_face.normalModel.applyMatrix3(normalMatrix).normalize();for(var i=0;i<3;i++){var normal=_face.vertexNormalsModel[i];normal.fromArray(normals,arguments[i]*3);normal.applyMatrix3(normalMatrix).normalize();var uv=_face.uvs[i];uv.fromArray(uvs,arguments[i]*2)}_face.vertexNormalsLength=3;_face.material=object.material;_renderData.elements.push(_face)}}return{setObject:setObject,projectVertex:projectVertex,checkTriangleVisibility:checkTriangleVisibility,checkBackfaceCulling:checkBackfaceCulling,pushVertex:pushVertex,pushNormal:pushNormal,pushUv:pushUv,pushLine:pushLine,pushTriangle:pushTriangle}};var renderList=new RenderList();this.projectScene=function(scene,camera,sortObjects,sortElements){_faceCount=0;_lineCount=0;_spriteCount=0;_renderData.elements.length=0;if(scene.autoUpdate===true){scene.updateMatrixWorld()}if(camera.parent===null){camera.updateMatrixWorld()}_viewMatrix.copy(camera.matrixWorldInverse.getInverse(camera.matrixWorld));_viewProjectionMatrix.multiplyMatrices(camera.projectionMatrix,_viewMatrix);_frustum.setFromMatrix(_viewProjectionMatrix);_objectCount=0;_renderData.objects.length=0;_renderData.lights.length=0;function addObject(object){_object=getNextObjectInPool();_object.id=object.id;_object.object=object;_vector3.setFromMatrixPosition(object.matrixWorld);_vector3.applyMatrix4(_viewProjectionMatrix);_object.z=_vector3.z;_object.renderOrder=object.renderOrder; +_renderData.objects.push(_object)}scene.traverseVisible(function(object){if(object instanceof THREE.Light){_renderData.lights.push(object)}else{if(object instanceof THREE.Mesh||object instanceof THREE.Line){if(object.material.visible===false){return}if(object.frustumCulled===true&&_frustum.intersectsObject(object)===false){return}addObject(object)}else{if(object instanceof THREE.Sprite){if(object.material.visible===false){return}if(object.frustumCulled===true&&_frustum.intersectsSprite(object)===false){return}addObject(object)}}}});if(sortObjects===true){_renderData.objects.sort(painterSort)}for(var o=0,ol=_renderData.objects.length;o0){for(var g=0;g0){continue}v2=_vertexPool[_vertexCount-2];_clippedVertex1PositionScreen.copy(v1.positionScreen);_clippedVertex2PositionScreen.copy(v2.positionScreen);if(clipLine(_clippedVertex1PositionScreen,_clippedVertex2PositionScreen)===true){_clippedVertex1PositionScreen.multiplyScalar(1/_clippedVertex1PositionScreen.w);_clippedVertex2PositionScreen.multiplyScalar(1/_clippedVertex2PositionScreen.w);_line=getNextLineInPool();_line.id=object.id;_line.v1.positionScreen.copy(_clippedVertex1PositionScreen);_line.v2.positionScreen.copy(_clippedVertex2PositionScreen);_line.z=Math.max(_clippedVertex1PositionScreen.z,_clippedVertex2PositionScreen.z);_line.renderOrder=object.renderOrder; +_line.material=object.material;if(object.material.vertexColors===THREE.VertexColors){_line.vertexColors[0].copy(object.geometry.colors[v]);_line.vertexColors[1].copy(object.geometry.colors[v-1])}_renderData.elements.push(_line)}}}}}else{if(object instanceof THREE.Sprite){_vector4.set(_modelMatrix.elements[12],_modelMatrix.elements[13],_modelMatrix.elements[14],1);_vector4.applyMatrix4(_viewProjectionMatrix);var invW=1/_vector4.w;_vector4.z*=invW;if(_vector4.z>=-1&&_vector4.z<=1){_sprite=getNextSpriteInPool();_sprite.id=object.id;_sprite.x=_vector4.x*invW;_sprite.y=_vector4.y*invW;_sprite.z=_vector4.z;_sprite.renderOrder=object.renderOrder;_sprite.object=object;_sprite.rotation=object.rotation;_sprite.scale.x=object.scale.x*Math.abs(_sprite.x-(_vector4.x+camera.projectionMatrix.elements[0])/(_vector4.w+camera.projectionMatrix.elements[12]));_sprite.scale.y=object.scale.y*Math.abs(_sprite.y-(_vector4.y+camera.projectionMatrix.elements[5])/(_vector4.w+camera.projectionMatrix.elements[13]));_sprite.material=object.material;_renderData.elements.push(_sprite)}}}}}if(sortElements===true){_renderData.elements.sort(painterSort)}return _renderData};function getNextObjectInPool(){if(_objectCount===_objectPoolLength){var object=new THREE.RenderableObject();_objectPool.push(object);_objectPoolLength++;_objectCount++;return object}return _objectPool[_objectCount++]}function getNextVertexInPool(){if(_vertexCount===_vertexPoolLength){var vertex=new THREE.RenderableVertex();_vertexPool.push(vertex);_vertexPoolLength++;_vertexCount++;return vertex}return _vertexPool[_vertexCount++]}function getNextFaceInPool(){if(_faceCount===_facePoolLength){var face=new THREE.RenderableFace();_facePool.push(face);_facePoolLength++;_faceCount++;return face}return _facePool[_faceCount++]}function getNextLineInPool(){if(_lineCount===_linePoolLength){var line=new THREE.RenderableLine();_linePool.push(line);_linePoolLength++;_lineCount++;return line}return _linePool[_lineCount++]}function getNextSpriteInPool(){if(_spriteCount===_spritePoolLength){var sprite=new THREE.RenderableSprite(); +_spritePool.push(sprite);_spritePoolLength++;_spriteCount++;return sprite}return _spritePool[_spriteCount++]}function painterSort(a,b){if(a.renderOrder!==b.renderOrder){return a.renderOrder-b.renderOrder}else{if(a.z!==b.z){return b.z-a.z}else{if(a.id!==b.id){return a.id-b.id}else{return 0}}}}function clipLine(s1,s2){var alpha1=0,alpha2=1,bc1near=s1.z+s1.w,bc2near=s2.z+s2.w,bc1far=-s1.z+s1.w,bc2far=-s2.z+s2.w;if(bc1near>=0&&bc2near>=0&&bc1far>=0&&bc2far>=0){return true}else{if((bc1near<0&&bc2near<0)||(bc1far<0&&bc2far<0)){return false}else{if(bc1near<0){alpha1=Math.max(alpha1,bc1near/(bc1near-bc2near))}else{if(bc2near<0){alpha2=Math.min(alpha2,bc1near/(bc1near-bc2near))}}if(bc1far<0){alpha1=Math.max(alpha1,bc1far/(bc1far-bc2far))}else{if(bc2far<0){alpha2=Math.min(alpha2,bc1far/(bc1far-bc2far))}}if(alpha20){setBlending(THREE.NormalBlending);setOpacity(1);setFillStyle("rgba("+Math.floor(_clearColor.r*255)+","+Math.floor(_clearColor.g*255)+","+Math.floor(_clearColor.b*255)+","+_clearAlpha+")");_context.fillRect(_clearBox.min.x|0,_clearBox.max.y|0,(_clearBox.max.x-_clearBox.min.x)|0,(_clearBox.min.y-_clearBox.max.y)|0)}_clearBox.makeEmpty()}};this.clearColor=function(){};this.clearDepth=function(){};this.clearStencil=function(){};this.render=function(scene,camera){if(camera instanceof THREE.Camera===false){console.error("THREE.CanvasRenderer.render: camera is not an instance of THREE.Camera.");return}var background=scene.background;if(background&&background.isColor){setFillStyle("rgb("+Math.floor(background.r*255)+","+Math.floor(background.g*255)+","+Math.floor(background.b*255)+")");_context.fillRect(0,0,_canvasWidth,_canvasHeight)}else{if(this.autoClear===true){this.clear()}}_this.info.render.vertices=0;_this.info.render.faces=0;_context.setTransform(_viewportWidth/_canvasWidth,0,0,-_viewportHeight/_canvasHeight,_viewportX,_canvasHeight-_viewportY);_context.translate(_canvasWidthHalf,_canvasHeightHalf);_renderData=_projector.projectScene(scene,camera,this.sortObjects,this.sortElements);_elements=_renderData.elements;_lights=_renderData.lights;_camera=camera;_normalViewMatrix.getNormalMatrix(camera.matrixWorldInverse);calculateLights();for(var e=0,el=_elements.length;e1){continue}if(_v2.positionScreen.z<-1||_v2.positionScreen.z>1){continue}if(_v3.positionScreen.z<-1||_v3.positionScreen.z>1){continue}_v1.positionScreen.x*=_canvasWidthHalf;_v1.positionScreen.y*=_canvasHeightHalf;_v2.positionScreen.x*=_canvasWidthHalf;_v2.positionScreen.y*=_canvasHeightHalf;_v3.positionScreen.x*=_canvasWidthHalf;_v3.positionScreen.y*=_canvasHeightHalf;if(material.overdraw>0){expand(_v1.positionScreen,_v2.positionScreen,material.overdraw);expand(_v2.positionScreen,_v3.positionScreen,material.overdraw);expand(_v3.positionScreen,_v1.positionScreen,material.overdraw)}_elemBox.setFromPoints([_v1.positionScreen,_v2.positionScreen,_v3.positionScreen]);if(_clipBox.intersectsBox(_elemBox)===true){renderFace3(_v1,_v2,_v3,0,1,2,element,material)}}}}_clearBox.union(_elemBox)}_context.setTransform(1,0,0,1,0,0)};function calculateLights(){_ambientLight.setRGB(0,0,0);_directionalLights.setRGB(0,0,0);_pointLights.setRGB(0,0,0);for(var l=0,ll=_lights.length;l