Added crappy grass WebGL example.

Added `sortElements` boolean (true by default) to `CanvasRenderer` and `SVGRenderer`. Also added `sortObjects` boolean but not being used yet.

Added crappy grass WebGL example.
Added `sortElements` boolean (true by default) to `CanvasRenderer` and `SVGRenderer`. Also added `sortObjects` boolean but not being used yet.
c13377d7 · Mr.doob · a6483156 · c13377d7 · c13377d7 · c13377d7
7 changed file
--- a/build/Three.js
+++ b/build/Three.js
--- a/build/ThreeDebug.js
+++ b/build/ThreeDebug.js
--- a/build/ThreeExtras.js
+++ b/build/ThreeExtras.js
--- a/examples/materials_grass.html
+++ b/examples/materials_grass.html
+<!DOCTYPE HTML>
+<html lang="en">
+	<head>
+		<title>three.js - grass</title>
+		<meta charset="utf-8">
+		<style type="text/css">
+			body {
+				background:#030;
+				color:#fff;
+				padding:0;
+				margin:0;
+				overflow:hidden;
+				font-family:georgia;
+				text-align:center;
+			}
+		</style>
+	</head>
+
+	<body>
+		<script type="text/javascript" src="../build/Three.js"></script>
+		<script type="text/javascript" src="../src/extras/primitives/Plane.js"></script>
+
+
+		<script type="text/javascript">
+
+			var camera, scene, renderer,
+			mesh, levels = [];
+
+			init();
+			setInterval( loop, 1000 / 60 );
+
+			function init() {
+
+				camera = new THREE.Camera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.y = 75;
+				camera.position.z = 100;
+
+				scene = new THREE.Scene();
+
+				var geometry = new Plane( 100, 100 );
+
+				var texture = generateTextureBase();
+
+				for ( var i = 0; i < 10; i ++ ) {
+
+					mesh = levels[ i ] = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: new THREE.Texture( generateTextureLevel( texture ), new THREE.UVMapping(), THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping ) } ) );
+					mesh.rotation.x = - 90 * ( Math.PI / 180 );
+					mesh.position.y = i * 0.5;
+					scene.addObject( mesh );
+
+				}
+
+				renderer = new THREE.WebGLRenderer();
+				renderer.sortObjects = false;
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				document.body.appendChild( renderer.domElement );
+
+			}
+
+			function generateTextureBase() {
+
+				var canvas = document.createElement( 'canvas' );
+				canvas.loaded = true;
+				canvas.width = 1024;
+				canvas.height = 1024;
+
+				var context = canvas.getContext( '2d' );
+
+				for ( var i = 0; i < 20000; i ++ ) {
+
+					context.fillStyle = 'rgba(0,' + Math.floor( Math.random() * 64 + 32 ) + ',16,1)';
+					context.beginPath();
+					context.arc( Math.random() * canvas.width, Math.random() * canvas.height, Math.random() * 3 + 1, 0, Math.PI * 2, true );
+					context.closePath();
+					context.fill();
+
+				}
+
+				context.globalAlpha = 0.1;
+				context.globalCompositeOperation = 'lighter';
+
+				return canvas;
+			}
+
+			function generateTextureLevel( texture ) {
+
+				texture.getContext( '2d' ).drawImage( texture, 0, 0 );
+
+				var canvas = document.createElement( 'canvas' );
+				canvas.loaded = true;
+				canvas.width = texture.width;
+				canvas.height = texture.height;
+
+				canvas.getContext( '2d' ).drawImage( texture, 0, 0 );
+
+				return canvas;
+
+			}
+
+			function loop() {
+
+				var time = new Date().getTime() / 6000;
+
+				camera.position.x = 100 * Math.cos( time );
+				camera.position.z = 100 * Math.sin( time );
+
+				for ( var i = 0, l = levels.length; i < l; i ++ ) {
+
+					mesh = levels[ i ];
+					mesh.position.x = Math.sin( time * 4 ) * i * i * 0.02;
+					mesh.position.z = Math.cos( time * 6 ) * i * i * 0.02;
+
+				}
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
--- a/src/renderers/CanvasRenderer.js
+++ b/src/renderers/CanvasRenderer.js
@@ -66,7 +66,10 @@ THREE.CanvasRenderer = function () {
 	_gradientMapQuality --; // Fix UVs

 	this.domElement = _canvas;
+
 	this.autoClear = true;
+	this.sortObjects = true;
+	this.sortElements = true;

 	this.setSize = function ( width, height ) {

@@ -104,7 +107,7 @@ THREE.CanvasRenderer = function () {

 		this.autoClear && this.clear();

-		_renderList = _projector.projectScene( scene, camera, true );
+		_renderList = _projector.projectScene( scene, camera, this.sortElements );

 		/* DEBUG
 		_context.fillStyle = 'rgba(0, 255, 255, 0.5)';

--- a/src/renderers/SVGRenderer.js
+++ b/src/renderers/SVGRenderer.js
@@ -29,7 +29,10 @@ THREE.SVGRenderer = function () {
 	_quality = 1;

 	this.domElement = _svg;
+
 	this.autoClear = true;
+	this.sortObjects = true;
+	this.sortElements = true;

 	this.setQuality = function( quality ) {

@@ -75,7 +78,7 @@ THREE.SVGRenderer = function () {

 		}

-		_renderList = _projector.projectScene( scene, camera, true );
+		_renderList = _projector.projectScene( scene, camera, this.sortElements );

 		_pathCount = 0; _circleCount = 0; _lineCount = 0;


--- a/src/renderers/WebGLRenderer2.js
+++ b/src/renderers/WebGLRenderer2.js
@@ -44,7 +44,9 @@ THREE.WebGLRenderer2 = function () {
 	_gl.clearColor( 0, 0, 0, 0 );

 	this.domElement = _canvas;
+
 	this.autoClear = true;
+	this.sortObjects = true;

 	this.setSize = function ( width, height ) {

@@ -83,7 +85,7 @@ THREE.WebGLRenderer2 = function () {
 		}
 		*/

-		_renderList = _projector.projectObjects( scene, camera, true );
+		_renderList = _projector.projectObjects( scene, camera, this.sortObjects );

 		for ( o = 0, ol = _renderList.length; o < ol; o++ ) {

@@ -468,6 +470,8 @@ THREE.WebGLRenderer2 = function () {

 					pfs += 'uniform sampler2D tMap;\n';
 					pfs += 'varying vec2 vUv;\n';
+					// fs += 'vec4 mapColor = texture2D( tMap, vUv );\n';
+					// fs += 'mapColor.xyz *= mapColor.w;\n';
 					fs += 'gl_FragColor *= texture2D( tMap, vUv );\n';

 					identifiers.push( 'tMap' );