Categories
Uncategorized

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
Uncategorized

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
Uncategorized

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
Uncategorized

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
Uncategorized

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
Uncategorized

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

Categories
Uncategorized

ARTWORLD – resize canvas

We want the game to be an ’empty’ canvas. The shape or size is not predefined.

So when resizing the window (when possible), the window should show more of the world, leaving all the elements where they where.

Phaser has a scale manager build in that handles different preferences

This one is suitable for our case: https://phaser.io/examples/v3/view/scalemanager/resize

There is also this examples, but it leaves scroll bars in the window:
https://phaser.io/examples/v3/view/scalemanager/manually-resize

When resizing some elements have to updated:
* the camera bounds
* the background bounds
* elements that are scaled or positioned relative to the window width and height

We try to give everything an absolute position.


If the player wants a more scaled up view, we provide zoom in and out buttons for that.

Here is camera zoom control example: https://labs.phaser.io/edit.html?src=src/game%20objects/container/container%20and%20camera%20zoom.js&v=3.55.2

In the main menu, zooming the camera out, does not update the background. So I would have to use the ScaleManager here.
https://photonstorm.github.io/phaser3-docs/Phaser.Scale.ScaleManager.html

In the main game the background is set to very large, maybe there this technique does work…

Zooming with the ScaleManager does nothing…


Article about rescaling scenes: https://phaser.discourse.group/t/making-the-game-to-fill-all-the-available-window-space/6420


Categories
Uncategorized

Technical Paper for ARTWORLD

As mentioned in the previous post we are developing a 3D game for children to make and exhibit art in.

The client tells us their idea, dream, vision and frame. We translate it into an achievable plan. Time was quite short on this project: 6 months to develop a 3D game with quite a lot of features, especially concerning the storage and management of art works. There is also a lot of interactivity that has to be coded.

The achieve the goal we make design choices early on that will help us achieve the vision with out slowing us down.

We set a clear Minimal Viable Product with the client and a first deadline to meet the MVP. We build in time to refine the MVP after the first deadline.

The first technical decision we made was to use web technologies for the game. Web technologies came a long way in the years and have some clear advantages:

  • the code can be run on phones, tables, laptops, PC’s with ease. We expect the children to use many different devices.
  • the backend code and the front end code can be developed in Javascript

For the look and feel of the game we don’t want to go for a full 3D look. It adds a lot of complexity to the code, view rendering and also use of the game.

Less of this…

And more of this…

Sometimes flat is better. Objects can’t be obstructed by each other as much. It add less complexity to the development, and the code is lighter on the device running it.

Our game plan is as follows:

Categories
Uncategorized

Starting work on ARTWORLD

For the foundation De Vrolijkheid we were asked to develop a online game in which children can make and exhibit art.

We will make a game with art-making tools

In the 3D game world children can explore art works and make their own.

We are very excited to have been granted the opportunity to work on this project. We have worked with De Vrolijkheid before on a videomapping for a small museum project.

We will start work on this project soon. We will keep a blog with progress on the project.

For this project we will use the phaser.io game framework, with the Nakama game server.