spohner.github.io



spohner.github.io

0 0


spohner.github.io

blog.spohner.io

On Github spohner / spohner.github.io

Skyggeanalyse i nettleseren

Et foredrag av Steffen Pøhner Henriksen under Geomatikkdagene 2014

  • Steffen Pøhner Henriksen
  • Masterstudent på sisteåret
  • NTNU
  • Prosjektoppave
  • Oransje kuben er realtime beregninger - presentasjonen er en nettleser
  • Neste 20 minutter skal du lære litt om skyggealgoritmer og skryte til gamere du kjenner (name-dropping)
  • Hopper over hvordan data transporteres til nettleseren

Hvordan kan vi gjøre webkart mer levende?

  • Synes webkart er interessant
  • Aleksander Nossum i Norkart
  • Mye er gjort før
  • Hva forbedres i kart med skygger?
  • Boligkjøp ++

@spohner Gratulerer! Gleder meg til å se litt fungerende kode snurre fortere enn skyggen

— Sverre Wisløff (@SverreWisloff) December 19, 2013

Hva forteller skyggene oss?

  • Romlige relasjoner
  • Posisjon i forhold til hverandre
  • Utenfor bilderammen
  • Solas posisjon
Put your speaker notes here. You can see them pressing 's'.

Først, la oss se hva som allerede finnes på internett!

Put your speaker notes here. You can see them pressing 's'.
Put your speaker notes here. You can see them pressing 's'.

hillshading

Ikke glem CityEngine og deres sol/skygge-funksjonalitet. I webkart er det bare hillshading!

Hentet fra Kartverkets cache-tjeneste

Put your speaker notes here. You can see them pressing 's'.

Vladimir Agafonkin @ Mapbox - https://www.mapbox.com/bites/00009/

Put your speaker notes here. You can see them pressing 's'.

Hva er hillshading?

  • Etterligning av skygger på terreng
  • Regnes ut ved å sammenligne normalvektoren til terrenget og solvektoren
  • Enkelt og raskt å beregne ut
  • Kartografisk triks
Put your speaker notes here. You can see them pressing 's'.
Arnold!

Algoritmer for utregning av skygger

  • Shadow volumes
  • Ray Tracing
  • Shadow maps
Det er her du kan snappe of noe å skryte om til gameren. Må gjøre kompromiss kvalitet vs kraft.

Shadow volumes

  • Doom 3
  • En skyggegeometri konstrueres
  • Pikselnøyaktig
Put your speaker notes here. You can see them pressing 's'.

Ray tracing

  • Fotorealistisk
  • Enkel idé, men krevende beregninger
Put your speaker notes here. You can see them pressing 's'.
		#include 
		#include 
		#include 
		typedef int i;typedef float f;struct v{
		f x,y,z;v operator+(v r){return v(x+r.x
		,y+r.y,z+r.z);}v operator*(f r){return
		v(x*r,y*r,z*r);}f operator%(v r){return
		x*r.x+y*r.y+z*r.z;}v(){}v operator^(v r
		){return v(y*r.z-z*r.y,z*r.x-x*r.z,x*r.
		y-y*r.x);}v(f a,f b,f c){x=a;y=b;z=c;}v
		operator!(){return*this*(1/sqrt(*this%*
		this));}};i G[]={247570,280596,280600,
		249748,18578,18577,231184,16,16};f R(){
		return(f)rand()/RAND_MAX;}i T(v o,v d,f
		&t,v&n){t=1e9;i m=0;f p=-o.z/d.z;if(.01
		p)t=p,n=v(0,0,1),m=1;for(i k=19;k--;)
		for(i j=9;j--;)if(G[j]&1k){v p=o+v(-k
		,0,-j-4);f b=p%d,c=p%p-1,q=b*b-c;if(q>0
		fs=-b-sqrt(q);if(s<\t&&s>.01)t=s,n=!(
		p+d*t),m=2;}}return m;}v S(v o,v d){f t
		;v n;i m=T(o,d,t,n);if(!m)return v(.7,
		.6,1)*pow(1-d.z,4);v h=o+d*t,l=!(v(9+R(
		),9+R(),16)+h*-1),r=d+n*(n%d*-2);f b=l%
		n;if(b<0||T(h,l,t,n))b=0;f p=pow(l%r*(b
		>0),99);if(m&1){h=h*.2;return((i)(ceil(
		h.x)+ceil(h.y))&1?v(3,1,1):v(3,3,3))*(b
		*.2+.1);}return v(p,p,p)+S(h,r)*.5;}i
		main(){printf("P6 512 512 255 ");v g=!v
		(-6,-16,0),a=!(v(0,0,1)^g)*.002,b=!(g^a
		)*.002,c=(a+b)*-256+g;for(i y=512;y--;)
		for(i x=512;x--;){v p(13,13,13);for(i r
		=64;r--;){v t=a*(R()-.5)*99+b*(R()-.5)*
		99;p=S(v(17,16,8)+t,!(t*-1+(a*(R()+x)+b
		*(y+R())+c)*16))*3.5+p;}printf("%c%c%c"
		,(i)p.x,(i)p.y,(i)p.z);}}

.h>.h>.h>
Put your speaker notes here. You can see them pressing 's'.

Shadow maps

  • Den mest populære metoden i dag
  • Z-buffer
  • Rask med dagens maskinvare
Put your speaker notes here. You can see them pressing 's'.

TUNGE BEREGNINGER!

Put your speaker notes here. You can see them pressing 's'.

Bruke GPU i nettleseren

  • Parallellisere
  • HTML5 Canvas
  • WebGL
  • THREE.js
Put your speaker notes here. You can see them pressing 's'.
Put your speaker notes here. You can see them pressing 's'.
Put your speaker notes here. You can see them pressing 's'.

Shadow Visualization Demo

  • Leaflet.js
  • Three.js
  • Terrengdata fra Kartverket
  • Solposisjon fra SunCalc.js
  • OSMBuildings
  • Bygningsdata fra OpenStreetMap
Husk å takke Bjørn Sandvik for fantastisk blogg.

shadow.spohner.io

@spohner

Put your speaker notes here. You can see them pressing 's'.

Takk for meg!

Put your speaker notes here. You can see them pressing 's'.