Computergraphics Exercise 15/16

Computergraphics Exercise 15/166. Advanced Techniques

Jakob Wagner for internal use only

Advanced Techniques

Simulation - Particle Simulation

Visualisation - Data Visualisation on Globe

Rendering - Shadow Mapping

- Deferred Shading

- Light Scattering

Porting - to WebGL using Javascript

Particle Simulation

- dynamic objects changing position etc. each frame, spawned from an emitter object

- each particle is represented by point or quad facing the camera

- particles have properties like position, velocity, lifetime

- in each frame, the particle properties are updated and new particles are spawned

- when particle reaches end of lifetime, it is removed (replaced by a newly spawned particle)

- particles are spawned either from a fixed point or a random position on a surface (disk, spiral etc.)

- on CPU: store particle representation on CPU1. update particle properties in a function2. reupload the data to the buffer (problem: synchronisation - content may be still be used in execution of previous

command)

- on GPU: double buffering on GPU1. “render” particles from first buffer and update properties using a Geometry Shader, write resulting particles back to

second buffer using Transform Feedback2. swap first and second buffer, draw first buffer

http://www.opengl-tutorial.org/intermediate-tutorials/billboards-particles/particles-instancing/

Particle Simulation

CPU Particle Tutorials:


GPU Particle Tutorials:

http://www.mbsoftworks.sk/index.php?page=tutorials&series=1&tutorial=26

http://ogldev.atspace.co.uk/www/tutorial28/tutorial28.html







Visualisation on Globe

- display geographically mapped data on earth globe

- use line primitives and encode data in color and length

- lines are created at regular intervals on the globe surface

- line calculation:- from text: data at latitude and longitude in text file and write a loader

create lines on globe at data point positions, calculate properties and store in vertex buffer

- from map: data color-coded in map used as texturecreate points on globe in regular interval and store in bufferin Geometry Shader transform points to lines and calculate properties by sampling the texture

- line creation with Geometry Shader:- every frame: computed every frame, allows real-time modification

- preprocessing: computation done before rendering loop and result stored in buffer using Transform Feedback

http://data-arts.appspot.com/globe/

Visualisation on Globe

Geometry Shader Tutorials:

http://learnopengl.com/#!Advanced-OpenGL/Geometry-Shader

http://www.lighthouse3d.com/tutorials/glsl-tutorial/geometry-shader/

https://open.gl/geometry

Transform Feedback Tutorials:

https://open.gl/feedback









- character glyphs are stored in texture

- for each character in the printed text a quad is rendered with the texture coordinates to contain character glyph

- store quad for each character in one VBO

- bitmap fonts: characters are stored in one texture, manually calculate quad dimensions

- TrueType fonts: load vector fonts, generate bitmap for each character and automatically calculate quad dimensions

Text Rendering

http://learnopengl.com/#!In-Practice/Text-Rendering

solid-color quads texture quads

sentence

font texture

apply texture

dimensions

positions

Text Rendering

Bitmap Fonts Tutorials:

http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-11-2d-text/

http://lazyfoo.net/tutorials/OpenGL/20_bitmap_fonts/index.php

Truetype Fonts Tutorials:











http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-16-shadow-mapping/

Shadow Mapping

- offscreen rendering of scene seen from light perspective to light Framebuffer

- use transformation and projection matrix of light (perspective projection for spot light and orthographic for directional sun light)

- all objects are rendered with same shader with no computations in fragment shader, only depth texture is used

- scene is rendered from camera perspective as usual

- depth texture of light Framebuffer is used as sampler uniform in the shader

- in the fragment shader the fragment position is transformed into the lights projection space

- depth of fragment is compared with depth in shadow map (light depth buffer), if smaller then the fragment is lit

depth from light perspective scene from camera perspective

Shadow Mapping

Tutorials:

http://learnopengl.com/#!Advanced-Lighting/Shadows/Shadow-Mapping


http://fabiensanglard.net/shadowmapping/index.php

http://sunandblackcat.com/tipFullView.php?l=eng&topicid=34&topic=Shadow-Mapping












Deferred Shading

- similar to offscreen rendering but no shading computation

- in the “first pass” the scene is rendered to the “G-Buffer” Framebuffer, storing for each fragment:- diffuse color- specular intensity- position/ depth - normal

- in the “second pass” a screenquad is rendered with the G-Buffer textures as samplers

- for each fragment the values are read from the G-Buffer and the shading computation is done with them

- lighting computation only for visible fragments -> performance improvement

- allows many “screen space” post-processing effects

G-Buffer

Deferred Shading

diffuse buffer

depth buffer

http://www.neuroproductions.be/opengl/making-a-3d-game-with-opengl-deferred-shading-and-stuff/

normal buffer

Scenestore pixel

attributes

final image

shade

Deferred Shading

Tutorials:


http://learnopengl.com/#!Advanced-Lighting/Deferred-Shading

http://gamedevs.org/uploads/deferred-shading-tutorial.pdf

http://www.dennisfx.com/wp-content/uploads/2013/02/Report_DRendering_Toufexis_D.pdf












- simulates sunrays around the edges of objects in foreground

- render light ray source in bright color, all other objects black to Light Texture

- use radial blur on light texture to simulate rays: for each pixel, add up weighted color of samples taken along path to light origin

- draw scene normally

- blend blurred light texture with normal scene image

Light Scattering

http://fabiensanglard.net/lightScattering/index.phpradial blur

✕

✕

✕

sample 1

sample 2

sample 3

light texture blurred light texture normally rendered frame final frame

blending

Light Scattering

Tutorials:

http://http.developer.nvidia.com/GPUGems3/gpugems3_ch13.html

http://fabiensanglard.net/lightScattering/index.php





WebGL port

- the port should have the same functionality as the C++ version

- no graphics framework like three.js should be used

- for the matrix math an external library can be used

WebGL Tutorials:

https://developer.mozilla.org/de/docs/Web/API/WebGL_API

http://learningwebgl.com/blog/?page_id=1217

Example:

http://kritten.org/cg/







Merry Christmas!

http://www.home-designing.com/2009/12/christmas-interiors

Computergraphics Exercise 15/16

Documents

Transcript of Computergraphics Exercise 15/16