Computer Graphics Exercise – Jakob Wagner Computer ...

9 – Advanced Techniques

Computer Graphics Exercise – Jakob Wagner

Computer Graphics Exercise9. Advanced Techniques

Jakob Wagner for internal use only



Optional Assignment – Advanced Techniques

Simulation - Particle Simulation

Visualisation - Data Visualisation on Globe

Rendering - Shadow Mapping

- Deferred Shading

- Light Scattering

Porting - to WebGL using Javascript

2



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/

3



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

4









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/

5



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

6











- 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

7



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:



8











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 9



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


10













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

11



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

12



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


13













- 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

14



Light Scattering

Tutorials:

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

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

15







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/

16









Merry Christmas!

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

17

Computer Graphics Exercise – Jakob Wagner Computer ...

Documents