• Home

  • Documents

  • Game Graphics & Real-time Rendering...Last week - Looked at how to track mouse points in a fragment...
30
Game Graphics & Real-time Rendering CMPM 163, W2018 Prof. Angus Forbes (instructor) [email protected] Lucas Ferreira (TA) [email protected] creativecoding.soe.ucsc.edu/courses/cmpm163 github.com/CreativeCodingLab

Game Graphics & Real-time Rendering...Last week - Looked at how to track mouse points in a fragment shader, and how to find the distance between a fragment and that point - Showed

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

  • Game Graphics & Real-time RenderingCMPM 163, W2018

    Prof. Angus Forbes (instructor)[email protected]

    Lucas Ferreira (TA)[email protected]

    creativecoding.soe.ucsc.edu/courses/cmpm163github.com/CreativeCodingLab

  • Last week- Looked at how to track mouse points in a fragment shader, and

    how to find the distance between a fragment and that point- Showed how to use a texture as a height map in a vertex

    displacement shader- Introduced Perlin noise to generate naturalistic dynamic textures

    and meshes- Looked at how to use point sprites in Three.js and to texture

    them using a fragment shader- Introduced particle systems & the dat.gui library- https://creativecoding.soe.ucsc.edu/courses/cmpm163/code/wee

    k3_codeExamples.zip- https://creativecoding.soe.ucsc.edu/courses/cmpm163/code/wee

    k4_codeExamples.zip

  • This week

    - Homework #2 introduced – Due Feb. 18th at 12noon

    - Voronoi cells, redux- Drawing 2D shapes using signed distance functions (SDFs)- Drawing nice looking text using SDFs- Raymarching 3D objects - Shading 3D SDFs- Morphing between SDFs- https://creativecoding.soe.ucsc.edu/courses/cmpm163/code/wee

    k5_codeExamples.zip

  • Homework 2

    - Homework #2 introduced – Due Feb. 18th at 12noon

    - Design two scenes:

    1) Outdoor scene using cube map, height map, textures2) Abstract scene using noise functions and particle systems

    - Some points given for creativity, beauty, composition.- Extra credit given for additional functionality (textured point

    sprites, reflection+refractive effects)

  • This week

    - Homework #2 introduced – Due Feb. 18th at 12noon

    - Voronoi cells, redux- Drawing 2D shapes using signed distance functions (SDFs)- Drawing nice looking text using SDFs

    - Midterm review

    - https://creativecoding.soe.ucsc.edu/courses/cmpm163/code/week5_codeExamples.zip

  • Voronoi tesselationGiven a set of points {p1, …, pn} on a 2D plane, a Voronoi cell is defined for each point pk where the distance to pk is less than the distance to any other cell pj.

  • Voronoi tesselation- In fragment shader, we are able to determine the geometry

    without passing in any vertices to the vertex shader (other than those that define the fullscreen quad).

    - That is, we let each pixel in the fragment shader determine whether or not it is part of a shape defined by some function. (see iquilezles.org/www/articles/voronoilines/voronoilines.htm for a discussion on how to calculate cell borders accurately.)

    - We can extend this idea to draw arbitrary shapes: https://www.shadertoy.com/view/4dfXDn

  • Signed distance functions (SDF)float circleDist(vec2 p, float radius) {

    return length(p) - radius;}

    Ex:p = vec2(200.0,0.0);radius = 100.0;

    return value > 0.0; //is outside the circle

  • Signed distance functions (SDF)float circleDist(vec2 p, float radius) {

    return length(p) - radius;}

    Ex:p = vec2(25.0,25.0);radius = 40.0;

    return value < 0.0; //is inside the circle

  • Signed distance functions (SDF)float circleDist(vec2 p, float radius) {

    return length(p) - radius;}

    Ex:p = vec2(0.0,-100.0);radius = 100.0;

    return value = 0.0; //is on the circle’s edge

  • 2D Signed distance functions (SDF)https://www.shadertoy.com/view/4dfXDn

  • Different ways of rendering textHTML: overlay a div on top of the webGL canvas and draw with normal html- Can’t do anything super fancy with the text, not part of OpenGL

    pipeline

    Font atlas: store each letter onto an image, keep track of the texture coords for each letter, use those texture coords to decal a rectangle- Good for overlaying on top of scene, can use color info to find

    edges or update colors inside or outside of text- Looks blurry if zooming in and out

  • Different ways of rendering textSDF atlas: Using the vector information for the characters in the font, generate a SDF for each letter, such that any pixel inside the font outline is positive and distance falls off for pixels outside the font outline.

    - Looks good at a much wider range of sizes- Can use distance information to create outlines of various widths- Can use distance information to define more sophisticated texturing

    strategies- Not 100% perfect - Can still create some artifacts if too large/small

  • Different ways of rendering textVector atlas: Using the mathematical functions (bezier curves + lines) that define each character in the font, generate a texture that stores all of this data, as well as a complex indexing scheme to access these functions.- Looks PDF perfect- Handles all vector graphics, emojis, SVGs, etc.- Complex to get right- Only solution is commercial (http://sluglibrary.com), doesn’t have a

    Javascript/WebGL version yet (although there is a published paper about the technique which could probably be re-implemented for the web)

  • Font atlas

  • SDF atlas

  • SDF for rendering textOverview:https://blog.mapbox.com/drawing-text-with-signed-distance-fields-in-mapbox-gl-b0933af6f817

    Demo:https://mapbox.s3.amazonaws.com/kkaefer/sdf/index.html

    Source: view-source:https://mapbox.s3.amazonaws.com/kkaefer/sdf/index.html

  • 3D Signed distance functions (SDF)https://www.shadertoy.com/view/Xds3zN

  • 3D Signed distance functions (SDF)www.shadertoy.com/view/lsf3zrwww.iquilezles.org/www/material/nvscene2008/rwwtt.pdf

  • Midterm reviewConcepts:

    - Rendering pipeline- Lighting- Texturing- Render-to-texture

  • Midterm reviewCode:

    - Vertex & fragment shaders- GLSL data types (attribute, uniform, varying)- Environment mapping (reflection)- Offscreen buffers- Vertex displacement- Point sprites- Height maps

  • Next week

    - Midterm on Tuesday!

    - Raymarching 3D objects - Shading 3D SDFs- Morphing between SDFs

  • Game Graphics & Real-time RenderingCMPM 163, W2018

    Prof. Angus Forbes (instructor)[email protected]

    Lucas Ferreira (TA)[email protected]

    creativecoding.soe.ucsc.edu/courses/cmpm163github.com/CreativeCodingLab


Vertex and Fragment Shaders for Game Developers978-1-4842-4457-9/1.pdf · Development Vertex and Fragment Shaders for Game Developers Kyle Halladay. Practical Shader Development:

Vertex and Fragment Shaders for Game Developers978-1-4842-4457-9/1.pdf · Development Vertex and Fragment Shaders for Game Developers Kyle Halladay. Practical Shader Development:

Documents
Introduction to DirectX Raytracing: Overview and ...intro-to-dxr.cwyman.org/presentations/IntroDXR_Ray... · –Intersection shader(s)define how rays intersect geometry –Miss shader(s)define

Introduction to DirectX Raytracing: Overview and ...intro-to-dxr.cwyman.org/presentations/IntroDXR_Ray... · –Intersection shader(s)define how rays intersect geometry –Miss shader(s)define

Documents
A Non-Photorealistic Fragment Shader in OpenGL 2.0 Bert Freudenberg Institut für Simulation und Graphik University of Magdeburg, Germany

A Non-Photorealistic Fragment Shader in OpenGL 2.0 Bert Freudenberg Institut für Simulation und Graphik University of Magdeburg, Germany

Documents
Create Shader

Create Shader

Documents
Shader compilation

Shader compilation

Engineering
Computer Graphics: Shader Computer Graphics Shader

Computer Graphics: Shader Computer Graphics Shader

Documents
Stupid OpenGL Shader Tricks Simon Green, NVIDIA. Overview New OpenGL shading capabilities: –fragment programs –floating point textures –high level shading

Stupid OpenGL Shader Tricks Simon Green, NVIDIA. Overview New OpenGL shading capabilities: –fragment programs –floating point textures –high level shading

Documents
Colibri T30 - Toradex · OpenGL® ES 1.1, and 2.0 Dual Core (2 fragment shader pipe, vertex shader pipe) OpenGL ES Shader Performance 16 GFLOPS Programmable pixel shader Programmable

Colibri T30 - Toradex · OpenGL® ES 1.1, and 2.0 Dual Core (2 fragment shader pipe, vertex shader pipe) OpenGL ES Shader Performance 16 GFLOPS Programmable pixel shader Programmable

Documents
Fragment Tests, Images and Fragment Testsdavid/Classes/CS432/Lectures/L-13_Buffers.6.pdf•Use the fragment shader to do image processing-Image filtering-Pseudo Color •Use multiple

Fragment Tests, Images and Fragment Testsdavid/Classes/CS432/Lectures/L-13_Buffers.6.pdf•Use the fragment shader to do image processing-Image filtering-Pseudo Color •Use multiple

Documents
Iray Toon Shader Overview - DAZ 3Ddocs.daz3d.com/lib/exe/fetch.php/public/read_me/index/37527/37527... · Iray Toon Shader Overview The Iray Toon Shader is a customer shader for Iray

Iray Toon Shader Overview - DAZ 3Ddocs.daz3d.com/lib/exe/fetch.php/public/read_me/index/37527/37527... · Iray Toon Shader Overview The Iray Toon Shader is a customer shader for Iray

Documents
Shader Program in Gamebryo. Introduction Shader? A complete Rendering Effect to apply to an object Shader Program – Vertex/Pixel Shader Shader Programs

Shader Program in Gamebryo. Introduction Shader? A complete Rendering Effect to apply to an object Shader Program – Vertex/Pixel Shader Shader Programs

Documents
shader Model 3.0, Best Practices - Nvidiadownload.nvidia.com/.../6800_Leagues_SM3_Best_Practices.pdf · point Vertex Data Per instance data VS_3_0 Stream 0 ... technique. Fragment

shader Model 3.0, Best Practices - Nvidiadownload.nvidia.com/.../6800_Leagues_SM3_Best_Practices.pdf · point Vertex Data Per instance data VS_3_0 Stream 0 ... technique. Fragment

Documents
Rendered Private: Making GLSL Execution Uniform to Prevent ... · GLSL program, called fragment shader, colors each fragment, which also involves floating-point operations, such

Rendered Private: Making GLSL Execution Uniform to Prevent ... · GLSL program, called fragment shader, colors each fragment, which also involves floating-point operations, such

Documents
Shader (HLSL) - Softwarepraktikum · Struktur und Inhalt Einleitung Shader Beispiele Shader in XNA NVIDIA FX Composer. 11.06.2008 Sopra SS08 8 Shader Ziel: Anzeige verschieden-farbiger

Shader (HLSL) - Softwarepraktikum · Struktur und Inhalt Einleitung Shader Beispiele Shader in XNA NVIDIA FX Composer. 11.06.2008 Sopra SS08 8 Shader Ziel: Anzeige verschieden-farbiger

Documents
Pixel Shader

Pixel Shader

Documents
Procedural Planetary Multi-resolution Terrain Generation ...quadtree!tessellation shader!fragment Figure 4: Terrain rendering graphics pipeline, the upper part runs on CPU while the

Procedural Planetary Multi-resolution Terrain Generation ...quadtree!tessellation shader!fragment Figure 4: Terrain rendering graphics pipeline, the upper part runs on CPU while the

Documents
Uniform variables - Cornell University• Uniform variables are shared between vertex and fragment shaders. • Declare once in vertex shader and once more in fragment shader. •

Uniform variables - Cornell University• Uniform variables are shared between vertex and fragment shaders. • Declare once in vertex shader and once more in fragment shader. •

Documents
OpenGL Shader Language Vertex and Fragment Shading Programs

OpenGL Shader Language Vertex and Fragment Shading Programs

Documents
2021/11/12 16:53 1/7 Shader Sets Shader Sets

2021/11/12 16:53 1/7 Shader Sets Shader Sets

Documents
Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Introduction to WebGL - Voxelent · 2014-03-25 · Vertex Shader Fragment Shader Uniforms Framebuffer Varyings Attribute input input input input output i.e. per-vertex color, normals

Documents
Shader List

Shader List

Documents
Eliminating Redundant Fragment Shader Executions on a ...personals.ac.upc.edu/jmanel/papers/isca14.pdfthis fragment redundancy for a set of commercial Android applications, and found

Eliminating Redundant Fragment Shader Executions on a ...personals.ac.upc.edu/jmanel/papers/isca14.pdfthis fragment redundancy for a set of commercial Android applications, and found

Documents
Eliminating Redundant Fragment Shader Executions on a Mobile … · 2014. 6. 22. · 978-1-4799-4394-4/14/$31.00 c 2014 IEEE Eliminating Redundant Fragment Shader Executions on a

Eliminating Redundant Fragment Shader Executions on a Mobile … · 2014. 6. 22. · 978-1-4799-4394-4/14/$31.00 c 2014 IEEE Eliminating Redundant Fragment Shader Executions on a

Documents
Programmation sur Carte Graphique - labri.fr · Spéciales: gl_position, gl_pointSize, gl_clipVertex Varying variables : entrée du fragment shader, interpolées entre les sommets

Programmation sur Carte Graphique - labri.fr · Spéciales: gl_position, gl_pointSize, gl_clipVertex Varying variables : entrée du fragment shader, interpolées entre les sommets

Documents
Geometry Shader

Geometry Shader

Documents
The Evolution of Computer Graphics - nvidia.com · Pixel. Shader. Blend / Depth. Memory. Pixel. Shader. Blend / Depth. Memory. Pixel. Shader. Blend / Depth. Memory. Pixel. Shader

The Evolution of Computer Graphics - nvidia.com · Pixel. Shader. Blend / Depth. Memory. Pixel. Shader. Blend / Depth. Memory. Pixel. Shader. Blend / Depth. Memory. Pixel. Shader

Documents
Shader Model 5.0 and Compute Shader

Shader Model 5.0 and Compute Shader

Documents
Introduction to OpenGL - Penn Engineeringcis565/Lectures2011S/Lecture...most relevant parts for writing GLSL shaders Shaders Shader object : an individual vertex, fragment, etc. shader

Introduction to OpenGL - Penn Engineeringcis565/Lectures2011S/Lecture...most relevant parts for writing GLSL shaders Shaders Shader object : an individual vertex, fragment, etc. shader

Documents
Shader Programing

Shader Programing

Documents
Shader Model 5.0 and Compute Shader Nick Thibieroz, AMD

Shader Model 5.0 and Compute Shader Nick Thibieroz, AMD

Documents