Threejs着色器基本使用样例改造

<!DOCTYPE html>

<html lang="en">

	<head>

		<title>three.js webgl - buffer geometry custom attributes - particles</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;

				background-color: #000000;

				margin: 0px;

				overflow: hidden;

			}

			#info {

				position: absolute;

				top: 0px;

				width: 100%;

				padding: 5px;

				font-family: Monospace;

				font-size: 13px;

				text-align: center;

				font-weight: bold;

			}

			a {

				color: #fff;

			}

		</style>

	</head>

	<body>

		<div id="container"></div>

		<script src="../build/three.js"></script>

		<script src="js/Detector.js"></script>

		<script type="x-shader/x-vertex" id="vertexshader">

			attribute float size;

			attribute vec3 customColor;

			varying vec3 vColor;

			void main() {

				vColor = customColor;

				vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

				gl_PointSize = size * ( 300.0 / mvPosition.x );

				gl_Position = projectionMatrix * mvPosition;

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			uniform sampler2D texture;

			varying vec3 vColor;

			void main() {

				gl_FragColor = vec4( vColor, 1.0 );

				gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );

			}

		</script>

		<script>

		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

		var renderer, scene, camera, stats;

		var particleSystem, uniforms, geometry;

		var particles = 200;

		var WIDTH = window.innerWidth;

		var HEIGHT = window.innerHeight;

		init();

		animate();

		function init() {

			camera = new THREE.PerspectiveCamera( 40, WIDTH / HEIGHT, 1, 10000 );

			camera.position.z = 500;

			scene = new THREE.Scene();

			uniforms = {

				texture:   { value: new THREE.TextureLoader().load( "textures/sprites/spark1.png" ) }

			};

			var shaderMaterial = new THREE.ShaderMaterial( {

				uniforms:       uniforms,

				vertexShader:   document.getElementById( 'vertexshader' ).textContent,

				fragmentShader: document.getElementById( 'fragmentshader' ).textContent,

				transparent:    true

			});

			var radius = 400;

			var geometry = new THREE.BufferGeometry();

			var positions = new Float32Array( particles * 3 );

			var colors = new Float32Array( particles * 3 );

			var sizes = new Float32Array( particles );

			for ( var i = 0, i3 = 0; i < particles; i ++, i3 += 3 ) {

				positions[ i3 + 0 ] = ( Math.random() * 2 - 1 ) * radius;

				positions[ i3 + 1 ] = ( Math.random() * 2 - 1 ) * radius;

				positions[ i3 + 2 ] = 0;

				colors[ i3 + 0 ] = 1;

				colors[ i3 + 1 ] = 1;

				colors[ i3 + 2 ] = 1;

				sizes[ i ] = 10;

			}

			geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );

			geometry.addAttribute( 'customColor', new THREE.BufferAttribute( colors, 3 ) );

			geometry.addAttribute( 'size', new THREE.BufferAttribute( sizes, 1 ) );

			particleSystem = new THREE.Points( geometry, shaderMaterial );

			scene.add( particleSystem );

			renderer = new THREE.WebGLRenderer();

			renderer.setPixelRatio( window.devicePixelRatio );

			renderer.setSize( WIDTH, HEIGHT );

			var container = document.getElementById( 'container' );

			container.appendChild( renderer.domElement );

			window.addEventListener( 'resize', onWindowResize, false );

		}

		function onWindowResize() {

			camera.aspect = window.innerWidth / window.innerHeight;

			camera.updateProjectionMatrix();

			renderer.setSize( window.innerWidth, window.innerHeight );

		}

		function animate() {

			requestAnimationFrame( animate );

			renderer.render( scene, camera );

		}

	</script>

</body>

</html>
threejs

Threejs着色器基本使用样例改造
