Added Hologram sticker

boytchev · Aug 2, 2023 · 57f0a1d · 57f0a1d
1 parent 5f10501
commit 57f0a1d
Show file tree

Hide file tree

Showing 6 changed files with 206 additions and 0 deletions.
diff --git a/index.md b/index.md
@@ -1,6 +1,11 @@
 This is a repository for the source code of various 3D programlets.
 
 
+### 32. [Hologram sticker [Threejs.js]](threejs/hologram-sticker.html)
+<a href="threejs/hologram-sticker.html"><img src="snapshots/hologram-sticker.jpg" width="150" style="border: solid 1px black; float:left; margin-right: 0.5em;"></a> Hologram stickers combine two images into one. By changing the point of view the stickers reveal one of the images. This étude simulated such hologram sticker by creating a completely static object (both its geometry and  material are static).
+<div style="clear:both;"></div>
+
+
 ### 31. [Bézier space [Threejs.js]](threejs/bezier-space.html)
 <a href="threejs/bezier-space.html"><img src="snapshots/bezier-space.jpg" width="150" style="border: solid 1px black; float:left; margin-right: 0.5em;"></a> If it is needed to freely deform a 3D object, it can be placed in a Bézier space. Its control points form a cage which manipulation generates a deformation in intuitive and predictable way. Internally, Bézier space is just a 3D version of Bézier surfaces and Bézier curves. 
 <div style="clear:both;"></div>

diff --git a/snapshots/hologram-sticker.jpg b/snapshots/hologram-sticker.jpg
diff --git a/threejs/hologram-sticker.html b/threejs/hologram-sticker.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+
+<html>
+	<head>
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link rel="stylesheet" href="../etudes.css">
+
+		<script async
+			src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"
+			crossorigin="anonymous">
+		</script>
+
+		<script type="importmap">
+		  {
+			"imports": {
+			  "three": "https://unpkg.com/[email protected]/build/three.module.js",
+			  "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
+			}
+		  }
+		</script>
+	</head>
+
+	<body>
+		<h1 class="white">Hologram sticker<a href="https://boytchev.github.io/etudes/">&larr;</a></h1>
+
+		<script type="module">
+			import * as THREE from 'three';
+			import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
+
+
+			// construct and setup the scene
+
+			var renderer = new THREE.WebGLRenderer( {antialias:true} );
+				renderer.outputColorSpace  = THREE.LinearSRGBColorSpace;
+				renderer.setAnimationLoop( animate );
+				document.body.appendChild( renderer.domElement );
+				document.body.style.margin = 0;
+				document.body.style.overflow = 'hidden';
+
+			var scene = new THREE.Scene();
+				scene.background = new THREE.TextureLoader().load( 'hologram-sticker/room.jpg' );
+
+			var camera = new THREE.PerspectiveCamera( 40, 1, 0.05, 100 );
+				camera.position.set( 0, 0, 2.25 );
+				camera.lookAt( scene.position );
+
+			var light1 = new THREE.DirectionalLight( 'white', 1 );
+				light1.position.set( 1, 0, 2 );
+			var light2 = new THREE.DirectionalLight( 'white', 1 );
+				light2.position.set( -1, 0, 2 );
+			var light3 = new THREE.DirectionalLight( 'white', 4 );
+				light3.position.set( 0, 0, 2 );
+				scene.add( light1, light2, light3 );
+
+			var controls = new OrbitControls( camera, renderer.domElement );
+				controls.maxDistance = 10;
+				controls.minDistance = 1;
+				controls.enableDamping = true;
+
+
+
+			// maintain full screen
+
+			window.addEventListener( 'resize', onWindowResize, false );
+			onWindowResize();
+
+			function onWindowResize( event )
+			{
+				camera.aspect = window.innerWidth / window.innerHeight;
+				camera.updateProjectionMatrix();
+
+				renderer.setSize( window.innerWidth, window.innerHeight, true );
+
+				scene.background.repeat.set( window.innerWidth/window.innerHeight/2, 1 );
+			}			
+
+
+
+			// sticker shape
+
+			const n = 250; // granularity
+
+			var geometry = new THREE.BoxGeometry( 1, 1.2, 0.02, n ).toNonIndexed( ),
+				pos = geometry.getAttribute( 'position' ),
+				nor = geometry.getAttribute( 'normal' ),
+				uv = geometry.getAttribute( 'uv' );
+
+			var r = 0.05,
+				v = new THREE.Vector3(),
+				w = new THREE.Vector3(0,0,10.5);
+			for( var i=0; i<pos.count; i++ )
+			{
+				var x = pos.getX( i ),
+					y = pos.getY( i ),
+					z = pos.getZ( i );
+
+				// round corners
+				var k = 0;
+				if( x+0.5< r ) k = r-(x+0.5);
+				if( x-0.5>-r ) k = r+(x-0.5);
+				k = r-Math.sqrt( r**2 - k**2 );
+				y -= k*Math.sign(y);
+
+				// zigzag surface
+				if( z > 0 )
+				{
+					k = (x/0.5)*Math.PI/2;
+					z += 3*(0.5+0.5*Math.cos(n*k)) / n;
+				}
+				pos.setXYZ( i, x, y, z );
+
+				// uv coordinates
+				var j = i - (n+1)*12,
+					tri = Math.floor(j/6),
+					step = Math.floor(tri/2);
+
+				if( j >= 0 )
+				{
+					var u = uv.getX( i ) - step/n;
+					if( tri % 2 ) u += 0.5 - 1/n;
+					uv.setX( i, u );
+				}
+
+				// normals
+				var nx = nor.getX( i ),
+					ny = nor.getY( i ),
+					nz = nor.getZ( i );
+				if( nz > 0 )
+				{
+					v.set( x, y, z );
+					v.subVectors( w, v ).normalize();
+					v.x *= 0.5;
+					v.y *= 0.2;
+					v.normalize( );
+					nor.setXYZ( i, v.x, v.y, v.z );
+				}
+				else
+				{
+					nor.setXYZ( i, 0, 0, 0 );
+				}
+
+			}
+
+
+			// sticker material
+
+			var material = new THREE.MeshPhysicalMaterial( {
+					map: new THREE.TextureLoader().load( 'hologram-sticker/dual_image.jpg' ),
+					roughness: 0.8,
+					metalness: 1.2,
+					iridescence: 0.3,
+				} );
+
+
+			// sticker
+
+			var sticker = new THREE.Mesh( geometry,	material );
+				scene.add( sticker );
+
+
+			// animation loop
+
+			function animate( t )
+			{
+				controls.update( );
+
+				var shift = THREE.MathUtils.mapLinear( camera.aspect, 1, 2, 1/4, 0 );
+
+				scene.background.offset.set(
+					shift - controls.getAzimuthalAngle()/25,
+					0.05 - controls.getPolarAngle()/25
+				);
+
+				renderer.render( scene, camera );
+			}
+		</script>
+	</body>
+</html>
+
+
diff --git a/threejs/hologram-sticker/dual_image.jpg b/threejs/hologram-sticker/dual_image.jpg
diff --git a/threejs/hologram-sticker/image_source.txt b/threejs/hologram-sticker/image_source.txt
@@ -0,0 +1,21 @@
+https://pixabay.com/photos/temple-kinkakuji-temple-snow-7827224/
+author: Kanenori
+license: Pixabay Content License 
+
+https://pixabay.com/photos/kinkaku-ji-lake-pavilion-golden-5605603/
+author: AlanNguyen317
+license: Pixabay Content License 
+
+https://pixabay.com/photos/asian-reside-living-room-japanese-4209448/
+author: PIRO4D
+license: Pixabay Content License 
+
+
+
+
+Music:
+https://pixabay.com/music/upbeat-japanese-bamboo-bansuri-corporate-99138/
+author: solbox
+license: Pixabay Content License 
+
+Music by <a href="https://pixabay.com/users/solbox-25907473/?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=99138">Solbox io</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=music&utm_content=99138">Pixabay</a>
diff --git a/threejs/hologram-sticker/room.jpg b/threejs/hologram-sticker/room.jpg