Add WebGPU section

Tresjs · Jul 19, 2024 · 163df42 · 163df42
1 parent dc6c3fd
commit 163df42
Show file tree

Hide file tree

Showing 5 changed files with 5,593 additions and 6,933 deletions.
diff --git a/playground/src/pages/index.vue b/playground/src/pages/index.vue
@@ -1,82 +1,83 @@
 <script setup lang="ts">
 import {
-  advancedRoutes,
-  basicRoutes,
-  cameraRoutes,
-  eventsRoutes,
-  issuesRoutes,
-  loaderRoutes,
-  miscRoutes,
-  modelsRoutes,
+	advancedRoutes,
+	basicRoutes,
+	cameraRoutes,
+	eventsRoutes,
+	issuesRoutes,
+	loaderRoutes,
+	miscRoutes,
+	modelsRoutes,
+	webgpuRoutes,
 } from '../router/routes'
 
 const sections = [
-  { icon: '📦', title: 'Basic', routes: basicRoutes },
-  { icon: '🤓', title: 'Advanced', routes: advancedRoutes },
-  { icon: '📣', title: 'Events', routes: eventsRoutes },
-  { icon: '📷', title: 'Camera', routes: cameraRoutes },
-  { icon: '🛜', title: 'Loaders', routes: loaderRoutes },
-  { icon: '🐇', title: 'Models', routes: modelsRoutes },
-  { icon: '🤪', title: 'Misc', routes: miscRoutes },
-  { icon: '🔬', title: 'Issues', routes: issuesRoutes },
+	{ icon: '📦', title: 'Basic', routes: basicRoutes },
+	{ icon: '🤓', title: 'Advanced', routes: advancedRoutes },
+	{ icon: '📣', title: 'Events', routes: eventsRoutes },
+	{ icon: '📷', title: 'Camera', routes: cameraRoutes },
+	{ icon: '🛜', title: 'Loaders', routes: loaderRoutes },
+	{ icon: '🐇', title: 'Models', routes: modelsRoutes },
+	{ icon: '🤪', title: 'Misc', routes: miscRoutes },
+	{ icon: '🔬', title: 'Issues', routes: issuesRoutes },
+	{ icon: '🔮', title: 'WebGPU', routes: webgpuRoutes },
 ]
 </script>
 
 <template>
-  <div
-    class="container mx-auto max-w-3xl font-sans text-xs color-gray bg-white"
-  >
-    <div class="mx-4">
-      <div
-        class="mt-24 mb-12 text-center align-baseline items-center gap-6 sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse sm:justify-left"
-      >
-        <div>
-          <img
-            src="/logo.svg"
-            alt="TresJS logo"
-            class="max-w-24 sm:max-w-48 align-baseline"
-          />
-        </div>
-        <div class="sm:w-2/3">
-          <h1
-            class="w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3 sm:mx-none sm:w-1/2 sm:max-w-72"
-          >
-            <span class="text-tres-primary">TresJS</span> Playground
-          </h1>
-          <p class="text-lg">Testing zone for TresJS/core components</p>
-        </div>
-      </div>
-      <div
-        class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4"
-      >
-        <div
-          v-for="{ title, routes, icon } in sections"
-          :key="title"
-          class="p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded sm:my-0"
-        >
-          <div
-            class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded"
-          >
-            {{ icon }}
-          </div>
-          <h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
-            {{ title }}
-          </h2>
-          <div v-if="routes.length">
-            <div v-for="route in routes" :key="route.name" class="link-wrapper">
-              <router-link
-                class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
-                :to="route.path"
-              >
-                <span>{{ route.name }} </span>
-              </router-link>
-            </div>
-          </div>
-          <div v-else>
-            (empty)
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+	<div
+		class="container mx-auto max-w-3xl font-sans text-xs color-gray bg-white"
+	>
+		<div class="mx-4">
+			<div
+				class="mt-24 mb-12 text-center align-baseline items-center gap-6 sm:mt-16 sm:mb-6 sm:text-left sm:flex sm:flex-row-reverse sm:justify-left"
+			>
+				<div>
+					<img
+						src="/logo.svg"
+						alt="TresJS logo"
+						class="max-w-24 sm:max-w-48 align-baseline"
+					/>
+				</div>
+				<div class="sm:w-2/3">
+					<h1
+						class="w-auto max-w-75 mx-auto text-5xl text-zinc-700 mb-3 sm:mx-none sm:w-1/2 sm:max-w-72"
+					>
+						<span class="text-tres-primary">TresJS</span> Playground
+					</h1>
+					<p class="text-lg">Testing zone for TresJS/core components</p>
+				</div>
+			</div>
+			<div
+				class="text-center sm:text-left sm:grid sm:grid-cols-2 md:grid-cols-3 gap-4"
+			>
+				<div
+					v-for="{ title, routes, icon } in sections"
+					:key="title"
+					class="p-4 my-4 leading-normal size-m weight-600 bg-zinc-50 rounded sm:my-0"
+				>
+					<div
+						class="inline-block p-2 p-x-3 m-b-3 text-2xl bg-zinc-200 rounded"
+					>
+						{{ icon }}
+					</div>
+					<h2 class="text-sm p-0 m-0 mb-1.5 font-semibold text-zinc-600">
+						{{ title }}
+					</h2>
+					<div v-if="routes.length">
+						<div v-for="route in routes" :key="route.name" class="link-wrapper">
+							<router-link
+								class="no-underline text-zinc-700 visited:text-zinc-400 hover:text-cientos-blue"
+								:to="route.path"
+							>
+								<span>{{ route.name }} </span>
+							</router-link>
+						</div>
+					</div>
+					<div v-else>(empty)</div>
+				</div>
+			</div>
+		</div>
+	</div>
 </template>
+import { webgpuRoutes } from '../router/routes/webgpu';
diff --git a/playground/src/pages/webgpu/WebGPURenderer.vue b/playground/src/pages/webgpu/WebGPURenderer.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import {
+	BasicShadowMap,
+	MeshToonMaterial,
+	NoToneMapping,
+	SRGBColorSpace,
+} from 'three'
+import { TresCanvas, useRenderLoop } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import { onMounted, nextTick } from 'vue'
+
+const state = reactive({
+	clearColor: '#201919',
+	shadows: false,
+	alpha: false,
+
+	shadowMapType: BasicShadowMap,
+	outputColorSpace: SRGBColorSpace,
+	toneMapping: NoToneMapping,
+})
+
+const { onLoop } = useRenderLoop()
+
+onMounted(async () => {
+	await nextTick()
+
+	onLoop(({ elapsed }) => {})
+})
+</script>
+
+<template>
+	<TresCanvas v-bind="state">
+		<TresPerspectiveCamera :position="[0, 1, -3]" :look-at="[0, 0, 0]" />
+
+		<OrbitControls />
+
+		<TresAmbientLight :intensity="0.5" />
+
+		<TresMesh>
+			<TresBoxGeometry />
+			<TresMeshStandardMaterial color="red" />
+		</TresMesh>
+	</TresCanvas>
+</template>
diff --git a/playground/src/router/routes/index.ts b/playground/src/router/routes/index.ts
@@ -6,6 +6,7 @@ import { advancedRoutes } from './advanced'
 import { miscRoutes } from './misc'
 import { issuesRoutes } from './issues'
 import { loaderRoutes } from './loaders'
+import { webgpuRoutes } from './webgpu'
 
 const allRoutes = [
   ...basicRoutes,
@@ -16,6 +17,7 @@ const allRoutes = [
   ...miscRoutes,
   ...issuesRoutes,
   ...loaderRoutes,
+  ...webgpuRoutes
 ]
 
 export {
@@ -28,4 +30,5 @@ export {
   issuesRoutes,
   allRoutes,
   loaderRoutes,
+  webgpuRoutes
 }
diff --git a/playground/src/router/routes/webgpu.ts b/playground/src/router/routes/webgpu.ts
@@ -0,0 +1,7 @@
+export const webgpuRoutes = [
+  {
+    path: '/webgpu/renderer',
+    name: 'WebGPU Renderer',
+    component: () => import('../../pages/webgpu/WebGPURenderer.vue'),
+  },
+]