feat(examples): add pixel-normal-map demo

thi-ng · Oct 8, 2022 · 72c604a · 72c604a
1 parent e67c110
commit 72c604a
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 0 deletions.
diff --git a/assets/examples/pixel-normal-map.jpg b/assets/examples/pixel-normal-map.jpg
diff --git a/examples/pixel-normal-map/README.md b/examples/pixel-normal-map/README.md
@@ -0,0 +1,15 @@
+# pixel-normal-map
+
+![screenshot](https://raw.githubusercontent.com/thi-ng/umbrella/develop/assets/examples/pixel-normal-map.png)
+
+[Live demo](http://demo.thi.ng/umbrella/pixel-normal-map/)
+
+Please refer to the [example build instructions](https://github.com/thi-ng/umbrella/wiki/Example-build-instructions) on the wiki.
+
+## Authors
+
+- Karsten Schmidt
+
+## License
+
+&copy; 2022 Karsten Schmidt // Apache Software License 2.0
diff --git a/examples/pixel-normal-map/index.html b/examples/pixel-normal-map/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<link
+			rel="icon"
+			href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">⛱️</text></svg>'
+		/>
+		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
+		<title>pixel-normal-map · @thi.ng/umbrella</title>
+		<link
+			href="https://unpkg.com/tachyons@4/css/tachyons.min.css"
+			rel="stylesheet"
+		/>
+		<style>
+			img,
+			canvas {
+				display: block;
+			}
+		</style>
+	</head>
+	<body class="sans-serif">
+		<div id="app"></div>
+		<div>
+			<a
+				class="link"
+				href="https://github.com/thi-ng/umbrella/tree/develop/examples/pixel-normal-map"
+				>Source code</a
+			>
+		</div>
+		<script type="module" src="/src/index.ts"></script>
+	</body>
+</html>
diff --git a/examples/pixel-normal-map/package.json b/examples/pixel-normal-map/package.json
@@ -0,0 +1,28 @@
+{
+	"name": "@example/pixel-normal-map",
+	"version": "0.0.1",
+	"private": true,
+	"description": "Normal map creation/conversion basics",
+	"repository": "https://github.com/thi-ng/umbrella",
+	"author": "Karsten Schmidt <k+npm@thi.ng>",
+	"license": "Apache-2.0",
+	"scripts": {
+		"start": "vite --open",
+		"build": "tsc && vite build --base='./'",
+		"preview": "vite preview --host --open"
+	},
+	"devDependencies": {
+		"typescript": "^4.8.3",
+		"vite": "^3.1.3"
+	},
+	"dependencies": {
+		"@thi.ng/pixel": "workspace:^"
+	},
+	"browser": {
+		"process": false
+	},
+	"thi.ng": {
+		"readme": true,
+		"screenshot": "examples/pixel-normal-map.jpg"
+	}
+}
diff --git a/examples/pixel-normal-map/src/index.ts b/examples/pixel-normal-map/src/index.ts
@@ -0,0 +1,27 @@
+import {
+	canvas2d,
+	floatBufferFromImage,
+	FLOAT_GRAY,
+	imagePromise,
+	normalMap,
+} from "@thi.ng/pixel";
+import TEX from "./tex.png";
+
+(async () => {
+	// load texture image
+	const img = await imagePromise(TEX);
+	document.body.appendChild(img);
+	// convert image to grayscale float buffer
+	const buf = floatBufferFromImage(img, FLOAT_GRAY);
+	// compute normalmap w/ given options
+	const nmap = normalMap(buf, { scale: 8, step: 2 });
+	// create canvas and convert/copy normal map into it
+	nmap.blitCanvas(canvas2d(img.width, img.height, document.body).canvas);
+	// another normal map with sign of `scale` flipped to "invert" normal direction
+	const nmap2 = normalMap(buf, { scale: -8, step: 2 });
+	nmap2.blitCanvas(canvas2d(img.width, img.height, document.body).canvas);
+
+	// if a result canvas isn't needed, converting to JS native ImageData
+	// might be sufficient (e.g. for WebGL textures):
+	// const idata = nmap.toImageData()
+})();
diff --git a/examples/pixel-normal-map/src/tex.png b/examples/pixel-normal-map/src/tex.png
diff --git a/examples/pixel-normal-map/src/vite-env.d.ts b/examples/pixel-normal-map/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/examples/pixel-normal-map/tsconfig.json b/examples/pixel-normal-map/tsconfig.json
@@ -0,0 +1,6 @@
+{
+	"extends": "../tsconfig.json",
+	"include": ["src/**/*"],
+	"compilerOptions": {
+	}
+}
diff --git a/yarn.lock b/yarn.lock
@@ -904,6 +904,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@example/pixel-normal-map@workspace:examples/pixel-normal-map":
+  version: 0.0.0-use.local
+  resolution: "@example/pixel-normal-map@workspace:examples/pixel-normal-map"
+  dependencies:
+    "@thi.ng/pixel": "workspace:^"
+    typescript: ^4.8.3
+    vite: ^3.1.3
+  languageName: unknown
+  linkType: soft
+
 "@example/pixel-sorting@workspace:examples/pixel-sorting":
   version: 0.0.0-use.local
   resolution: "@example/pixel-sorting@workspace:examples/pixel-sorting"