Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

217 lines (133 sloc) 4.63 kb
<!doctype html>
<html lang="en">
<head>
<title>three.js webgl - custom attributes [particles][billboards]</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
color: #ffffff;
font-family:Monospace;
font-size:13px;
text-align:center;
font-weight: bold;
background-color: #000000;
margin: 0px;
overflow: hidden;
}
#info {
color: #fff;
position: absolute;
top: 0px; width: 100%;
padding: 5px;
z-index:100;
}
</style>
</head>
<body>
<div id="info"><a href="http://github.com/mrdoob/three.js" target="_blank">three.js</a> - custom attributes example - particles - billboards</div>
<div id="container"></div>
<script src="../build/Three.js"></script>
<script src="js/Detector.js"></script>
<script src="js/Stats.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 * ( 300.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>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var renderer, scene, camera, stats;
var sphere, uniforms, attributes;
var vc1;
var WIDTH = window.innerWidth,
HEIGHT = window.innerHeight;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 45, WIDTH / HEIGHT, 1, 10000 );
camera.position.z = 300;
scene = new THREE.Scene();
scene.add( camera );
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: 0, texture: THREE.ImageUtils.loadTexture( "textures/sprites/disc.png" ) },
};
uniforms.texture.texture.wrapS = uniforms.texture.texture.wrapT = THREE.RepeatWrapping;
var shaderMaterial = new THREE.ShaderMaterial( {
uniforms: uniforms,
attributes: attributes,
vertexShader: document.getElementById( 'vertexshader' ).textContent,
fragmentShader: document.getElementById( 'fragmentshader' ).textContent
});
var radius = 100, segments = 68, rings = 38;
var geometry = new THREE.SphereGeometry( radius, segments, rings );
vc1 = geometry.vertices.length;
var geometry2 = new THREE.CubeGeometry( 0.8 * radius, 0.8 * radius, 0.8 * radius, 10, 10, 10 );
THREE.GeometryUtils.merge( geometry, geometry2 );
sphere = new THREE.ParticleSystem( geometry, shaderMaterial );
sphere.dynamic = true;
sphere.sortParticles = true;
var vertices = sphere.geometry.vertices;
var values_size = attributes.size.value;
var values_color = attributes.ca.value;
for( var v = 0; v < vertices.length; v++ ) {
values_size[ v ] = 10;
values_color[ v ] = new THREE.Color( 0xffffff );
if ( v < vc1 ) {
values_color[ v ].setHSV( 0.01 + 0.1 * ( v / vc1 ), 0.99, ( vertices[ v ].y + radius ) / ( 2 *radius ) );
} else {
values_size[ v ] = 40;
values_color[ v ].setHSV( 0.6, 0.75, 0.5 + vertices[ v ].y / ( 0.8 * radius ) );
}
}
scene.add( sphere );
renderer = new THREE.WebGLRenderer( { clearColor: 0x000000, clearAlpha: 1 } );
renderer.setSize( WIDTH, HEIGHT );
var container = document.getElementById( 'container' );
container.appendChild( renderer.domElement );
stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild( stats.domElement );
}
function animate() {
requestAnimationFrame( animate );
render();
stats.update();
}
function render() {
var time = Date.now() * 0.005;
sphere.rotation.y = 0.02 * time;
sphere.rotation.z = 0.02 * time;
for( var i = 0; i < attributes.size.value.length; i ++ ) {
if ( i < vc1 )
attributes.size.value[ i ] = 16 + 12 * Math.sin( 0.1 * i + time );
}
attributes.size.needsUpdate = true;
renderer.render( scene, camera );
}
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.