Merge pull request #5975 from tsone/half-float-textures

WebGLRenderer: Support for half-float textures.

Merge pull request #5975 from tsone/half-float-textures
WebGLRenderer: Support for half-float textures.
ae684a15 · Mr.doob · 4c050954 · 7df08e0d · ae684a15 · ae684a15
6 changed file
--- a/docs/api/constants/Textures.html
+++ b/docs/api/constants/Textures.html
@@ -49,6 +49,7 @@
 		THREE.UnsignedShortType<br />
 		THREE.IntType<br />
 		THREE.UnsignedIntType<br />
+		THREE.HalfFloatType<br />
 		THREE.FloatType
 		</div>


--- a/docs/api/renderers/WebGLRenderTarget.html
+++ b/docs/api/renderers/WebGLRenderTarget.html
@@ -69,7 +69,7 @@

 		<h3>[property:number type]</h3>
 		<div>
-		The default is THREE.UnsignedByteType. Other valid types (as WebGL allows) are THREE.ByteType, THREE.ShortType, THREE.UnsignedShortType, THREE.IntType, THREE.UnsignedIntType, THREE.FloatType, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type, and THREE.UnsignedShort565Type.
+		The default is THREE.UnsignedByteType. Other valid types (as WebGL allows) are THREE.ByteType, THREE.ShortType, THREE.UnsignedShortType, THREE.IntType, THREE.UnsignedIntType, THREE.HalfFloatType, THREE.FloatType, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type, and THREE.UnsignedShort565Type.
 		</div>
 		
 		<h3>[property:boolean depthBuffer]</h3>

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

--- a/examples/webgl_shaders_ocean2.html
+++ b/examples/webgl_shaders_ocean2.html
@@ -7,20 +7,50 @@
 			body {
 				margin: 0px;
 				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>        
 	</head>
 	<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="js/libs/stats.min.js"></script>
 		<script src="js/libs/dat.gui.min.js"></script>
 		<script src="js/controls/OrbitControls.js"></script>
 		<script src="js/shaders/OceanShaders.js"></script>
 		<script src="js/Ocean.js"></script>		

 		<script>
+			var stats;
 			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').innerHTML = hash;
+			document.getElementById('change-type').innerHTML =
+				'<a href="#" onclick="return change(\'' + types[hash] + '\')">' + types[hash] + '</a>';
+
 			var WINDOW = {
 				ms_Width: 0,
 				ms_Height: 0,
@@ -31,6 +61,9 @@
 				Initialize: function () {
 					this.UpdateSize();

+					stats = new Stats();
+					document.body.appendChild( stats.domElement );
+
 					// Create callbacks from keyboard
 					document.onkeydown = function (inEvent) { WINDOW.CallAction(inEvent.keyCode); };
 					window.onresize = function (inEvent) {
@@ -71,6 +104,12 @@

 			var lastTime = (new Date()).getTime();

+			function change(n) {
+				location.hash = n;
+				location.reload();
+				return false;
+			}
+
 			var DEMO =
 			{
 				ms_Renderer: null,
@@ -110,6 +149,7 @@
 					var origz = -gsize / 2;
 					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_WIND : [10.0, 10.0],
 						INITIAL_CHOPPINESS : 1.5,
@@ -170,7 +210,7 @@
 						this.object.changed = true;
 					});
 				},
-				
+
 				Display: function () {
 					this.ms_Renderer.render(this.ms_Scene, this.ms_Camera);
 				},
@@ -207,7 +247,7 @@
 			};

 			WINDOW.Initialize();
-			
+
 			DEMO.Initialize();

 			WINDOW.ResizeCallback = function (inWidth, inHeight) { DEMO.Resize(inWidth, inHeight); };
@@ -217,6 +257,7 @@

 				requestAnimationFrame( render );
 				DEMO.Update();
+				stats.update();

 			};


--- a/src/Three.js
+++ b/src/Three.js
@@ -149,6 +149,7 @@ THREE.UnsignedShortType = 1012;
 THREE.IntType = 1013;
 THREE.UnsignedIntType = 1014;
 THREE.FloatType = 1015;
+THREE.HalfFloatType = 1025;

 // Pixel types


--- a/src/renderers/WebGLRenderer.js
+++ b/src/renderers/WebGLRenderer.js
@@ -244,6 +244,8 @@ THREE.WebGLRenderer = function ( parameters ) {

 	extensions.get( 'OES_texture_float' );
 	extensions.get( 'OES_texture_float_linear' );
+	extensions.get( 'OES_texture_half_float' );
+	extensions.get( 'OES_texture_half_float_linear' );
 	extensions.get( 'OES_standard_derivatives' );

 	if ( _logarithmicDepthBuffer ) {
@@ -429,6 +431,12 @@ THREE.WebGLRenderer = function ( parameters ) {

 	};

+	this.supportsHalfFloatTextures = function () {
+
+		return extensions.get( 'OES_texture_half_float' );
+
+	};
+
 	this.supportsStandardDerivatives = function () {

 		return extensions.get( 'OES_standard_derivatives' );
@@ -5661,7 +5669,7 @@ THREE.WebGLRenderer = function ( parameters ) {

 		extension = extensions.get( 'EXT_texture_filter_anisotropic' );

-		if ( extension && texture.type !== THREE.FloatType ) {
+		if ( extension && texture.type !== THREE.FloatType && texture.type !== THREE.HalfFloatType ) {

 			if ( texture.anisotropy > 1 || texture.__oldAnisotropy ) {

@@ -6246,6 +6254,14 @@ THREE.WebGLRenderer = function ( parameters ) {
 		if ( p === THREE.UnsignedIntType ) return _gl.UNSIGNED_INT;
 		if ( p === THREE.FloatType ) return _gl.FLOAT;

+		extension = extensions.get( 'OES_texture_half_float' );
+
+		if ( extension !== null ) {
+
+			if ( p === THREE.HalfFloatType ) return extension.HALF_FLOAT_OES;
+
+		}
+
 		if ( p === THREE.AlphaFormat ) return _gl.ALPHA;
 		if ( p === THREE.RGBFormat ) return _gl.RGB;
 		if ( p === THREE.RGBAFormat ) return _gl.RGBA;