Merge pull request #18 from flo-bit/main

update projects, add depth 3d avatar

src/lib/3D/Depth3D/Depth3D.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Canvas } from '@threlte/core';
+	import Scene3D from './Scene3D.svelte';
+
+	export let image: {
+		image: string;
+		depth: string;
+	};
+</script>
+
+<Canvas>
+	<Scene3D {image} {...$$restProps} />
+</Canvas>

src/lib/3D/Depth3D/Scene3D.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	import { T, useTask } from '@threlte/core';
+	import { useTexture, Align, OrbitControls } from '@threlte/extras';
+	import { spring } from 'svelte/motion';
+
+	import { Vector2, ShaderMaterial, PlaneGeometry, LinearSRGBColorSpace } from 'three';
+
+	type DepthImage = {
+		image: string;
+		depth: string;
+	};
+	export let image: DepthImage;
+
+	export let rounded = true;
+
+	export let cameraPosition: [number, number, number] = [0, 0, 10];
+
+	export let rotationScale = 0.2;
+	export let rotationSpeed = 2;
+
+	export let detail = 1000;
+
+	export let depthScale = 1;
+
+	const map = useTexture(image.image, {
+		transform: (texture) => {
+			texture.colorSpace = LinearSRGBColorSpace;
+			//texture.encoding = LinearEncoding;
+			return texture;
+		}
+	});
+	const depthMap = useTexture(image.depth, {
+		transform: (texture) => {
+			//texture.encoding = LinearEncoding;
+			return texture;
+		}
+	});
+
+	const rotation = new Vector2(0.5, 0.5);
+
+	const uniforms = {
+		uTexture: { type: 't', value: map },
+		depthMap: { type: 't', value: depthMap }
+	};
+	const material = new ShaderMaterial({
+		uniforms: uniforms,
+		vertexShader: `
+varying vec2 vUv;
+uniform sampler2D depthMap;
+
+void main() {
+    vUv = uv;
+    // move z position based on the depth map
+    float depth = texture2D(depthMap, vUv).r;
+    vec3 newPosition = position + vec3(0.0, 0.0, depth * ${depthScale.toFixed(1)});
+    gl_Position = projectionMatrix * modelViewMatrix * vec4(newPosition, 1.0);
+}`,
+		fragmentShader: `
+uniform sampler2D uTexture;
+varying vec2 vUv;
+
+float sdRoundedRect(vec2 p, vec2 b, float r) {
+    vec2 q = abs(p) - b + vec2(r);
+    return length(max(q, 0.0)) - r;
+}
+
+void main() {
+	${
+		rounded
+			? `
+	    vec2 uv = (vUv * 2.0) - 1.0;
+
+    // Size of the rectangle (half-size)
+    vec2 rectSize = vec2(1, 1);
+
+    // Calculate distance to the edge of the rounded rectangle
+    float d = sdRoundedRect(uv, rectSize, 0.1);
+
+    // Smooth transition for anti-aliasing
+    float aa = fwidth(d);
+    float alpha = smoothstep(0.0, aa, -d);
+
+	gl_FragColor = texture2D(uTexture, vUv) * alpha;
+	`
+			: ''
+	}
+
+    //gl_FragColor = texture2D(uTexture, vUv);
+}`
+	});
+
+	const geometry = new PlaneGeometry(7, 7, detail, detail);
+
+
+	let rotationX = spring();
+	let rotationY = spring();
+	
+	export let time = 0;
+	const { stop, start } = useTask((dt) => {
+		if (mouseMoved > 0) {
+			mouseMoved -= dt;
+		} else {
+			time += dt * rotationSpeed;
+			$rotationX = Math.sin(time) * 0.5;
+			$rotationY = Math.cos(time) * 0.5;
+		}
+	});
+
+	let mouseMoved = -1;
+
+	function onDocumentMouseMove(event: MouseEvent) {
+		// convert to [-0.5, 0.5]
+		$rotationX = (event.clientX / window.innerWidth - 0.5) * 2;
+		$rotationY = (event.clientY / window.innerHeight - 0.5) * 2;
+
+		mouseMoved = 1;
+	}
+
+</script>
+
+<svelte:window on:mousemove={onDocumentMouseMove} />
+
+<T.PerspectiveCamera makeDefault position={cameraPosition}>
+</T.PerspectiveCamera>
+
+{#await map then mapValue}
+	{#await depthMap then depthValue}
+		<Align>
+			<T.Mesh
+				rotation.x={$rotationY * rotationScale}
+				rotation.y={$rotationX * rotationScale}
+				scale.x={mapValue.image.width / mapValue.image.height}
+			>
+				<T is={geometry} />
+				<T
+					is={material}
+					uniforms={{
+						depthMap: { value: depthValue },
+						uTexture: { value: mapValue },
+						mouse: { value: rotation }
+					}}
+				/>
+			</T.Mesh>
+		</Align>
+	{/await}
+{/await}

src/lib/3D/Depth3D/index.ts

@@ -0,0 +1,2 @@
+export { default as Depth3D } from './Depth3D.svelte';
+export { default } from './Depth3D.svelte';

src/lib/components/About.svelte

@@ -1,6 +1,11 @@
 <script lang="ts">
+	import Depth3D from '$lib/3D/Depth3D/Depth3D.svelte';
+
 	// @ts-ignore
 	import imageMe from '$lib/images/avatar.png?w=1024&format=webp';
+	// @ts-ignore
+	import depthMe from '$lib/images/avatar-depth.png?w=1024&format=webp';
+
 	import Resume from './Resume.svelte';
 </script>
 
@@ -9,21 +14,32 @@
 		<div id="about" class="py-16 md:py-32 section">
 			<div class="grid grid-cols-1 gap-y-16 lg:grid-cols-2 lg:grid-rows-[auto_1fr] lg:gap-y-12">
 				<div class="lg:pl-20">
-					<div class="max-w-xs px-2.5 lg:max-w-none">
-						<img
+					<div class="max-w-sm px-2.5 lg:max-w-none">
+						<!-- <img
 							src={imageMe}
 							alt="this is me"
 							loading="lazy"
 							sizes="(min-width: 1024px) 32rem, 20rem"
 							class="aspect-square rotate-3 rounded-2xl bg-zinc-100 object-cover dark:bg-zinc-800"
-						/>
+						/> -->
+
+						<div class="aspect-square rotate-3 -m-10 lg:-m-10">
+							<Depth3D
+								image={{
+									image: imageMe,
+									depth: depthMe
+								}}
+							/>
+							<div class="sr-only">this is me</div>
+						</div>
 					</div>
 				</div>
 				<div class="lg:order-first lg:row-span-2">
 					<h1
 						class="text-4xl font-bold tracking-tight text-zinc-800 dark:text-zinc-100 sm:text-5xl"
 					>
-						hey there, i'm florian. i live in berlin, where i create things for the web (and other places).
+						hey there, i'm florian. i live in berlin, where i create things for the web (and other
+						places).
 					</h1>
 					<div class="mt-6 space-y-7 text-base text-zinc-600 dark:text-zinc-400">
 						<p>