Computer Graphics Exercise – Jakob Wagner Computer ...
Transcript of 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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
Particle Simulation
CPU Particle Tutorials:
http://www.opengl-tutorial.org/intermediate-tutorials/billboards-particles/particles-instancing/
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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
- 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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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://learnopengl.com/#!In-Practice/Text-Rendering
http://www.mbsoftworks.sk/index.php?page=tutorials&series=1&tutorial=12
8
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
Shadow Mapping
Tutorials:
http://learnopengl.com/#!Advanced-Lighting/Shadows/Shadow-Mapping
http://www.opengl-tutorial.org/intermediate-tutorials/tutorial-16-shadow-mapping/
http://fabiensanglard.net/shadowmapping/index.php
http://sunandblackcat.com/tipFullView.php?l=eng&topicid=34&topic=Shadow-Mapping
http://ogldev.atspace.co.uk/www/tutorial23/tutorial23.html
10
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
Deferred Shading
Tutorials:
http://www.neuroproductions.be/opengl/making-a-3d-game-with-opengl-deferred-shading-and-stuff/
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
http://ogldev.atspace.co.uk/www/tutorial35/tutorial35.html
13
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
- 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
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
Light Scattering
Tutorials:
http://http.developer.nvidia.com/GPUGems3/gpugems3_ch13.html
http://fabiensanglard.net/lightScattering/index.php
15
9 – Advanced Techniques
Computer Graphics Exercise – Jakob Wagner
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