three.js ~ example ~ Mr.doob

2012-01-05 ~

HTML

<!DOCTYPE html>
<html lang='en'>
	<head>
		<title>Culling with boundingSpheres</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;
			}
		</style>
	</head>
	<body>
		<script id='vertexShader' type='x-shader/x-vertex'>
			precision highp float;			
			uniform sampler2D map;	
			uniform vec3 canvasSize;	
			attribute vec3 color;
			attribute float radius;
			// varyings
			varying vec3 vColor;
			varying float vRadius;
		 
			void main() {
				vec4 vPos2 =  modelViewMatrix * vec4( position, 1.0 );
				vec4 vCameraPosition = modelViewMatrix * vec4( cameraPosition, 1.0);
				float dist = distance(vPos2.xyz, vCameraPosition.xyz);
				vColor = color;
				gl_Position = projectionMatrix * vPos2;
				gl_PointSize = canvasSize.y/(dist * tan(canvasSize.z)/(radius*2.0));
			}
		</script>
		 
		<script id='fragmentShader' type='x-shader/x-fragment'>
			precision highp float;
			uniform sampler2D texture;
			varying vec3 vColor;
			varying float vRadius;

			void main() {
				vec4 textureColor = texture2D( texture, gl_PointCoord );				
				vec4 vertexColor = vec4( vColor, 1.0 );				
				if (textureColor.r == 0.0 && textureColor.g == 0.0 && textureColor.b == 0.0){
					gl_FragColor = vertexColor;
				} else {
					discard;
				}
			}
		</script>
	 
		<!--
		<script src='src/three.js'></script>
		<script src='src/OrbitControlsDolly.js'></script>
		-->
		
		<script src='https://threejs.org/build/three.js'></script>
		<script src='https://threejs.org/examples/js/controls/OrbitControls.js'></script>
	 
		<script>
			var scene, camera, renderer, controls, frustum;
			var frustumArrayValues;
			var uniforms;
			var canvas, gl, context, context2; 
			var image = new Image();
			var stats =...