Add a note to points demos regarding a WebGL bug in Safari

lume · Dec 30, 2023 · 710b9d4 · 710b9d4
1 parent bed083e
commit 710b9d4
Show file tree

Hide file tree

Showing 4 changed files with 199 additions and 136 deletions.
diff --git a/examples/shelby-gt350-points/README.md b/examples/shelby-gt350-points/README.md
@@ -1,70 +1,3 @@
 # Shelby GT350 Points
 
-<live-code class="full" mode="html>iframe" debounce="200">
- <template>
- <base href="${host}" /><script src="./importmap.js"></script>
-
- <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);
- position: absolute;
- top: 50%; left: 50%;
- transform: translate(-50%, -50%);
- width: 10px; height: 10px;
- }
- [info] {
- position: absolute; top: 0; left: 0; width: 100%;
- box-sizing: border-box; padding: 10px;
- }
- .hidden { visibility: hidden; }
- </style>
-
-<loading-icon id="loading"></loading-icon>
-
- <script>
- import('lume/dist/examples/LoadingIcon.js')
- </script>
-
- <lume-scene id="scene" perspective="800" webgl class="hidden">
- <lume-element3d position="-250 0 0">
-  <lume-point-light id="light" intensity="3" color="limegreen"></lume-point-light>
- </lume-element3d>
- <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-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/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">Ford Shelby GT350 scanned with a Velodyne laser radar scanner (lidar).</div>
-
- <script type="module">
- import 'lume'
- 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')
- })
- </script>
- </template>
-</live-code>
+<live-code src="./example.html"></live-code>
diff --git a/examples/shelby-gt350-points/example.html b/examples/shelby-gt350-points/example.html
@@ -0,0 +1,96 @@
+<script src="../../importmap.js"></script>
+
+<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);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 10px;
+ height: 10px;
+ }
+ [info] {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 10px;
+ }
+ .hidden {
+ visibility: hidden;
+ }
+ a {
+ color: cyan !important;
+ }
+</style>
+
+<loading-icon id="loading"></loading-icon>
+
+<script>
+ import('lume/dist/examples/LoadingIcon.js')
+</script>
+
+<lume-scene id="scene" perspective="800" webgl class="hidden">
+ <lume-element3d position="-250 0 0">
+ <lume-point-light id="light" intensity="3" color="limegreen"></lume-point-light>
+ </lume-element3d>
+
+ <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">
+ Ford Shelby GT350 scanned with a Velodyne laser radar scanner (lidar).
+ <br />
+ <br />
+</div>
+
+<script type="module">
+ import 'lume'
+ 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')
+ })
+
+ 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/README.md b/examples/velodyne-lidar-scan/README.md
@@ -1,70 +1,3 @@
 # Velodyne Lidar Scan
 
-<live-code class="full" mode="html>iframe" debounce="200">
-<template>
-<base href="${host}" /><script src="./importmap.js"></script>
-
-<loading-icon id="loading"></loading-icon>
-
-<script>
- import('lume/dist/examples/LoadingIcon.js')
-</script>
-
-<lume-scene id="scene" perspective="800" webgl enable-css="false" class="hidden">
- <lume-point-light id="light" position="200 -200 200" intensity="3" color="deeppink"></lume-point-light>
- <lume-ambient-light color="white" intensity="0.6"></lume-ambient-light>
- <lume-camera-rig active rotation="0 -110 0" distance="500" max-distance="1200" min-distance="100" 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-scene>
-
-<div info align="center">A scene scanned with a Velodyne laser radar scanner (lidar),<br />focused on a Ford Shelby GT350.</div>
-
-<style>
- html,
- body {
- width: 100%; height: 100%;
- margin: 0; padding: 0;
- background: #222;
- --color: 228, 20, 255 /*vibrant pink*/;
- color: rgb(var(--color)); font-family: sans-serif;
- touch-action: none;
- }
- loading-icon {
- --loading-icon-color: var(--color);
- position: absolute;
- top: 50%; left: 50%;
- transform: translate(-50%, -50%);
- width: 10px; height: 10px;
- }
- [info] {
- position: absolute; top: 0; left: 0; width: 100%;
- box-sizing: border-box; padding: 10px;
- }
- .hidden { visibility: hidden; }
-</style>
-
-<script type="module">
- import 'lume'
- 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')
- })
-</script>
-
-</template>
-</live-code>
+<live-code src="./example.html"></live-code>
diff --git a/examples/velodyne-lidar-scan/example.html b/examples/velodyne-lidar-scan/example.html
@@ -0,0 +1,101 @@
+<script src="../../importmap.js"></script>
+
+<loading-icon id="loading"></loading-icon>
+
+<script>
+ import('lume/dist/examples/LoadingIcon.js')
+</script>
+
+<lume-scene id="scene" perspective="800" webgl enable-css="false" class="hidden">
+ <lume-point-light id="light" position="200 -200 200" intensity="3" color="deeppink"></lume-point-light>
+ <lume-ambient-light color="white" intensity="0.6"></lume-ambient-light>
+
+ <lume-camera-rig
+ active
+ rotation="0 -110 0"
+ distance="500"
+ max-distance="1200"
+ min-distance="100"
+ 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-scene>
+
+<div info align="center">
+ A scene scanned with a Velodyne laser radar scanner (lidar),<br />focused on a Ford Shelby GT350.
+ <br />
+ <br />
+</div>
+
+<style>
+ html,
+ body {
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background: #222;
+ --color: 228, 20, 255 /*vibrant pink*/;
+ color: rgb(var(--color));
+ font-family: sans-serif;
+ touch-action: none;
+ }
+ loading-icon {
+ --loading-icon-color: var(--color);
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 10px;
+ height: 10px;
+ }
+ [info] {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 10px;
+ }
+ .hidden {
+ visibility: hidden;
+ }
+ a {
+ color: cyan !important;
+ }
+</style>
+
+<script type="module">
+ import 'lume'
+ 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')
+ })
+
+ 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>