refactor, slim down the assets

Author: reczkok

apps/typegpu-docs/public/assets/os-awards/award_cleanup.glb

@@ -75,20 +75,12 @@ export async function loadModel(root: TgpuRoot, url: string) {
   const createTextureFromBitmap = (bitmap: ImageBitmap, srgb: boolean) => {
     const mipLevelCount = Math.floor(Math.log2(Math.max(bitmap.width, bitmap.height))) + 1;
     const texture = root
-      .createTexture(
-        srgb
-          ? {
-              size: [bitmap.width, bitmap.height],
-              format: 'rgba8unorm',
-              viewFormats: ['rgba8unorm-srgb'],
-              mipLevelCount,
-            }
-          : {
-              size: [bitmap.width, bitmap.height],
-              format: 'rgba8unorm',
-              mipLevelCount,
-            },
-      )
+      .createTexture({
+        size: [bitmap.width, bitmap.height],
+        format: 'rgba8unorm',
+        mipLevelCount,
+        ...(srgb ? { viewFormats: ['rgba8unorm-srgb'] } : {}),
+      })
       .$usage('sampled', 'render');
     texture.write(bitmap);
     texture.generateMipmaps();

…/examples/rendering/os-awards/cubemap.ts …es/rendering/os-awards/common/cubemap.tsapps/typegpu-docs/src/examples/rendering/os-awards/cubemap.ts renamed to apps/typegpu-docs/src/examples/rendering/os-awards/common/cubemap.ts apps/typegpu-docs/src/examples/rendering/os-awards/cubemap.ts renamed to apps/typegpu-docs/src/examples/rendering/os-awards/common/cubemap.ts

@@ -1,7 +1,7 @@
 import tgpu, { d, std, type TgpuBindGroup } from 'typegpu';
 import { distributionGGX, fresnelSchlick, geometrySmith } from './pbr.ts';
-import { scene } from './scene.ts';
-import { Camera } from '../../common/setup-orbit-camera.ts';
+import { scene } from '../scene.ts';
+import { Camera } from '../../../common/setup-orbit-camera.ts';
 
 export const AwardMaterial = d.struct({
   baseColorFactor: d.vec4f,

…rc/examples/rendering/os-awards/model.ts …ples/rendering/os-awards/common/model.tsapps/typegpu-docs/src/examples/rendering/os-awards/model.ts renamed to apps/typegpu-docs/src/examples/rendering/os-awards/common/model.ts apps/typegpu-docs/src/examples/rendering/os-awards/model.ts renamed to apps/typegpu-docs/src/examples/rendering/os-awards/common/model.ts

@@ -1,11 +1,11 @@
 import tgpu, { common, d, std } from 'typegpu';
 import * as m from 'wgpu-matrix';
-import { directionToEquirectUv, loadEnvironmentCubemap } from './cubemap.ts';
-import { createMeshRenderer } from './mesh-renderer.ts';
-import { loadModel } from './model.ts';
+import { directionToEquirectUv, loadEnvironmentCubemap } from './common/cubemap.ts';
+import { loadModel } from './common/model.ts';
+import { AwardMaterial, primaryRayDir, sharedLayout, tonemapForDisplay } from './common/shading.ts';
+import { createMeshRenderer } from './mesh/renderer.ts';
 import { scene } from './scene.ts';
-import { createSdfRenderer } from './sdf-renderer.ts';
-import { AwardMaterial, primaryRayDir, sharedLayout, tonemapForDisplay } from './shading.ts';
+import { createSdfRenderer } from './sdf/renderer.ts';
 import { defineControls } from '../../common/defineControls.ts';
 import { Camera, setupOrbitCamera } from '../../common/setup-orbit-camera.ts';
 
@@ -79,8 +79,8 @@ const envPipeline = root.createRenderPipeline({
 });
 
 const renderers = {
-  sdf: createSdfRenderer(root, context, sharedBindGroup),
-  mesh: createMeshRenderer(root, context, canvas, award, sharedBindGroup),
+  sdf: createSdfRenderer(root, context),
+  mesh: createMeshRenderer(root, context, canvas, award),
 };
 let renderer: keyof typeof renderers = 'sdf';
 
@@ -128,7 +128,7 @@ function frame(timeMs: number) {
   updateAwardTransform(timeMs);
 
   envPipeline.with(sharedBindGroup).withColorAttachment({ view: context }).draw(3);
-  renderers[renderer].draw();
+  renderers[renderer].draw(sharedBindGroup);
 
   if (!firstFrameDrawn) {
     loadingScreen.style.display = 'none';

…/src/examples/rendering/os-awards/pbr.ts …amples/rendering/os-awards/common/pbr.tsapps/typegpu-docs/src/examples/rendering/os-awards/pbr.ts renamed to apps/typegpu-docs/src/examples/rendering/os-awards/common/pbr.ts apps/typegpu-docs/src/examples/rendering/os-awards/pbr.ts renamed to apps/typegpu-docs/src/examples/rendering/os-awards/common/pbr.ts

@@ -1,6 +1,5 @@
 import tgpu, { d, std, type TgpuRoot } from 'typegpu';
-import { type loadModel, ModelVertex } from './model.ts';
-import { scene } from './scene.ts';
+import { type loadModel, ModelVertex } from '../common/model.ts';
 import {
   isInEpoxyRegion,
   sampleEnv,
@@ -9,7 +8,8 @@ import {
   sharedLayout,
   shadeOpaque,
   tonemapForDisplay,
-} from './shading.ts';
+} from '../common/shading.ts';
+import { scene } from '../scene.ts';
 
 const awardVertexLayout = tgpu.vertexLayout(d.arrayOf(ModelVertex));
 
@@ -133,7 +133,6 @@ export function createMeshRenderer(
   context: GPUCanvasContext,
   canvas: HTMLCanvasElement,
   award: Awaited<ReturnType<typeof loadModel>>,
-  sharedBindGroup: SharedBindGroup,
 ) {
   const pipeline = root.createRenderPipeline({
     attribs: awardVertexLayout.attrib,
@@ -163,7 +162,7 @@ export function createMeshRenderer(
   resizeObserver.observe(canvas);
 
   return {
-    draw() {
+    draw(sharedBindGroup: SharedBindGroup) {
       pipeline
         .with(sharedBindGroup)
         .withColorAttachment({ view: context, loadOp: 'load' })

…/examples/rendering/os-awards/shading.ts …es/rendering/os-awards/common/shading.tsapps/typegpu-docs/src/examples/rendering/os-awards/shading.ts renamed to apps/typegpu-docs/src/examples/rendering/os-awards/common/shading.ts apps/typegpu-docs/src/examples/rendering/os-awards/shading.ts renamed to apps/typegpu-docs/src/examples/rendering/os-awards/common/shading.ts

@@ -1,15 +1,6 @@
 import { perlin3d } from '@typegpu/noise';
 import tgpu, { common, d, std, type TgpuRoot } from 'typegpu';
-import { fresnelSchlick } from './pbr.ts';
-import { scene } from './scene.ts';
-import {
-  awardBoundsCenter,
-  awardBoundsRadius,
-  awardShieldMinY,
-  sdAwardSmooth,
-  sdEpoxyWood,
-} from './sdf-award.ts';
-import { awardUv } from './sdf-uv.ts';
+import { fresnelSchlick } from '../common/pbr.ts';
 import {
   isInEpoxyRegion,
   modelDirToWorld,
@@ -22,7 +13,16 @@ import {
   shadeDirectLights,
   shadeOpaque,
   tonemapForDisplay,
-} from './shading.ts';
+} from '../common/shading.ts';
+import { scene } from '../scene.ts';
+import {
+  awardBoundsCenter,
+  awardBoundsRadius,
+  awardShieldMinY,
+  sdAwardSmooth,
+  sdEpoxyWood,
+} from './shape.ts';
+import { awardUv } from './uv.ts';
 
 const MARCH_MAX_STEPS = 128;
 const MARCH_SURF_DIST = 4e-4;
@@ -237,11 +237,7 @@ const sdfFragment = tgpu.fragmentFn({
   return d.vec4f(tonemapForDisplay(color), 1);
 });
 
-export function createSdfRenderer(
-  root: TgpuRoot,
-  context: GPUCanvasContext,
-  sharedBindGroup: SharedBindGroup,
-) {
+export function createSdfRenderer(root: TgpuRoot, context: GPUCanvasContext) {
   const perlinCache = perlin3d.staticCache({ root, size: d.vec3u(7) });
 
   const pipeline = root.pipe(perlinCache.inject()).createRenderPipeline({
@@ -250,7 +246,7 @@ export function createSdfRenderer(
   });
 
   return {
-    draw() {
+    draw(sharedBindGroup: SharedBindGroup) {
       pipeline.with(sharedBindGroup).withColorAttachment({ view: context, loadOp: 'load' }).draw(3);
     },
     destroy() {

apps/typegpu-docs/src/examples/rendering/os-awards/index.ts

@@ -1,5 +1,5 @@
 import { d, std } from 'typegpu';
-import { awardShieldMinY } from './sdf-award.ts';
+import { awardShieldMinY } from './shape.ts';
 
 const atlas = {
   baseTop: {