/** * @author alteredq / http://alteredqualia.com/ * @author mr.doob / http://mrdoob.com/ */ var Detector = { canvas: !! window.CanvasRenderingContext2D, webgl: ( function () { try { var canvas = document.createElement( 'canvas' ); return !! window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ); } catch( e ) { return false; } } )(), workers: !! window.Worker, fileapi: window.File && window.FileReader && window.FileList && window.Blob, getWebGLErrorMessage: function () { var element = document.createElement( 'div' ); element.id = 'webgl-error-message'; element.style.fontFamily = 'monospace'; element.style.fontSize = '13px'; element.style.fontWeight = 'normal'; element.style.textAlign = 'center'; element.style.background = '#fff'; element.style.color = '#000'; element.style.padding = '1.5em'; element.style.width = '400px'; element.style.margin = '5em auto 0'; if ( ! this.webgl ) { element.innerHTML = window.WebGLRenderingContext ? [ 'Your graphics card does not seem to support WebGL.
', 'Find out how to get it here.' ].join( '\n' ) : [ 'Your browser does not seem to support WebGL.
', 'Find out how to get it here.' ].join( '\n' ); } return element; }, addGetWebGLMessage: function ( parameters ) { var parent, id, element; parameters = parameters || {}; parent = parameters.parent !== undefined ? parameters.parent : document.body; id = parameters.id !== undefined ? parameters.id : 'oldie'; element = Detector.getWebGLErrorMessage(); element.id = id; parent.appendChild( element ); } }; var SHADER_CONSTANTS = { N : 8, MAX_RECURSION : 4, MEDIUM_REFRACTIVE_INDEX : 1.6, SPHERE_RADIUS : 0.29, AMBIENT : 0.01, DIMM : 0.8 }, P = 3, Q = 7, R = 0.25, EYE = new THREE.Vector3(0.0, 0.0, 1.4), LIGHT = new THREE.Vector3(0.0, -10.0, 10.0); ; var scene, camera, renderer, uniforms, prev_timestamp, phi = 0, d_phi = 0, theta = 0, d_theta = 0, time = 0 ; // raf shim window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); function replaceVariableTemplates(shader, variables) { return shader.replace(/\$(\w+)/g, function(match, variable) { var val = variables[variable]; return val || match; }); } function getShader(id, variables) { var shader = document.getElementById(id).textContent; return replaceVariableTemplates(shader, variables); } function hsv2rgb(h, s, v) { var hsvperm = [[0, 3, 1], [2, 0, 1], [1, 0, 3], [1, 2, 0], [3, 1, 0], [0, 1, 2]]; h = (h % 360 / 360) * 360; s = s; v = v; var i, f; i = Math.floor((h / 60) % 6); f = (h / 60) - i; var vs = [v, v * (1 - s), v * (1 - f * s), v * (1 - (1 - f) * s)]; return new THREE.Vector3(vs[hsvperm[i][0]], vs[hsvperm[i][1]], vs[hsvperm[i][2]]); } function init() { if (!Detector.webgl) { Detector.addGetWebGLMessage(); return; } camera = new THREE.Camera(); camera.position.z = 1; scene = new THREE.Scene(); SHADER_CONSTANTS.TREE_STACK_SIZE = 1 << SHADER_CONSTANTS.MAX_RECURSION; var spheres = new Array(SHADER_CONSTANTS.N); var colors = new Array(SHADER_CONSTANTS.N); for (var i = 0; i < SHADER_CONSTANTS.N; ++i) { spheres[i] = new THREE.Vector3(); colors[i] = hsv2rgb(360 / SHADER_CONSTANTS.N * i + 180 / SHADER_CONSTANTS.N, 0.8, 1); } uniforms = { uVec2Resolution : { type : 'v2', value : new THREE.Vector2(window.innerWidth, window.innerHeight) }, uVec3SphereCenters : { type : 'v3v', value : spheres }, uVec3SphereColors : { type : 'v3v', value : colors }, uVec3Eye : { type : 'v3', value : new THREE.Vector3(0, 0, 1.4)}, uVec3Light : { type : 'v3', value : new THREE.Vector3(0, -10, 0)}, uFloatPhi : { type : 'f', value : phi }, uFloatTheta : { type : 'f', value : theta } }; var material = new THREE.ShaderMaterial({ uniforms : uniforms, vertexShader : getShader('shader-vs', SHADER_CONSTANTS), fragmentShader : getShader('shader-fs', SHADER_CONSTANTS) }); var mesh = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material); scene.add(mesh); prev_timestamp = +new Date; renderer = new THREE.WebGLRenderer(); var container = document.getElementById('container'); renderer.setSize(window.innerWidth, window.innerHeight); container.appendChild(renderer.domElement); container.addEventListener('mousemove', onmousemove); animate(); } function animate() { var i, r, t, obj ; requestAnimationFrame(animate); t = +new Date; var dt = t - prev_timestamp; //console.log(1000/dt); time += dt; t = time * 0.00012; for (i = 0; i < SHADER_CONSTANTS.N; ++i) { var sphere = uniforms.uVec3SphereCenters.value[i]; r = R * (1 * Math.cos(Q * t) + 2); obj = scene[i]; sphere.x = r * Math.cos(P * t); sphere.y = r * Math.sin(P * t); sphere.z = - R * Math.sin(Q * t); t += Math.PI * 2 / SHADER_CONSTANTS.N; } prev_timestamp = +new Date; applyRotation(EYE, uniforms.uVec3Eye.value); applyRotation(LIGHT, uniforms.uVec3Light.value); phi += d_phi; theta += d_theta; uniforms.uFloatPhi.value = phi; uniforms.uFloatTheta.value = theta; render(); } function applyRotation(vec, res) { var cp = Math.cos(phi), sp = Math.sin(phi), ct = Math.cos(theta), st = Math.sin(theta), x, y, z ; x = vec.x; y = cp * vec.y - sp * vec.z; z = sp * vec.y + cp * vec.z; res.x = ct * x + st * z; res.y = y; res.z = -st * x + ct * z; } function onmousemove(e) { d_theta = 0.02 * (e.x / window.innerWidth * 2 - 1); d_phi = 0.02 * (e.y / window.innerHeight * 2 - 1); } function render() { renderer.render(scene, camera); } init();

test