var clock = new THREE.Clock(); var scene = new THREE.Scene(); var boxCount = 6; var boxSize = window.innerWidth / boxCount; var windowWidth = window.innerWidth; var radius = boxSize * 0.6 / 2; var geometry = new THREE.SphereBufferGeometry(radius, 30, 15); initOutlineEffect(); var boxGroup = new THREE.Group(); for (var x = 0; x < boxCount; x++) { for (var y = 0; y < boxCount; y++) { for (var z = 0; z < boxCount; z++) { var material = new THREE.MeshToonMaterial({ color: 0x00dddd }); var boxMesh = new THREE.Mesh(geometry, material); var meshX = x * boxSize - windowWidth / 2 + boxSize / 2; var meshY = y * boxSize - windowWidth / 2 + boxSize / 2; var meshZ = z * boxSize - windowWidth / 2 + boxSize / 2; boxMesh.position.x = meshX; boxMesh.position.y = meshY; boxMesh.position.z = meshZ; boxGroup.add(boxMesh); } } } scene.add(boxGroup); // Camera var fov = 45; var aspect = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(fov, aspect); camera.position.set(0, 0, 1000); // Point　Light var particleLight = new THREE.Mesh( new THREE.SphereBufferGeometry(180, 180, 180), new THREE.MeshBasicMaterial({color: 0xff0066}) ); scene.add(particleLight); var pointLight = new THREE.PointLight(0xFFFFFF, 2, 300); particleLight.add(pointLight); // Directional Light var directionalLight = new THREE.DirectionalLight(0xFFFFFF); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); var renderer = new THREE.WebGLRenderer(); renderer.setClearColor(0x411e99); renderer.setPixelRatio(window.devicePixelRatio); console.log(THREE); var effect = new THREE.OutlineEffect( renderer, { defaultThickness: 0.01, defaultColor: [0, 0, 0], defaultAlpha: 0.8, defaultKeepAlive: true }); document.body.appendChild(renderer.domElement); var map = function(value, beforeMin, beforeMax, afterMin, afterMax) { return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin)); }; var render = function () { // Get time diff since last update. // https://threejs.org/docs/#api/core/Clock.getDelta var delta = clock.getDelta(); var time = clock.elapsedTime; boxGroup.rotation.y += delta * 0.5; boxGroup.rotation.z += delta * 0.5; var len = boxGroup.children.length; for (var i = 0; i < len; i++) { var object = boxGroup.children[i]; if (object.type !== "Mesh") { continue; } var scale = map(Math.sin(time * 10.0 + i * 300), -1, 1, 0.5, 1.0); object.scale.x = scale; object.scale.y = scale; object.scale.z = scale; object.rotation.x += delta * 0.5; object.rotation.y += delta * 0.5; } effect.render(scene, camera); requestAnimationFrame(render); }; onResize(); render(); window.addEventListener('resize', onResize); function onResize() { var width = window.innerWidth; var height = window.innerHeight; renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(width, height); } function initOutlineEffect() { THREE.OutlineEffect = function ( renderer, parameters ) { parameters = parameters || {}; this.enabled = true; var defaultThickness = parameters.defaultThickness !== undefined ? parameters.defaultThickness : 0.003; var defaultColor = new THREE.Color().fromArray( parameters.defaultColor !== undefined ? parameters.defaultColor : [ 0, 0, 0 ] ); var defaultAlpha = parameters.defaultAlpha !== undefined ? parameters.defaultAlpha : 1.0; var defaultKeepAlive = parameters.defaultKeepAlive !== undefined ? parameters.defaultKeepAlive : false; // object.material.uuid -> outlineMaterial or // object.material[ n ].uuid -> outlineMaterial // save at the outline material creation and release // if it's unused removeThresholdCount frames // unless keepAlive is true. var cache = {}; var removeThresholdCount = 60; // outlineMaterial.uuid -> object.material or // outlineMaterial.uuid -> object.material[ n ] // save before render and release after render. var originalMaterials = {}; // object.uuid -> originalOnBeforeRender // save before render and release after render. var originalOnBeforeRenders = {}; //this.cache = cache; // for debug // copied from WebGLPrograms and removed some materials var shaderIDs = { MeshBasicMaterial: 'basic', MeshLambertMaterial: 'lambert', MeshPhongMaterial: 'phong', MeshToonMaterial: 'phong', MeshStandardMaterial: 'physical', MeshPhysicalMaterial: 'physical' }; var uniformsChunk = { outlineThickness: { type: "f", value: defaultThickness }, outlineColor: { type: "c", value: defaultColor }, outlineAlpha: { type: "f", value: defaultAlpha } }; var vertexShaderChunk = [ "#include ", "uniform float outlineThickness;", "vec4 calculateOutline( vec4 pos, vec3 objectNormal, vec4 skinned ) {", " float thickness = outlineThickness;", " const float ratio = 1.0;", // TODO: support outline thickness ratio for each vertex " vec4 pos2 = projectionMatrix * modelViewMatrix * vec4( skinned.xyz + objectNormal, 1.0 );", // NOTE: subtract pos2 from pos because BackSide objectNormal is negative " vec4 norm = normalize( pos - pos2 );", " return pos + norm * thickness * pos.w * ratio;", "}" ].join( "\n" ); var vertexShaderChunk2 = [ "#if ! defined( LAMBERT ) && ! defined( PHONG ) && ! defined( TOON ) && ! defined( PHYSICAL )", " #ifndef USE_ENVMAP", " vec3 objectNormal = normalize( normal );", " #endif", "#endif", "#ifdef FLIP_SIDED", " objectNormal = -objectNormal;", "#endif", "#ifdef DECLARE_TRANSFORMED", " vec3 transformed = vec3( position );", "#endif", "gl_Position = calculateOutline( gl_Position, objectNormal, vec4( transformed, 1.0 ) );", "#include " ].join( "\n" ); var fragmentShader = [ "#include ", "#include ", "uniform vec3 outlineColor;", "uniform float outlineAlpha;", "void main() {", " gl_FragColor = vec4( outlineColor, outlineAlpha );", " #include ", "}" ].join( "\n" ); function createInvisibleMaterial() { return new THREE.ShaderMaterial( { name: 'invisible', visible: false } ); } function createMaterial( originalMaterial ) { var shaderID = shaderIDs[ originalMaterial.type ]; var originalUniforms, originalVertexShader; var outlineParameters = originalMaterial.userData.outlineParameters; if ( shaderID !== undefined ) { var shader = THREE.ShaderLib[ shaderID ]; originalUniforms = shader.uniforms; originalVertexShader = shader.vertexShader; } else if ( originalMaterial.isRawShaderMaterial === true ) { originalUniforms = originalMaterial.uniforms; originalVertexShader = originalMaterial.vertexShader; if ( ! /attribute\s+vec3\s+position\s*;/.test( originalVertexShader ) || ! /attribute\s+vec3\s+normal\s*;/.test( originalVertexShader ) ) { console.warn( 'THREE.OutlineEffect requires both vec3 position and normal attributes in vertex shader, ' + 'does not draw outline for ' + originalMaterial.name + '(uuid:' + originalMaterial.uuid + ') material.' ); return createInvisibleMaterial(); } } else if ( originalMaterial.isShaderMaterial === true ) { originalUniforms = originalMaterial.uniforms; originalVertexShader = originalMaterial.vertexShader; } else { return createInvisibleMaterial(); } var uniforms = Object.assign( {}, originalUniforms, uniformsChunk ); var vertexShader = originalVertexShader // put vertexShaderChunk right before "void main() {...}" .replace( /void\s+main\s*\(\s*\)/, vertexShaderChunk + '\nvoid main()' ) // put vertexShaderChunk2 the end of "void main() {...}" // Note: here assums originalVertexShader ends with "}" of "void main() {...}" .replace( /\}\s*$/, vertexShaderChunk2 + '\n}' ) // remove any light related lines // Note: here is very sensitive to originalVertexShader // TODO: consider safer way .replace( /#include\s+<[\w_]*light[\w_]*>/g, '' ); var defines = {}; if ( ! /vec3\s+transformed\s*=/.test( originalVertexShader ) && ! /#include\s+/.test( originalVertexShader ) ) defines.DECLARE_TRANSFORMED = true; return new THREE.ShaderMaterial( { defines: defines, uniforms: uniforms, vertexShader: vertexShader, fragmentShader: fragmentShader, side: THREE.BackSide, //wireframe: true, skinning: false, morphTargets: false, morphNormals: false, fog: false } ); } function getOutlineMaterialFromCache( originalMaterial ) { var data = cache[ originalMaterial.uuid ]; if ( data === undefined ) { data = { material: createMaterial( originalMaterial ), used: true, keepAlive: defaultKeepAlive, count: 0 }; cache[ originalMaterial.uuid ] = data; } data.used = true; return data.material; } function getOutlineMaterial( originalMaterial ) { var outlineMaterial = getOutlineMaterialFromCache( originalMaterial ); originalMaterials[ outlineMaterial.uuid ] = originalMaterial; updateOutlineMaterial( outlineMaterial, originalMaterial ); return outlineMaterial; } function setOutlineMaterial( object ) { if ( object.material === undefined ) return; if ( Array.isArray( object.material ) ) { for ( var i = 0, il = object.material.length; i < il; i ++ ) { object.material[ i ] = getOutlineMaterial( object.material[ i ] ); } } else { object.material = getOutlineMaterial( object.material ); } originalOnBeforeRenders[ object.uuid ] = object.onBeforeRender; object.onBeforeRender = onBeforeRender; } function restoreOriginalMaterial( object ) { if ( object.material === undefined ) return; if ( Array.isArray( object.material ) ) { for ( var i = 0, il = object.material.length; i < il; i ++ ) { object.material[ i ] = originalMaterials[ object.material[ i ].uuid ]; } } else { object.material = originalMaterials[ object.material.uuid ]; } object.onBeforeRender = originalOnBeforeRenders[ object.uuid ]; } function onBeforeRender( renderer, scene, camera, geometry, material, group ) { var originalMaterial = originalMaterials[ material.uuid ]; // just in case if ( originalMaterial === undefined ) return; updateUniforms( material, originalMaterial ); } function updateUniforms( material, originalMaterial ) { var outlineParameters = originalMaterial.userData.outlineParameters; material.uniforms.outlineAlpha.value = originalMaterial.opacity; if ( outlineParameters !== undefined ) { if ( outlineParameters.thickness !== undefined ) material.uniforms.outlineThickness.value = outlineParameters.thickness; if ( outlineParameters.color !== undefined ) material.uniforms.outlineColor.value.fromArray( outlineParameters.color ); if ( outlineParameters.alpha !== undefined ) material.uniforms.outlineAlpha.value = outlineParameters.alpha; } } function updateOutlineMaterial( material, originalMaterial ) { if ( material.name === 'invisible' ) return; var outlineParameters = originalMaterial.userData.outlineParameters; material.skinning = originalMaterial.skinning; material.morphTargets = originalMaterial.morphTargets; material.morphNormals = originalMaterial.morphNormals; material.fog = originalMaterial.fog; if ( outlineParameters !== undefined ) { if ( originalMaterial.visible === false ) { material.visible = false; } else { material.visible = ( outlineParameters.visible !== undefined ) ? outlineParameters.visible : true; } material.transparent = ( outlineParameters.alpha !== undefined && outlineParameters.alpha < 1.0 ) ? true : originalMaterial.transparent; if ( outlineParameters.keepAlive !== undefined ) cache[ originalMaterial.uuid ].keepAlive = outlineParameters.keepAlive; } else { material.transparent = originalMaterial.transparent; material.visible = originalMaterial.visible; } if ( originalMaterial.wireframe === true || originalMaterial.depthTest === false ) material.visible = false; } function cleanupCache() { var keys; // clear originialMaterials keys = Object.keys( originalMaterials ); for ( var i = 0, il = keys.length; i < il; i ++ ) { originalMaterials[ keys[ i ] ] = undefined; } // clear originalOnBeforeRenders keys = Object.keys( originalOnBeforeRenders ); for ( var i = 0, il = keys.length; i < il; i ++ ) { originalOnBeforeRenders[ keys[ i ] ] = undefined; } // remove unused outlineMaterial from cache keys = Object.keys( cache ); for ( var i = 0, il = keys.length; i < il; i ++ ) { var key = keys[ i ]; if ( cache[ key ].used === false ) { cache[ key ].count++; if ( cache[ key ].keepAlive === false && cache[ key ].count > removeThresholdCount ) { delete cache[ key ]; } } else { cache[ key ].used = false; cache[ key ].count = 0; } } } this.render = function ( scene, camera, renderTarget, forceClear ) { if ( this.enabled === false ) { renderer.render( scene, camera, renderTarget, forceClear ); return; } var currentAutoClear = renderer.autoClear; renderer.autoClear = this.autoClear; // 1. render normally renderer.render( scene, camera, renderTarget, forceClear ); // 2. render outline var currentSceneAutoUpdate = scene.autoUpdate; var currentSceneBackground = scene.background; var currentShadowMapEnabled = renderer.shadowMap.enabled; scene.autoUpdate = false; scene.background = null; renderer.autoClear = false; renderer.shadowMap.enabled = false; scene.traverse( setOutlineMaterial ); renderer.render( scene, camera, renderTarget ); scene.traverse( restoreOriginalMaterial ); cleanupCache(); scene.autoUpdate = currentSceneAutoUpdate; scene.background = currentSceneBackground; renderer.autoClear = currentAutoClear; renderer.shadowMap.enabled = currentShadowMapEnabled; }; /* * See #9918 * * The following property copies and wrapper methods enable * THREE.OutlineEffect to be called from other *Effect, like * * effect = new THREE.VREffect( new THREE.OutlineEffect( renderer ) ); * * function render () { * * effect.render( scene, camera ); * * } */ this.autoClear = renderer.autoClear; this.domElement = renderer.domElement; this.shadowMap = renderer.shadowMap; this.clear = function ( color, depth, stencil ) { renderer.clear( color, depth, stencil ); }; this.getPixelRatio = function () { return renderer.getPixelRatio(); }; this.setPixelRatio = function ( value ) { renderer.setPixelRatio( value ); }; this.getSize = function () { return renderer.getSize(); }; this.setSize = function ( width, height, updateStyle ) { renderer.setSize( width, height, updateStyle ); }; this.setViewport = function ( x, y, width, height ) { renderer.setViewport( x, y, width, height ); }; this.setScissor = function ( x, y, width, height ) { renderer.setScissor( x, y, width, height ); }; this.setScissorTest = function ( boolean ) { renderer.setScissorTest( boolean ); }; this.setRenderTarget = function ( renderTarget ) { renderer.setRenderTarget( renderTarget ); }; }; };

Toon bubbles