forked from JessicaML/ScienceMotion-Static
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
1,705 additions
and
1 deletion.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,248 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<title>Spiral galaxy</title> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width"> | ||
<style> | ||
body { | ||
background-color: black; | ||
background-image: url("./images/stars.png"), url("./images/twinkling.png"); | ||
margin: 0px; | ||
overflow: hidden; | ||
color: white; | ||
font-family: helvetica, sans-serif; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
<div id="message"></div> | ||
<div id="container"></div> | ||
<script src="js/three.min.js"></script> | ||
<script src="js/OrbitControls.js"></script> | ||
<script src="js/Detector.js"></script> | ||
|
||
<script type="x-shader/x-vertex" id="vertexshader"> | ||
|
||
attribute float size; | ||
attribute vec3 ca; | ||
|
||
varying vec3 vColor; | ||
|
||
void main() { | ||
|
||
vColor = ca; | ||
|
||
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 ); | ||
|
||
gl_PointSize = size; | ||
gl_PointSize = size * ( 100.0 / length( mvPosition.xyz ) ); | ||
|
||
gl_Position = projectionMatrix * mvPosition; | ||
|
||
} | ||
|
||
</script> | ||
|
||
<script type="x-shader/x-fragment" id="fragmentshader"> | ||
|
||
uniform vec3 color; | ||
uniform sampler2D texture; | ||
|
||
varying vec3 vColor; | ||
|
||
void main() { | ||
|
||
gl_FragColor = vec4( color * vColor, 1.0 ); | ||
gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord ); | ||
|
||
} | ||
|
||
</script> | ||
|
||
<script> | ||
|
||
var mouseX = 0, mouseY = 0, | ||
|
||
windowHalfX = window.innerWidth / 2, | ||
windowHalfY = window.innerHeight / 2, | ||
|
||
camera, scene, renderer, particleSystem; | ||
|
||
var PI2 = Math.PI * 2; | ||
|
||
init(); | ||
animate(); | ||
|
||
function init() { | ||
|
||
var container, galaxy; | ||
|
||
container = document.createElement('div'); | ||
document.body.appendChild(container); | ||
|
||
//intialize camera | ||
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 10000 ); | ||
camera.position.z = 6; | ||
camera.position.y = 6; | ||
|
||
// Add OrbitControls so that we can pan around with the mouse. | ||
controls = new THREE.OrbitControls( camera ); | ||
controls.addEventListener( 'change', render ); | ||
|
||
|
||
//initialize scene | ||
scene = new THREE.Scene(); | ||
|
||
// Render the scene. | ||
renderer = Detector.webgl? new THREE.WebGLRenderer(): document.getElementById("message").textContent = "Your browser does not support WebGL."; | ||
renderer.setSize( window.innerWidth, window.innerHeight ); | ||
container.appendChild( renderer.domElement ); | ||
|
||
// Generate the circle texture | ||
var circleTexture = new THREE.Texture(generateCircleTexture()); | ||
circleTexture.needsUpdate = true; | ||
|
||
// Set up the shaders | ||
attributes = { | ||
size: { type: 'f', value: [] }, | ||
ca: { type: 'c', value: [] } | ||
}; | ||
|
||
uniforms = { | ||
amplitude: { type: "f", value: 1.0 }, | ||
color: { type: "c", value: new THREE.Color( 0xffffff ) }, | ||
texture: { type: "t", value: circleTexture }, | ||
}; | ||
|
||
uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping; | ||
|
||
var shaderMaterial = new THREE.ShaderMaterial( { | ||
uniforms: uniforms, | ||
attributes: attributes, | ||
vertexShader: document.getElementById( 'vertexshader' ).textContent, | ||
fragmentShader: document.getElementById( 'fragmentshader' ).textContent, | ||
transparent: true | ||
}); | ||
|
||
// Galaxy properties | ||
var galaxy = new THREE.Geometry(); | ||
var starsPerArm = 1000; | ||
var arms = 5; | ||
var armAngle = 270 / arms; | ||
|
||
// Create the galaxy structure | ||
for (arm = 0; arm < arms; arm++) { | ||
for (i = 0; i <= starsPerArm; i++) { | ||
|
||
radius = i / 40; | ||
angle = i / 100 + (armAngle * (arm + 1)); | ||
|
||
x = radius * Math.cos(angle) + rand(); | ||
y = rand() / 5; | ||
z = radius * Math.sin(angle) + rand(); | ||
|
||
// Add stars | ||
randResult = Math.random() * (starsPerArm); | ||
if(randResult < i*i) { | ||
galaxy.vertices.push(new THREE.Vector3(x + rand(), y + rand(), z + rand())); | ||
} | ||
|
||
// Add about 50% more stars with some position variation for a better result | ||
galaxy.vertices.push(new THREE.Vector3(x, y, z)); | ||
if(rand() >= 0) { | ||
galaxy.vertices.push(new THREE.Vector3(x + rand(), y + rand(), z + rand())); | ||
} | ||
} | ||
} | ||
|
||
// Create the particle system | ||
//https://code.tutsplus.com/tutorials/webgl-with-threejs-textures-particles--net-35836 | ||
particleSystem = new THREE.ParticleSystem(galaxy, shaderMaterial); | ||
particleSystem.sortParticles = true; | ||
|
||
// Data to send to the shader | ||
var vertices = particleSystem.geometry.vertices; | ||
var values_size = attributes.size.value; | ||
var values_color = attributes.ca.value; | ||
console.log("vertices = " + vertices.length); | ||
|
||
// Color variation | ||
for( var v = 0; v < vertices.length; v++ ) { | ||
|
||
values_size[ v ] = 0.2 + rand(); | ||
values_color[ v ] = new THREE.Color( 0xffffff ); | ||
var starType = Math.random(); | ||
values_color[ v ].setRGB(1, 1, 1); | ||
} | ||
|
||
// Add the particle system to the scene | ||
scene.add(particleSystem); | ||
|
||
// Resize listener | ||
window.addEventListener( 'resize', onWindowResize, false ); | ||
} | ||
|
||
function generateCircleTexture() { | ||
|
||
// draw a circle in the center of the canvas | ||
var size = 64; | ||
|
||
// create canvas | ||
var canvas = document.createElement('canvas'); | ||
canvas.width = size; | ||
canvas.height = size; | ||
|
||
// get context | ||
var context = canvas.getContext('2d'); | ||
|
||
// draw circle | ||
var centerX = size / 2; | ||
var centerY = size / 2; | ||
var radius = size / 2; | ||
|
||
for(var i = 1; i < 33; i++) { | ||
context.beginPath(); | ||
context.arc(centerX, centerY, (radius / 2) + (i / 2), 0, 2 * Math.PI, false); | ||
context.fillStyle = "rgba(255, 255, 255, " + (1 / i) + ")"; | ||
context.fill(); | ||
} | ||
|
||
return canvas; | ||
} | ||
|
||
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 animate() { | ||
|
||
particleSystem.rotation.y += 0.0001; | ||
|
||
controls.update(); | ||
requestAnimationFrame( animate ); | ||
render(); | ||
} | ||
|
||
function render() { | ||
// camera.lookAt(scene.position); | ||
renderer.render( scene, camera ); | ||
|
||
} | ||
|
||
function rand() { | ||
return Math.random() - 0.5; | ||
} | ||
|
||
</script> | ||
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,77 @@ | ||
//https://github.com/mrdoob/three.js/blob/master/examples/js/Detector.js | ||
|
||
/** | ||
* @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 <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br />', | ||
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.' | ||
].join( '\n' ) : [ | ||
'Your browser does not seem to support <a href="http://khronos.org/webgl/wiki/Getting_a_WebGL_Implementation" style="color:#000">WebGL</a>.<br/>', | ||
'Find out how to get it <a href="http://get.webgl.org/" style="color:#000">here</a>.' | ||
].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 ); | ||
|
||
} | ||
|
||
}; | ||
|
||
// browserify support | ||
if ( typeof module === 'object' ) { | ||
|
||
module.exports = Detector; | ||
|
||
} | ||
|
||
|
||
|
||
|
Oops, something went wrong.