Categories
AR klimaatmuseum

AR Klimaatmuseum – guides


Index

Technische overwegingen

Tests.1

Eerste Schets

Notes General

Guides – technology stack


– LATEST WORKING !!! –

Modern ThreeJS with Vite (2021)

Resources
– Modern ThreeJS github template https://github.com/alvarosabu/modern-…
– ThreeJS https://threejs.org/
– Vite https://vitejs.dev/ 00:00
– Intro 01:52
– Basic Setup 04:21
– Install deps 05:07
– Dev Server 06:25
– Install types for three 08:11
– Basic Scene prep 11:14
– Split into sub files 18:08
– Code enhancement suggestions 23:58
– Debug using tweakpane 30:46
– FPS Graph 34:20
– Why Vite over Webpack 37:49
– Repository with the Code 38:51
– Wrapping Up 39:15 – Outro

In the root projects folder, in a terminal type:

npm create vite@latest [foldername]

choose vanilla

cd /[foldername]

install dependancies

npm install
npm install three

Contiue at: Split into sub files 18:08


https://www.udemy.com/course/build-modern-creative-portfolio-html-css-js-three-js-2022/learn/lecture/32236358#overview

Couldn’t get parcels working with npm so switched over to VITE as per this tutorial


Import module with npm

https://github.com/Sean-Bradley/Threejs-Boilerplate

  1. npm init
  2. npm install three
  3. npm install express
  4. use the files in from the github link or youtube video
  5. npm start

There is no build setup so I don’t know how to push this to a ftp server.


Three with Vite / three with html elements

https://www.udemy.com/course/modern-threejs-for-real-websites/

instead of npm init @vitejs/app (which didn’t work) I used

npm create vite@latest [foldername]

This created a new folder with the project files

Import Three with:

  import * as THREE from "https://unpkg.com/three@0.144.0/build/three.module.js"

  const scene = new THREE.Scene();

  console.log(scene)

run the vite project with:

npm run dev

At this point I have three working with vite. I will save this project as v0.1_vite


Categories
AR klimaatmuseum

AR Klimaatmuseum – Notes General


Index

Technische overwegingen

Tests.1

Eerste Schets

Notes General

Guides – technology stack


Working hit test for WEB

Working examples android:
https://threejs.org/examples/webxr_ar_cones.html 13
https://threejs.org/examples/webxr_ar_hittest.html 4
https://threejs.org/examples/webxr_ar_lighting.html 4
https://threejs.org/examples/webxr_ar_paint.html 3

Working example iOS:

https://threejs.org/examples/misc_exporter_usdz.html

Ocean shader that can look like oil

https://www.shadertoy.com/view/MdXyzX

3D fluid simulation shader

https://www.shadertoy.com/view/WsSXRy


Guides – technology stack


Categories
AR klimaatmuseum

AR Klimaatmuseum – Eerste Schets


Index

Technische overwegingen

Tests.1

Eerste Schets

Notes General

Guides – technology stack


Stappen voor eeste schets van kunstwerk

QR code maken en die naar test website laten verwijzen.

Eerste instances met morphing voor een render test op android.

Keuze maken voor attributen die representatief zijn en die morphen:

  • olie grond => abstracte particles in de lucht
  • hebzucht => collectiviteit

  • vissen op hun rug en stil => vissen zwemmend
  • bomen dor en dood => bomen vol en groen
  • geld in bundels => geld verspreid
  • persoon op een troon/ luie stoel => dansende mensen

Het lijkt erop dat er geen iOS/ android oplossing is voor het rondlopen door een scene. Er is wel een oplossing voor het rondkijken in de scene.

Er is wel een oplossing voor Android en voor iOS is de oplossing dat als je een USDZ file aanbied, je het model kan plaasten.

De oplossing is dus een scene in Blender te maken en die dan te exporteren als USDZ

Het is wel de vraag wat voor animaties je daarmee kan exporteren.

https://stackoverflow.com/questions/51009105/how-to-create-a-usdz-animation

add animation to a USDZ file:

Looping instances anination in blender exported to USDZ


TODO: test of een USDZ file ook op android werkt!


Categories
AR klimaatmuseum

AR Klimaatmuseum – Tests.1


Index

Technische overwegingen

Tests.1

Eerste Schets

Notes General

Guides – technology stack


Tests.1

VR animatie – FPS

https://threejs.org/examples/#webgl_animation_skinning_morph

Desktop: 60FPS
iPhone 6S: 60FPS
Samsung A8: 54FPS

VR particles – FPS

https://threejs.org/examples/#webgl_interactive_cubes

Desktop: 60FPS
iPhone 6S: 58FPS
Samsung A8: 60FPS

https://threejs.org/examples/#webgl_interactive_cubes_gpu

Desktop: 60FPS
iPhone 6S: 59FPS
Samsung A8: 20FPS (maar scrollen is smooth)

https://threejs.org/examples/#webgl_interactive_points

Desktop: 60FPS
iPhone 6S: 60FPS
Samsung A8: 60FPS

https://threejs.org/examples/#webgl_instancing_performance

Desktop: 60FPS
iPhone 6S: 60FPS – 1000 instances!
Samsung A8: 60FPS – 1000 instances!

https://threejs.org/examples/#css3d_sprites

Desktop: 60FPS
iPhone 6S: vloeiend, en vloeiend scrollen
Samsung A8: niet helemaal vloeiend, ook niet helemaal vloeiend scrollen, maar wel heel tof die morfings!

https://threejs.org/examples/#physics_oimo_instancing

Desktop: 60FPS
iPhone 6S: 30-60FPS
Samsung A8: 30-40FPS (wel ok)

AR

https://stemkoski.github.io/AR-Examples/

Basic cube

iPhone – goed en snel

Samsung – goed en snel, meer moeite met de QR te zien

Image Texture

iPhone – goed en snel
Samsung – goed en snel, meer moeite met de QR te zien

Rotating Globe

iPhone – goed en snel
Samsung – goed en snel, meer moeite met de QR te zien

Shader

iPhone – goed en snel
Samsung – goed en snel, meer moeite met de QR te zien

Load 3D model

iPhone – goed en snel
Samsung – goed en snel, meer moeite met de QR te zien

Hole in the Floor (box)

iPhone – goed en snel
Samsung – niet helemaal nauwkeuring maar snel, meer moeite met de QR te zien

Hole in the Floor (plane)

iPhone – goed en snel
Samsung – niet helemaal nauwkeuring maar snel, meer moeite met de QR te zien

Hole in the Floor (ring)

iPhone – goed en snel
Samsung – niet helemaal nauwkeuring maar snel, meer moeite met de QR te zien

Water Effect (AR)

iPhone – goed en snel
Samsung – goed en snel, meer moeite met de QR te zien

Magic Cube Effect

iPhone – goed en snel
Samsung – niet helemaal nauwkeuring maar snel, meer moeite met de QR te zien

Refraction

iPhone – goed en snel
Samsung – goed en snel, meer moeite met de QR te zien

Shadow

iPhone – goed en snel
Samsung – goed en snel, meer moeite met de QR te zien

Shadow Balls

iPhone – goed en snel
Samsung – goed en snel, meer moeite met de QR te zien

Uitkomsten Eerste Tests

VR en AR in de browser valt best veel mee te doen.

Instances kunnen honderden aan.

Morphing is een interessante techniek.

Animaties met morphing en instances.

AR valt ook mee als je QR codes gebruikt en de solving na een tijdje uitzet, gewoon verder gaat met gyroscoop en accelerometer.
De ground plane wordt dan niet gevonden, daar is nog wel goed omheen te werken.

Een kunstwerk die een beetje in de lucht zweeft heeft dan de voorkeur. Ik kan nog kijken of een QR code verticaal of horizontaal begint en dan een aanname doen over de plaatsing van het kunstwerk.

Categories
AR klimaatmuseum

AR Klimaatmuseum – Technische overwegingen


Index

Technische overwegingen

Tests.1

Eerste Schets

Notes General

Guides – technology stack


Technische overwegingen

Er zijn twee overwegingen:
1. moet er een app gedownload worden?
2. wat kunnen doorsnee telefoons aan zonder app (AR in de browser)?

Het heeft de voorkeur dat er geen app gedownload hoeft te worden. Het is dan de vraag wat een gemiddelde telefoon kan laten zien.

iPhones zijn over het algemeen erg solidie: een iPhone 6S uit 2015 kan als een goede baseline gezien worden voor iOS. Android heeft meer moeite met AR. Android is wel populair, dus veel mensen zullen dat hebben.

Onderzoek

Wat is er mogelijk in de browser?
Is AR is zwaarder dan VR?

Categories
AR klimaatmuseum

AR project voor het klimaatmuseum

Voor het klimaatmuseum ben ik gevraagd een AR kunstwerk te maken over de klimaatproblematiek.

Met het AR kunstwerk wil ik uitdrukkingen geven aan de uitdagingen die de klimaatcrisis brengt. Uitdagingen waarvan de mensheid uiteindelijk beter kan worden, als de juiste keuzes op tijd genomen worden. De uitdagingen kunnen als kansen gezien worden. Kansen op een schone leefomgeving, meer balans met natuurlijke hulpbronnen en gerechtigheid voor inheemse bevolgingen.

De klimaatcrisis is ook een crisis van het systeem van uitbuiting. Een diepe laag van onze geschiedenis en systeem is gebaseerd op een systeem van uitbuiting. Uitbuiting van de natuur en mensen.

De mensen die profiteren van dit systeem willen geen verandering, daarom duurt het te lang voor de noodzakelijke energietransitie. Nu de gevolgen aan den lijve te voelen zijn, is er enige kentering te merken, maar is het op tijd en voldoende?

Mijn kunstwerk geeft uitdrukking aan de noodzakelijke omwenteling die nodig is. Een omwenteling van fossiele brandstoffen naar hernieuwbare energie, van competitie naar samenwerking, van hebzucht naar voldoening, van egoisme naar levensgeluk op een leefbare planeet.

Waarom een AR kunstwerk?

Met AR zie je een virtuele wereld projecteerd over de ‘echte’ wereld. Met AR kan je grote werelden maken die normaal niet kunnen: beelden kunnen bewegen, groter dan levensecht zijn, je kunt onmogelijke werelden maken.

AR stelt een bezoeker ook instaat het kunstwerk op meerdere plaatsen te zien: op straat, of in het gemak van je eigen huis.

Index

Technische overwegingen

Tests.1

Eerste Schets

Notes General

Guides – technology stack