Merge pull request #19944 from jonobr1/issue-19837

GPGPU Examples Working on iPadOS Safari

examples/jsm/misc/GPUComputationRenderer.d.ts

@@ -26,6 +26,8 @@ export class GPUComputationRenderer {
 
 	constructor( sizeX: number, sizeY: number, renderer: WebGLRenderer );
 
+	setDataType ( type: TextureDataType ): void;
+
 	addVariable( variableName: string, computeFragmentShader: string, initialValueTexture: Texture ): Variable;
 	setVariableDependencies( variable: Variable, dependencies: Variable[] | null ): void;
 

examples/jsm/misc/GPUComputationRenderer.js

@@ -102,7 +102,6 @@ import {
 	ClampToEdgeWrapping,
 	DataTexture,
 	FloatType,
-	HalfFloatType,
 	Mesh,
 	NearestFilter,
 	PlaneBufferGeometry,
@@ -118,6 +117,8 @@ var GPUComputationRenderer = function ( sizeX, sizeY, renderer ) {
 
 	this.currentTextureIndex = 0;
 
+	var dataType = FloatType;
+
 	var scene = new Scene();
 
 	var camera = new Camera();
@@ -133,6 +134,13 @@ var GPUComputationRenderer = function ( sizeX, sizeY, renderer ) {
 	scene.add( mesh );
 
 
+	this.setDataType = function ( type ) {
+
+		dataType = type;
+		return this;
+
+	};
+
 	this.addVariable = function ( variableName, computeFragmentShader, initialValueTexture ) {
 
 		var material = this.createShaderMaterial( computeFragmentShader );
@@ -325,7 +333,7 @@ var GPUComputationRenderer = function ( sizeX, sizeY, renderer ) {
 			minFilter: minFilter,
 			magFilter: magFilter,
 			format: RGBAFormat,
-			type: ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) ? HalfFloatType : FloatType,
+			type: dataType,
 			stencilBuffer: false,
 			depthBuffer: false
 		} );

examples/webgl_gpgpu_birds.html

@@ -483,6 +483,10 @@
 
 				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
 
+				if ( isSafari() ) {
+					gpuCompute.setDataType( THREE.HalfFloatType );
+				}
+
 				var dtPosition = gpuCompute.createTexture();
 				var dtVelocity = gpuCompute.createTexture();
 				fillPositionTexture( dtPosition );
@@ -523,6 +527,10 @@
 
 			}
 
+			function isSafari() {
+				return !!navigator.userAgent.match(/Safari/i) && !navigator.userAgent.match(/Chrome/i);
+			}
+
 			function initBirds() {
 
 				var geometry = new BirdGeometry();

examples/webgl_gpgpu_birds_gltf.html

@@ -431,6 +431,10 @@
 
 				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
 
+				if ( isSafari() ) {
+					gpuCompute.setDataType( THREE.HalfFloatType );
+				}
+
 				var dtPosition = gpuCompute.createTexture();
 				var dtVelocity = gpuCompute.createTexture();
 				fillPositionTexture( dtPosition );
@@ -472,6 +476,10 @@
 
 			}
 
+			function isSafari() {
+				return !!navigator.userAgent.match(/Safari/i) && !navigator.userAgent.match(/Chrome/i);
+			}
+
 			function initBirds() {
 
 				var geometry = BirdGeometry;

examples/webgl_gpgpu_protoplanet.html

@@ -316,6 +316,10 @@
 
 				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
 
+				if ( isSafari() ) {
+					gpuCompute.setDataType( THREE.HalfFloatType );
+				}
+
 				var dtPosition = gpuCompute.createTexture();
 				var dtVelocity = gpuCompute.createTexture();
 
@@ -342,6 +346,10 @@
 
 			}
 
+			function isSafari() {
+				return !!navigator.userAgent.match(/Safari/i) && !navigator.userAgent.match(/Chrome/i);
+			}
+
 			function restartSimulation() {
 
 				var dtPosition = gpuCompute.createTexture();

examples/webgl_gpgpu_water.html

@@ -444,6 +444,10 @@
 
 				gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
 
+				if ( isSafari() ) {
+					gpuCompute.setDataType( THREE.HalfFloatType );
+				}
+
 				var heightmap0 = gpuCompute.createTexture();
 
 				fillTexture( heightmap0 );
@@ -492,6 +496,10 @@
 
 			}
 
+			function isSafari() {
+				return !!navigator.userAgent.match(/Safari/i) && !navigator.userAgent.match(/Chrome/i);
+			}
+
 			function fillTexture( texture ) {
 
 				var waterMaxHeight = 10;