WebGL Camp Europe Presentation

3D Building visualization for

environmental impact

assessment

Daniel Gastón

GIS Software Developer

WebGL Camp – July 2012

WebGL Camp – July2012

Index

• Prodevelop

• Motivation

• Buildings Visualization

– Architecture

– Buildings Data Preparation

– Buildings Rendering

• Buildings Processing

– Solar Incidence Servlet

– Visibility Servlet

• Conclusions

2 / 20

WebGL Camp – July2012 3 / 20

Geographic Information Systems (GIS)

WebGL

WebGL Camp – July2012

Motivation

• Optimize the passive energy consumption of buildings

– Buildings sector represents the energetic sector with the highest potential in

terms of energy reduction —estimation of 29% for 2020— [1]

• Industrial research in:

– calculus of energy demand models for buildings (Solar

Incidence)

– indirect environmental impact (Visibility)

• WebGL-based visualization

[1] Contribution of Working Group III to the Fourth Assessment Report of The Intergovernmental Panel on Climate Change (2007)

4 / 20

Buildings Visualization

5 / 20

WebGL Camp – July2012

Architecture Diagram

6 / 20

WebGL Camp – July2012

Buildings Data Preparation

Cadastre

• Input:

– 2D Cadastre: data coming from the Spanish cadastre in SHP

format

• Output Data:

– JSON with topological and semantic attributes

Shapefile GeoJSON Java Processing JSON

7 / 20

WebGL Camp – July2012

FIDE (Edification Exchange Data Format)

• Input:

– FIDE: edification data in XML format

• Output Data:

– JSON with topological attributes

FIDE Java Processing JSON

Buildings Data Preparation

8 / 20

WebGL Camp – July2012

1. Load buildings data (JSON files)

2. Extrude (only cadastre data)

3. Create node

4. Specify vertex attribute data

– OSGJS does not have Tessellation support.

– Adaptation of Poly2tri Constrained Delaunay Triangulation library in JS

– Tessellation takes place in the client side

5. Attach node to the scene

Buildings Rendering

9 / 20

WebGL Camp – July2012

Demo

10 / 20

Buildings Processing

11 / 20

WebGL Camp – July2012

Architecture Diagram

12 / 20

WebGL Camp – July2012

ServletInput = {

BUILDING: JSON.stringify(FIDE),

START_MONTH: 7,

START_DAY: 1,

START_HOUR: 14.00,

END_MONTH: 7,

END_DAY: 5,

END_HOUR: 17.00,

HOUR_STEP: 1.0,

DAY_STEP: 1

};

[0, 0.189, 14.667, 4.580, …]

Solar Incidence Servlet

Solar

Incidence

Servlet

Solar Incidence Values in sync with FIDE faces

13 / 20

WebGL Camp – July2012

…Servlet takes into account:

• Solar ephemerides

• Digital Elevation Model

• Cadastre buildings

• FIDE building faces

…and the likelihood of solar blocks between them

Solar Incidence Servlet

14 / 20

WebGL Camp – July2012

Demo

15 / 20

WebGL Camp – July2012

ServletInput = {

BUILDING: JSON.stringify(FIDE),

MIN_X: 724900,

MAX_X: 725500,

MIN_Y: 4371500,

MAX_Y: 4372200,

CELL_SIZE: 10

};

[[X1, Y1, visibility1] , [X2, Y2, visibility2] , … , [XN, YN, visibilityN]]

[[lat1, lon1, visibility1] ,

… ,

[latN, lonN, visibilityN]]

Reproyection

Servlet

Visibility Servlet

Visibility

Servlet

16 / 20

WebGL Camp – July2012

Visibility Servlet

17 / 20

WebGL Camp – July2012

Visibility Servlet

18 / 20

FIDE building

WebGL Camp – July2012

Conclusions

19 / 20

• Using WebGL represents an improvement

• Time-consuming (esp. Visibility processing)

• Contribution to:

– WebGL community (open source code)

– Sustainable energy policy

Daniel Gastón

GIS Software Developer

[email protected]

http://github.com/RealFlow/godzi-webgl/tree/buildings