1. 3D Building visualization for
environmental impact
assessment
Daniel Gastón
GIS Software Developer
WebGL Camp – July 2012

2. Index
• Prodevelop
• Motivation
• Buildings Visualization
– Architecture
– Buildings Data Preparation
– Buildings Rendering
• Buildings Processing
– Solar Incidence Servlet
– Visibility Servlet
• Conclusions
WebGL Camp – July2012 2 / 20

3. Geographic Information Systems (GIS)
WebGL
WebGL Camp – July2012 3 / 20

4. 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)
WebGL Camp – July2012 4 / 20

5. Buildings Visualization
5 / 20

6. Architecture Diagram
WebGL Camp – July2012 6 / 20

7. 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
WebGL Camp – July2012 7 / 20

8. Buildings Data Preparation
FIDE (Edification Exchange Data Format)
• Input:
– FIDE: edification data in XML format
• Output Data:
– JSON with topological attributes
FIDE Java Processing JSON
WebGL Camp – July2012 8 / 20

9. Buildings Rendering
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
WebGL Camp – July2012 9 / 20

10. Demo
WebGL Camp – July2012 10 / 20

11. Buildings Processing
11 / 20

12. Architecture Diagram
WebGL Camp – July2012 12 / 20

13. Solar Incidence Servlet
ServletInput = {
BUILDING: JSON.stringify(FIDE),
START_MONTH: 7,
START_DAY: 1,
START_HOUR: 14.00,
END_MONTH: 7, Solar
Incidence
END_DAY: 5,
Servlet
END_HOUR: 17.00,
HOUR_STEP: 1.0,
DAY_STEP: 1
};
[0, 0.189, 14.667, 4.580, …]
Solar Incidence Values in sync with FIDE faces
WebGL Camp – July2012 13 / 20

14. Solar Incidence Servlet
…Servlet takes into account:
• Solar ephemerides
• Digital Elevation Model
• Cadastre buildings
• FIDE building faces
…and the likelihood of solar blocks between them
WebGL Camp – July2012 14 / 20

15. Demo
WebGL Camp – July2012 15 / 20

16. Visibility Servlet
[[lat1, lon1, visibility1] ,
…,
ServletInput = {
[latN, lonN, visibilityN]]
BUILDING: JSON.stringify(FIDE),
MIN_X: 724900,
MAX_X: 725500, Visibility
MIN_Y: 4371500, Servlet
MAX_Y: 4372200,
CELL_SIZE: 10
};
Reproyection
Servlet
[[X1, Y1, visibility1] , [X2, Y2, visibility2] , … , [XN, YN, visibilityN]]
WebGL Camp – July2012 16 / 20

17. Visibility Servlet
WebGL Camp – July2012 17 / 20

18. Visibility Servlet
FIDE building
WebGL Camp – July2012 18 / 20

19. Conclusions
• Using WebGL represents an improvement
• Time-consuming (esp. Visibility processing)
• Contribution to:
– WebGL community (open source code)
– Sustainable energy policy
WebGL Camp – July2012 19 / 20

20. Daniel Gastón
GIS Software Developer
dgaston@prodevelop.es
http://github.com/RealFlow/godzi-webgl/tree/buildings