fall back to points-material on iOS as using a non-points material ca…

…uses points to be blown up on iOS. mrdoob/three.js#27470
lume · Dec 30, 2023 · dd0b529 · dd0b529
1 parent 7073ef1
commit dd0b529
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 59 deletions.
diff --git a/examples/shelby-gt350-points/example.html b/examples/shelby-gt350-points/example.html
@@ -3,15 +3,12 @@
 <style>
 	html,
 	body {
-		width: 100%;
 		height: 100%;
 		margin: 0;
-		padding: 0;
 		background: #222;
 		--color: 135, 206, 235; /*skyblue*/
 		color: rgb(var(--color));
 		font-family: sans-serif;
-		touch-action: none;
 	}
 	loading-icon {
 		--loading-icon-color: var(--color);
@@ -52,22 +49,6 @@
 	<lume-ambient-light color="white" intensity="0.6"></lume-ambient-light>
 
 	<lume-camera-rig active rotation="0 -150 0" distance="400" max-distance="700" min-distance="100"></lume-camera-rig>
-
-	<!--
-    Use a ply-geometry behavior on an element that accepts geometry (such as
-    <lume-mesh>, <lume-points>, or <lume-line>) to load the geometry points from
-    a PLY file.
-    -->
-	<lume-points
-		id="model"
-		has="ply-geometry phong-material"
-		src="/examples/shelby-gt350-points/shelby-gt350.ply"
-		rotation="90 0 0"
-		position="-250 0 0"
-		size="0 0 0"
-		scale="50 50 50"
-		color="royalblue"
-	></lume-points>
 </lume-scene>
 
 <div info align="center">
@@ -78,19 +59,37 @@
 
 <script type="module">
 	import 'lume'
+
+	const ua = window.navigator.userAgent
+	const is_iOS = ua.match(/iPad/i) || ua.match(/iPhone/i)
+
+	// Rendering shimmering points with a non-points material does not work in
+	// iOS Safari (point sizes are blown up), fallback to points-material on
+	// iOS.
+	const pointsHtml = /*html*/ `
+		<!--
+		Use a ply-geometry behavior on an element that accepts geometry (such as
+		<lume-mesh>, <lume-points>, or <lume-line>) to load the geometry points
+		from a PLY file.
+		-->
+		<lume-points
+			id="model"
+			has="ply-geometry ${is_iOS ? 'points' : 'phong'}-material"
+			src="/examples/shelby-gt350-points/shelby-gt350.ply"
+			rotation="90 0 0"
+			position="-250 0 0"
+			size="0 0 0"
+			scale="50 50 50"
+			color="royalblue"
+		></lume-points>
+	`
+
+	scene.insertAdjacentHTML('beforeend', pointsHtml)
+
 	light.position = (x, y, z, t) => [500 * Math.sin(t * 0.001), 500 * Math.cos(t * 0.001), z]
+
 	model.on('MODEL_LOAD', () => {
 		scene.classList.remove('hidden')
-		loading.classList.add('hidden')
+		loading.remove()
 	})
-
-	const ua = window.navigator.userAgent
-	const is_iOS = ua.match(/iPad/i) || ua.match(/iPhone/i)
-	if (is_iOS) {
-		const info = document.querySelector('[info]')
-		info.insertAdjacentHTML(
-			'beforeend',
-			'⚠️ NOTE! iOS has a WebGL points rendering bug, in case this demo looks glitched out. <a href="https://github.com/mrdoob/three.js/issues/27470">GitHub issue.</a>',
-		)
-	}
 </script>
diff --git a/examples/velodyne-lidar-scan/example.html b/examples/velodyne-lidar-scan/example.html
@@ -19,22 +19,7 @@
 		vertical-angle="30"
 	></lume-camera-rig>
 
-	<lume-gltf-model src="/examples/velodyne-lidar-scan/puck.gltf"></lume-gltf-model>
-
-	<!--
-	Use a ply-behavior on an element with geometry (such as <lume-mesh> or
-	<lume-points>) to load geometry points from a PLY file.
-	-->
-	<lume-points
-		id="model"
-		has="ply-geometry phong-material"
-		src="/examples/velodyne-lidar-scan/shelby-scene.ply"
-		rotation="90 0 0"
-		position="0 0 60"
-		size="0 0 0"
-		scale="50 50 50"
-		color="royalblue"
-	></lume-points>
+	<lume-gltf-model id="gltf" src="/examples/velodyne-lidar-scan/puck.gltf"></lume-gltf-model>
 </lume-scene>
 
 <div info align="center">
@@ -46,10 +31,8 @@
 <style>
 	html,
 	body {
-		width: 100%;
 		height: 100%;
 		margin: 0;
-		padding: 0;
 		background: #222;
 		--color: 228, 20, 255 /*vibrant pink*/;
 		color: rgb(var(--color));
@@ -83,19 +66,39 @@
 
 <script type="module">
 	import 'lume'
+
+	const ua = window.navigator.userAgent
+	const is_iOS = ua.match(/iPad/i) || ua.match(/iPhone/i)
+
+	// Rendering shimmering points with a non-points material does not work in
+	// iOS Safari (point sizes are blown up), fallback to points-material on
+	// iOS.
+	const pointsHtml = /*html*/ `
+		<!--
+		Use a ply-behavior on an element with geometry (such as <lume-mesh> or
+		<lume-points>) to load geometry points from a PLY file.
+		-->
+		<lume-points
+			id="model"
+			has="ply-geometry ${is_iOS ? 'points' : 'phong'}-material"
+			src="/examples/velodyne-lidar-scan/shelby-scene.ply"
+			rotation="90 0 0"
+			position="0 0 60"
+			size="0 0 0"
+			scale="50 50 50"
+			color="royalblue"
+		></lume-points>
+	`
+
+	scene.insertAdjacentHTML('beforeend', pointsHtml)
+
 	light.position = (x, y, z, t) => [500 * Math.sin(t * 0.001), 500 * Math.cos(t * 0.001), z]
-	model.on('MODEL_LOAD', () => {
+
+	Promise.all([
+		new Promise(resolve => gltf.on('MODEL_LOAD', resolve)),
+		new Promise(resolve => model.on('MODEL_LOAD', resolve)),
+	]).then(() => {
 		scene.classList.remove('hidden')
 		loading.classList.add('hidden')
 	})
-
-	const ua = window.navigator.userAgent
-	const is_iOS = ua.match(/iPad/i) || ua.match(/iPhone/i)
-	if (is_iOS) {
-		const info = document.querySelector('[info]')
-		info.insertAdjacentHTML(
-			'beforeend',
-			'⚠️ NOTE! iOS has a WebGL points rendering bug, in case this demo looks glitched out. <a href="https://github.com/mrdoob/three.js/issues/27470">GitHub issue.</a>',
-		)
-	}
 </script>