feat(website): Add 'devices' prop to DeviceTabs component (#2020)

visgl · Mar 12, 2024 · 8a27179 · 8a27179
1 parent 7504469
commit 8a27179
Show file tree

Hide file tree

Showing 14 changed files with 39 additions and 23 deletions.
diff --git a/docs/api-guide/gpu/gpu-buffers.md b/docs/api-guide/gpu/gpu-buffers.md
@@ -6,7 +6,7 @@
 The ability to copy memory between CPU, buffers and textures
 
 | Dimension             | WebGPU | WebGL2 | Description                                           |
-| --------------------- | ------ | ------ | ----------------------------------------------------- |  |
+| --------------------- | ------- | ------- | ----------------------------------------------------- |
 | `writeBuffer`         | ✅      | ✅      | Read a buffer synchronously                           |
 | `readBuffer (sync)`   | ❌      | ✅      | Read a buffer synchronously                           |
 | `readBuffer (async)`  | ✅      | ❌ \*   | Read a buffer asynchronously                          |

diff --git a/docs/tutorials/hello-instancing.mdx b/docs/tutorials/hello-instancing.mdx
@@ -9,7 +9,7 @@ In this tutorial, we'll work through how to do instanced drawing with luma.gl's
 The tutorial pages have not yet been updated for luma.gl v9. 
 :::
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <HelloInstancingExample />
 
 

diff --git a/docs/tutorials/hello-triangle.mdx b/docs/tutorials/hello-triangle.mdx
@@ -9,7 +9,7 @@ This tutorial will demonstrate how to draw a triangle using luma.gl's high-level
 The tutorial pages have not yet been updated for luma.gl v9. 
 :::
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <HelloTriangleExample />
 
 It is assumed you've set up your development environment as described in

diff --git a/docs/tutorials/lighting.mdx b/docs/tutorials/lighting.mdx
@@ -9,7 +9,7 @@ This tutorial adds some lighting to enhance the feeling of 3D in the scene.
 The tutorial pages have not yet been updated for luma.gl v9. 
 :::
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <LightingExample />
 
 To add lighting, we'll use one of built-in luma.gl shader modules for the first time.

diff --git a/docs/tutorials/shader-hooks.mdx b/docs/tutorials/shader-hooks.mdx
@@ -10,7 +10,7 @@ The tutorial pages have not yet been updated for luma.gl v9.
 In this tutorial, we'll focus on a key feature of the shader module system:
 the ability to modify the behavior of the shaders that use the shader modules via **shader hooks**. 
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <ShaderHooksExample />
 
 In the [previous tutorial](/docs/tutorials/shader-modules), we used shader modules 

diff --git a/docs/tutorials/shader-modules.mdx b/docs/tutorials/shader-modules.mdx
@@ -10,7 +10,7 @@ reusable bits of functionality and dynamically insert them into your shaders.
 The tutorial pages have not yet been updated for luma.gl v9. 
 :::
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <ShaderModulesExample />
 
 

diff --git a/website/content/examples/api/animation.mdx b/website/content/examples/api/animation.mdx
@@ -3,5 +3,5 @@ import {AnimationExample} from '@site';
 
 # Animation
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <AnimationExample />
diff --git a/website/content/examples/showcase/persistence.mdx b/website/content/examples/showcase/persistence.mdx
@@ -3,5 +3,5 @@ import {PersistenceExample} from '@site';
 
 # Persistence
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <PersistenceExample />
diff --git a/website/content/examples/tutorials/hello-gltf.mdx b/website/content/examples/tutorials/hello-gltf.mdx
@@ -3,5 +3,5 @@ import {HelloGLTFExample} from '@site';
 
 # Hello glTF
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <HelloGLTFExample />
diff --git a/website/content/examples/tutorials/hello-instancing.mdx b/website/content/examples/tutorials/hello-instancing.mdx
@@ -3,5 +3,5 @@ import {HelloInstancingExample} from '@site';
 
 # Hello Instancing
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <HelloInstancingExample />
diff --git a/website/content/examples/tutorials/lighting.mdx b/website/content/examples/tutorials/lighting.mdx
@@ -3,5 +3,5 @@ import {LightingExample} from '@site';
 
 # Hello Lighting
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <LightingExample />
diff --git a/website/content/examples/tutorials/shader-hooks.mdx b/website/content/examples/tutorials/shader-hooks.mdx
@@ -3,5 +3,5 @@ import {ShaderHooksExample} from '@site';
 
 # Shader Hooks
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <ShaderHooksExample />
diff --git a/website/content/examples/tutorials/shader-modules.mdx b/website/content/examples/tutorials/shader-modules.mdx
@@ -3,5 +3,5 @@ import {ShaderModulesExample} from '@site';
 
 # Shader Modules
 
-<DeviceTabs />
+<DeviceTabs devices={["webgl2"]} />
 <ShaderModulesExample />
diff --git a/website/src/react-luma/components/device-tabs.tsx b/website/src/react-luma/components/device-tabs.tsx
@@ -4,23 +4,39 @@ import BrowserOnly from '@docusaurus/BrowserOnly';
 import {Tabs, Tab} from './tabs';
 import {useStore} from '../store/device-store';
 
-export const DeviceTabsPriv = props => {
+interface DeviceTabsProps {
+  devices?: ('webgl2' | 'webgpu')[];
+}
+
+const DEFAULT_DEVICE_TABS_PROPS: Required<DeviceTabsProps> = {
+  devices: ['webgl2', 'webgpu']
+};
+
+export const DeviceTabsPriv = (props?: DeviceTabsProps) => {
+  props = {...DEFAULT_DEVICE_TABS_PROPS, ...props};
   const deviceType = useStore(state => state.deviceType);
   const deviceError = useStore(state => state.deviceError);
   const setDeviceType = useStore(state => state.setDeviceType);
 
   return (
     <Tabs selectedItem={deviceType} setSelectedItem={setDeviceType}>
-      <Tab key="WebGL2" title="WebGL2" tag="webgl">
-        {/* <img height="80" src="https://raw.github.com/visgl/deck.gl-data/master/images/whats-new/webgl2.jpg" />*/}
-        {deviceError}
-      </Tab>
-      <Tab key="WebGPU" title="WebGPU" tag="webgpu">
-        {/* <img height="80" src="https://raw.githubusercontent.com/gpuweb/gpuweb/3b3a1632ff1ad6a573330a58710e341bb9d65576/logo/webgpu-horizontal.svg" /> */}
-        {deviceError}
-      </Tab>
+      {props.devices.includes('webgl2') && (
+        <Tab key="WebGL2" title="WebGL2" tag="webgl">
+          {/* <img height="80" src="https://raw.github.com/visgl/deck.gl-data/master/images/whats-new/webgl2.jpg" />*/}
+          {deviceError}
+        </Tab>
+      )}
+
+      {props.devices.includes('webgpu') && (
+        <Tab key="WebGPU" title="WebGPU" tag="webgpu">
+          {/* <img height="80" src="https://raw.githubusercontent.com/gpuweb/gpuweb/3b3a1632ff1ad6a573330a58710e341bb9d65576/logo/webgpu-horizontal.svg" /> */}
+          {deviceError}
+        </Tab>
+      )}
     </Tabs>
   );
 };
 
-export const DeviceTabs = () => <BrowserOnly>{() => <DeviceTabsPriv />}</BrowserOnly>;
+export const DeviceTabs = (props?: DeviceTabsProps) => (
+  <BrowserOnly>{() => <DeviceTabsPriv {...props} />}</BrowserOnly>
+);