Update examples

Author: raub

README.md

@@ -40,6 +40,7 @@ See [TS declarations](/index.d.ts) for more details.
 
 ```javascript
 import * as THREE from 'three';
+
 import node3d from '../index.js';
 const { init, addThreeHelpers } = node3d;
 
@@ -56,10 +57,9 @@ const material = new THREE.MeshBasicMaterial({ map: texture });
 const mesh = new THREE.Mesh(geometry, material);
 screen.scene.add(mesh);
 
-loop(() => {
-	const time = Date.now();
-	mesh.rotation.x = time * 0.0005;
-	mesh.rotation.y = time * 0.001;
+loop((now) => {
+	mesh.rotation.x = now * 0.0005;
+	mesh.rotation.y = now * 0.001;
 	screen.draw();
 });
 ```
@@ -79,25 +79,25 @@ Example Notes:
 
 ## OpenGL Features
 
-1. This is real native OpenGL, and you have direct access to GL resource IDs. This may be
+1. This is real **native OpenGL**, and you have direct access to GL resource IDs. This may be
 	useful for resource sharing and compute interop (such as
 	[CUDA-GL interop](https://docs.nvidia.com/cuda/cuda-runtime-api/group__CUDART__OPENGL.html)).
-1. The flag `isGles3` let's you use a GL ES 3 preset, which is closest to "real" WebGL.
+1. The flag `isGles3` lets you use a **GL ES 3** preset, which is closest to "real" WebGL.
 	If set to `false`, WebGL stuff (such as three.js) will still work, but now with some hacks.
-	However, if you are planning to use non-WebGL features (e.g. OpenGL 4.5 features),
+	However, if you are planning to use non-WebGL features (e.g. **OpenGL 4.5** features),
 	you might want it off, and then select a specific context version manually.
 1. The flag `isWebGL2` impacts how web libraries recognize the WebGL version.
 	But it doesn't really change the capabilities of the engine.
-1. Offscreen rendering is possible on Windows and Linux, as demonstrated by the tests
+1. **Offscreen rendering** is possible on Windows and Linux, as demonstrated by the tests
 	running in GitHub Actions. There are test cases that generate and compare screenshots,
 	and they do work in headless mode.
-1. OpenGL context sharing is enabled. You can obtain `HDC, HWND, CTX` for Windows and whatever
+1. OpenGL **context sharing** is enabled. You can obtain `HDC, HWND, CTX` for Windows and whatever
 	those are called on Linux and MacOS. See [glfw-raub](https://github.com/node-3d/glfw-raub).
 
 
 ## License
 
-You get this for free. Have fun!
+**You get this for free. Have fun!**
 
 Some of the components have their separate licenses, but all of them may be used
 commercially, without royalty.

examples/3d-core/mesh.mjs

@@ -35,9 +35,9 @@ pointLight.position.y = 20;
 pointLight.position.z = 5;
 
 
-loop(() => {
-	mesh.rotation.x = Date.now() * 0.0005;
-	mesh.rotation.y = Date.now() * 0.001;
-	mesh.rotation.z = Date.now() * 0.0007;
+loop((now) => {
+	mesh.rotation.x = now * 0.0005;
+	mesh.rotation.y = now * 0.001;
+	mesh.rotation.z = now * 0.0007;
 	screen.draw();
 });

examples/crate-lean.mjs

@@ -3,7 +3,6 @@ import * as THREE from 'three';
 import node3d from '../index.js';
 const { init, addThreeHelpers } = node3d;
 
-
 const { gl, loop, Screen } = init({
 	isGles3: true, vsync: true, autoEsc: true, autoFullscreen: true, title: 'Crate',
 });
@@ -17,9 +16,8 @@ const material = new THREE.MeshBasicMaterial({ map: texture });
 const mesh = new THREE.Mesh(geometry, material);
 screen.scene.add(mesh);
 
-loop(() => {
-	const time = Date.now();
-	mesh.rotation.x = time * 0.0005;
-	mesh.rotation.y = time * 0.001;
+loop((now) => {
+	mesh.rotation.x = now * 0.0005;
+	mesh.rotation.y = now * 0.001;
 	screen.draw();
 });

examples/knot.mjs

@@ -38,9 +38,8 @@ const outlineMesh = new THREE.Mesh(outlineGeometry, outlineMaterial);
 knotMesh.add(outlineMesh);
 
 // Called repeatedly to render new frames
-loop(() => {
-	const time = Date.now();
-	knotMesh.rotation.x = time * 0.0005;
-	knotMesh.rotation.y = time * 0.001;
+loop((now) => {
+	knotMesh.rotation.x = now * 0.0005;
+	knotMesh.rotation.y = now * 0.001;
 	screen.draw();
 });

examples/palette/palette.mjs

@@ -211,11 +211,11 @@ const render = () => {
 let prevTime = Date.now();
 let frames = 0;
 
-loop(() => {
+loop((now) => {
 	controls.update();
 
 	if (mesh) {
-		mesh.rotation.y = Date.now() * 0.00005;
+		mesh.rotation.y = now * 0.00005;
 	}
 
 	render();
@@ -225,12 +225,11 @@ loop(() => {
 	}
 
 	frames++;
-	const time = Date.now();
-	if (time >= prevTime + 2000) {
+	if (now >= prevTime + 2000) {
 		console.log(
-			'FPS:', Math.floor((frames * 1000) / (time - prevTime)),
+			'FPS:', Math.floor((frames * 1000) / (now - prevTime)),
 		);
-		prevTime = time;
+		prevTime = now;
 		frames = 0;
 	}
 });

examples/srgb/main.ts

@@ -5,7 +5,7 @@ import {
 
 import Img from 'image-raub';
 import { init } from '3d-core-raub';
-import { SimpleTextureProcessor } from './simple_texture_processor';
+import { SimpleTextureProcessor } from './simple_texture_processor.ts';
 
 init({
     isGles3: true,

examples/srgb/tsconfig.json

@@ -9,10 +9,11 @@
         },
         "target": "es2017",
         "moduleResolution": "nodenext",
-        "module": "nodenext",
+        "module": "NodeNext",
         "allowJs": true,
         "esModuleInterop": true,
         "allowSyntheticDefaultImports": true,
+        "allowImportingTsExtensions": true,
         "forceConsistentCasingInFileNames": true,
         "strict": true,
         "noEmit": true,

examples/three/post.mjs

@@ -316,8 +316,8 @@ function createMesh(geometry, scene, scale) {
 let prevTime = Date.now();
 let frames = 0;
 
-loop(() => {
-	const timedRotation = Date.now() * 0.0004;
+loop((now) => {
+	const timedRotation = now * 0.0004;
 
 	if (mesh) mesh.rotation.y = -timedRotation;
 
@@ -341,12 +341,11 @@ loop(() => {
 	}
 
 	frames++;
-	const time = Date.now();
-	if (time >= prevTime + 1000) {
+	if (now >= prevTime + 2000) {
 		console.log(
-			'FPS:', Math.floor((frames * 1000) / (time - prevTime)),
+			'FPS:', Math.floor((frames * 1000) / (now - prevTime)),
 		);
-		prevTime = time;
+		prevTime = now;
 		frames = 0;
 	}
 });

package-lock.json

@@ -40,7 +40,7 @@
 		"addon-tools-raub": "^9.3.0",
 		"image-raub": "^5.2.0",
 		"glfw-raub": "^6.4.0",
-		"webgl-raub": "^5.2.0"
+		"webgl-raub": "^5.3.0"
 	},
 	"devDependencies": {
 		"@types/node": "^22.13.4",