chore: add prettier, simplify logic, add example to readme

verekia · Dec 22, 2024 · c25ce6a · c25ce6a
1 parent c6e878b
commit c25ce6a
Show file tree

Hide file tree

Showing 4 changed files with 73 additions and 66 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,3 @@
+trailingComma: 'es5'
+semi: false
+singleQuote: true
diff --git a/README.md b/README.md
@@ -184,7 +184,13 @@ You can use React Server Components with R3F. This actually works without `'use
   <ClientBox position={[1.2, 0, 0]} />
 
   <ambientLight intensity={Math.PI / 2} />
-  <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+  <spotLight
+    position={[10, 10, 10]}
+    angle={0.15}
+    penumbra={1}
+    decay={0}
+    intensity={Math.PI}
+  />
   <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
   <mesh>
     <boxGeometry />
@@ -234,7 +240,9 @@ If checking the backend type is not critical (for example you just want to see w
 
 ```js
 setTimeout(() => {
-  console.log(renderer.backend.isWebGPUBackend ? 'WebGPU Backend' : 'WebGL Backend')
+  console.log(
+    renderer.backend.isWebGPUBackend ? 'WebGPU Backend' : 'WebGL Backend'
+  )
 }, 1000)
 ```
 
@@ -267,6 +275,21 @@ The following Drei components have been tested with R3F + WebGPU:
 
 You can run one of the R3F test cases of this repo and help complete the list. Don't commit code, just edit this README with the results of your tests.
 
+## Minimal Vanilla Three.js + TSL Example
+
+```js
+import { mix, vec3, uv } from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
+
+const red = vec3(1, 0, 0)
+const green = vec3(0, 1, 0)
+const checkerboard = uv().mul(8).floor().dot(1).mod(2)
+const colorNode = mix(red, green, checkerboard)
+
+const material = new MeshBasicNodeMaterial()
+material.colorNode = colorNode
+```
+
 ## Minimal R3F9 + TS + TSL Example
 
 ```tsx

diff --git a/vite-vanilla-js/index.html b/vite-vanilla-js/index.html
@@ -1,21 +1,19 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Vite App</title>
-</head>
-
-<body>
-  <div id="app"></div>
-  <style>
-    body {
-      margin: 0;
-    }
-  </style>
-  <script type="module" src="/main.js"></script>
-</body>
-
-</html>
+  <body>
+    <div id="app"></div>
+    <style>
+      body {
+        margin: 0;
+      }
+    </style>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/vite-vanilla-js/main.js b/vite-vanilla-js/main.js
@@ -1,58 +1,41 @@
-import * as THREE from "three";
-import { WebGPURenderer } from "three/webgpu";
-import * as TSL from "three/tsl";
-import { MeshBasicNodeMaterial } from "three/webgpu";
+import * as THREE from 'three'
+import { WebGPURenderer } from 'three/webgpu'
+import { mix, vec3, uv } from 'three/tsl'
+import { MeshBasicNodeMaterial } from 'three/webgpu'
 
-// This is a checkerboard pattern from material x made into tsl
-//input: color1, color2, uvtiling, uvoffset
-const color1 = TSL.uniform(new THREE.Color(1, 0, 0));
-const color2 = TSL.uniform(new THREE.Color(0, 1, 0));
-const uvtiling = TSL.uniform(new THREE.Vector2(8, 8));
-const uvoffset = TSL.uniform(new THREE.Vector2(0, 0));
-const mix = TSL.uv().mul(uvtiling).sub(uvoffset).floor().dot(1).mod(2);
+const red = vec3(1, 0, 0)
+const green = vec3(0, 1, 0)
+const checkerboard = uv().mul(8).floor().dot(1).mod(2)
+const colorNode = mix(red, green, checkerboard)
 
-const output = TSL.mix(color1, color2, mix);
+const width = window.innerWidth
+const height = window.innerHeight
 
-//output: color3
+const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10)
+camera.position.z = 1
 
-const width = window.innerWidth;
-const height = window.innerHeight;
+const scene = new THREE.Scene()
 
-const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
-camera.position.z = 1;
+const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2)
+const material = new MeshBasicNodeMaterial()
+material.colorNode = colorNode
 
-const scene = new THREE.Scene();
+const mesh = new THREE.Mesh(geometry, material)
+scene.add(mesh)
 
-const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
-const material = new MeshBasicNodeMaterial();
-material.colorNode = output;
-
-const mesh = new THREE.Mesh(geometry, material);
-scene.add(mesh);
-
-const renderer = new WebGPURenderer({ antialias: true });
-await renderer.init();
-renderer.setSize(width, height);
-renderer.setAnimationLoop(animate);
-document.body.appendChild(renderer.domElement);
+const renderer = new WebGPURenderer({ antialias: true })
+await renderer.init()
+renderer.setSize(width, height)
+renderer.setAnimationLoop(animate)
+document.body.appendChild(renderer.domElement)
 
 console.log(
-    renderer.backend.isWebGPUBackend ? "WebGPU Backend" : "WebGL Backend"
-);
+  renderer.backend.isWebGPUBackend ? 'WebGPU Backend' : 'WebGL Backend'
+)
 
 function animate(time) {
-    mesh.rotation.x = time / 2000;
-    mesh.rotation.y = time / 1000;
+  mesh.rotation.x = time / 2000
+  mesh.rotation.y = time / 1000
 
-    renderer.render(scene, camera);
+  renderer.render(scene, camera)
 }
-
-window.addEventListener("resize", () => {
-    const newWidth = window.innerWidth;
-    const newHeight = window.innerHeight;
-
-    camera.aspect = newWidth / newHeight;
-    camera.updateProjectionMatrix();
-
-    renderer.setSize(newWidth, newHeight);
-});