Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

examples: webgl_shaders_ocean2: Added option to use half-float for simulation framebuffers.

tsone 10 years ago
parent
3bbf2ad987
commit
9520cb4522
2 changed files with 47 additions and 5 deletions
Unified View Show Diff Stats
  1. 4 3
      examples/js/Ocean.js
  2. 43 2
      examples/webgl_shaders_ocean2.html

+ 4 - 3
examples/js/Ocean.js
View File 

@@ -41,6 +41,7 @@
 
 	this.matrixNeedsUpdate = false;
 
 	this.matrixNeedsUpdate = false;
 
 	
 	
 	// Setup framebuffer pipeline
 
 	// Setup framebuffer pipeline
 
+	var renderTargetType = optionalParameter(options.USE_HALF_FLOAT, false) ? THREE.HalfFloatType : THREE.FloatType;
 
 	var LinearClampParams = {
 
 	var LinearClampParams = {
 
 		minFilter: THREE.LinearFilter,
 
 		minFilter: THREE.LinearFilter,
 
 		magFilter: THREE.LinearFilter,
 
 		magFilter: THREE.LinearFilter,
 
@@ -50,7 +51,7 @@
 
 		stencilBuffer: false,
 
 		stencilBuffer: false,
 
 		depthBuffer: false,
 
 		depthBuffer: false,
 
 		premultiplyAlpha: false,
 
 		premultiplyAlpha: false,
 
-		type: THREE.FloatType
 
+		type: renderTargetType
 
 	};
 
 	};
 
 	var NearestClampParams = {
 
 	var NearestClampParams = {
 
 		minFilter: THREE.NearestFilter,
 
 		minFilter: THREE.NearestFilter,
 
@@ -61,7 +62,7 @@
 
 		stencilBuffer: false,
 
 		stencilBuffer: false,
 
 		depthBuffer: false,
 
 		depthBuffer: false,
 
 		premultiplyAlpha:false,
 
 		premultiplyAlpha:false,
 
-		type: THREE.FloatType
 
+		type: renderTargetType
 
 	};
 
 	};
 
 	var NearestRepeatParams = {
 
 	var NearestRepeatParams = {
 
 		minFilter: THREE.NearestFilter,
 
 		minFilter: THREE.NearestFilter,
 
@@ -72,7 +73,7 @@
 
 		stencilBuffer: false,
 
 		stencilBuffer: false,
 
 		depthBuffer: false,
 
 		depthBuffer: false,
 
 		premultiplyAlpha: false,
 
 		premultiplyAlpha: false,
 
-		type: THREE.FloatType
 
+		type: renderTargetType
 
 	};
 
 	};
 
 	this.initialSpectrumFramebuffer = new THREE.WebGLRenderTarget(this.resolution, this.resolution, NearestRepeatParams);
 
 	this.initialSpectrumFramebuffer = new THREE.WebGLRenderTarget(this.resolution, this.resolution, NearestRepeatParams);
 
 	this.spectrumFramebuffer = new THREE.WebGLRenderTarget(this.resolution, this.resolution, NearestClampParams);
 
 	this.spectrumFramebuffer = new THREE.WebGLRenderTarget(this.resolution, this.resolution, NearestClampParams);

+ 43 - 2
examples/webgl_shaders_ocean2.html
View File 

@@ -7,20 +7,50 @@
 
 			body {
 
 			body {
 
 				margin: 0px;
 
 				margin: 0px;
 
 				overflow: hidden;
 
 				overflow: hidden;
 
+				font-family: Monospace;
 
+				text-align: center;
 
 			}
 
 			}
 
+			#info {
 
+				color: #fff;
 
+				position: absolute;
 
+				top: 10px;
 
+				width: 100%;
 
+			}
 
+			a {
 
+				color: #09f;
 
+			}
 
+			#type-status {
 
+				font-weight: bold;
 
+			}
 
+			#stats { position: absolute; top:0; left: 0 }
 
 		</style>        
 		</style>        
 	</head>
 
 	</head>
 
 	<body>
 
 	<body>
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - webgl ocean simulation<br/>
 
+			current simulation framebuffers type is <span id="type-status"></span><br/>
 
+			change type to <span id="change-type"></span>
 
+		</div>
 
 
 
 		<script src="../build/three.min.js"></script>		
 		<script src="../build/three.min.js"></script>		
+		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script src="js/libs/dat.gui.min.js"></script>
 
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/controls/OrbitControls.js"></script>
 
 		<script src="js/shaders/OceanShaders.js"></script>
 
 		<script src="js/shaders/OceanShaders.js"></script>
 
 		<script src="js/Ocean.js"></script>		
 		<script src="js/Ocean.js"></script>		
 
 
 		<script>
 
 		<script>
 
+			var stats;
 
 			var lastTime = (new Date()).getTime();
 
 			var lastTime = (new Date()).getTime();
 
 
 
+			var types = { 'float': 'half-float', 'half-float': 'float' };
 
+			var hash = document.location.hash.substr( 1 );
 
+			if (!(hash in types)) hash = 'float';
 
+
 
+			document.getElementById('type-status').innerText = hash;
 
+			document.getElementById('change-type').innerHTML =
 
+				'<a href="#" onclick="return change(\'' + types[hash] + '\')">' + types[hash] + '</a>';
 
+
 
 			var WINDOW = {
 
 			var WINDOW = {
 
 				ms_Width: 0,
 
 				ms_Width: 0,
 
 				ms_Height: 0,
 
 				ms_Height: 0,
 
@@ -31,6 +61,9 @@
 
 				Initialize: function () {
 
 				Initialize: function () {
 
 					this.UpdateSize();
 
 					this.UpdateSize();
 
 
 
+					stats = new Stats();
 
+					document.body.appendChild( stats.domElement );
 
+
 
 					// Create callbacks from keyboard
 
 					// Create callbacks from keyboard
 
 					document.onkeydown = function (inEvent) { WINDOW.CallAction(inEvent.keyCode); };
 
 					document.onkeydown = function (inEvent) { WINDOW.CallAction(inEvent.keyCode); };
 
 					window.onresize = function (inEvent) {
 
 					window.onresize = function (inEvent) {
 
@@ -71,6 +104,12 @@
 
 
 
 			var lastTime = (new Date()).getTime();
 
 			var lastTime = (new Date()).getTime();
 
 
 
+			function change(n) {
 
+				location.hash = n;
 
+				location.reload();
 
+				return false;
 
+			}
 
+
 
 			var DEMO =
 
 			var DEMO =
 
 			{
 
 			{
 
 				ms_Renderer: null,
 
 				ms_Renderer: null,
 
@@ -110,6 +149,7 @@
 
 					var origz = -gsize / 2;
 
 					var origz = -gsize / 2;
 
 					this.ms_Ocean = new THREE.Ocean(this.ms_Renderer, this.ms_Camera, this.ms_Scene,
 
 					this.ms_Ocean = new THREE.Ocean(this.ms_Renderer, this.ms_Camera, this.ms_Scene,
 
 					{
 
 					{
 
+						USE_HALF_FLOAT : hash === 'half-float',
 
 						INITIAL_SIZE : 256.0,
 
 						INITIAL_SIZE : 256.0,
 
 						INITIAL_WIND : [10.0, 10.0],
 
 						INITIAL_WIND : [10.0, 10.0],
 
 						INITIAL_CHOPPINESS : 1.5,
 
 						INITIAL_CHOPPINESS : 1.5,
 
@@ -170,7 +210,7 @@
 
 						this.object.changed = true;
 
 						this.object.changed = true;
 
 					});
 
 					});
 
 				},
 
 				},
 
-				
+
 
 				Display: function () {
 
 				Display: function () {
 
 					this.ms_Renderer.render(this.ms_Scene, this.ms_Camera);
 
 					this.ms_Renderer.render(this.ms_Scene, this.ms_Camera);
 
 				},
 
 				},
 
@@ -207,7 +247,7 @@
 
 			};
 
 			};
 
 
 
 			WINDOW.Initialize();
 
 			WINDOW.Initialize();
 
-			
+
 
 			DEMO.Initialize();
 
 			DEMO.Initialize();
 
 
 
 			WINDOW.ResizeCallback = function (inWidth, inHeight) { DEMO.Resize(inWidth, inHeight); };
 
 			WINDOW.ResizeCallback = function (inWidth, inHeight) { DEMO.Resize(inWidth, inHeight); };
 
@@ -217,6 +257,7 @@
 
 
 
 				requestAnimationFrame( render );
 
 				requestAnimationFrame( render );
 
 				DEMO.Update();
 
 				DEMO.Update();
 
+				stats.update();
 
 
 
 			};
 
 			};