Perspective
description
Transcript of Perspective
![Page 1: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/1.jpg)
Perspective
apertureyg
yr
n zg
ys = yg (n/zg)
ys
ys = yr (n/zr)
zr
![Page 2: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/2.jpg)
Perspective Matrix
n 0 0 0
0 n 0 0
0 0 n+f -fn
0 0 1 0
x
y
z
1
nx
ny
(n+f)z-fn
z
= nx/z
ny/z
(n+f)-fn/z
1
homogenize
ys = yg (n/zg)compare:
![Page 3: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/3.jpg)
• contains:– position (vector)– forward direction (vector)– up direction (vector)
• Want to be able to swing the camera sideways, up and down, spin (roll), plus move
Example Camera
![Page 4: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/4.jpg)
• With forward and up known as part of camera, can change position easily– move forward: x(t+dt) = x(t) + f(t)*s*dt• s = speed, f(t) = forward direction at time t
– can get sideways vector as u x f (cross product)– moving sideways uses same principle as moving
forward, just direction differs
Player control
![Page 5: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/5.jpg)
• Store orientation as quaternion q• Update forward, up directions using current q– rotation of initial forward f0, initial up u0
• say p = (0,f0), q’ = conjugate of q– for q = (s,v), q' = (s,-v)
• f = vector(qpq’)
• In XNA, f = Vector.Transform(f0, q)
Describing orientation
![Page 6: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/6.jpg)
Shaders
Custom calculations on vertices and pixels
![Page 7: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/7.jpg)
Introduction to Shaders
• with the fixed functionality in old graphics cards, you were restricted to texture and the 3-term lighting model– BasicEffect more or less does this
• Pixel information was interpolated to vertices• Now, custom shader programs– vertex shaders– pixel shaders
![Page 8: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/8.jpg)
Vertex Shaders
• act in parallel across all vertices• responsible for transforming and making initial
lighting of vertex• compute temporary variables to be consumed
by fragment shader• only information from one vertex available
![Page 9: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/9.jpg)
Fragment Shaders
• Act in parallel across all fragments• Responsible for computing depth and color
information• Only information from current fragment
available – but can get information from textures, where images might be stored (multipass shaders)
![Page 10: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/10.jpg)
Shading Languages
• High level shading languages available• 3 main ones:– Cg (NVIDIA's "C for graphics")– HLSL (MS's "high level shading language")
– GLSL (OpenGL's shading language)
• All quite similar, differ in details of API
![Page 11: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/11.jpg)
The Graphics Pipeline
Transformations & Lighting Clipping
Pixel ShadingTexturing Frame Buffer Operations
Vertex Shading
Rasterization and Interpolation
![Page 12: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/12.jpg)
Vertex Shaders
• Replaces fixed functionality of vertex processor• Normally get:– vertex transformation– normal transformation– illumination
• Now, can write programs that do anything– same program on all vertices
![Page 13: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/13.jpg)
Vertex Shaders
• Input:– Built-in attributes• color• normal• position• texture coordinate
– User-defined attributes– Texture maps
![Page 14: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/14.jpg)
Vertex Shaders
• Transform and light a single vertex• Output:– position– color– user-defined variables (for fragment shader)
![Page 15: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/15.jpg)
Vertex Shaders
• Transform and light a single vertex• Output:– position– color– user-defined variables (for fragment shader)
![Page 16: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/16.jpg)
Vertex Shader
• Changing vertex position in a shader– create simple animations• Use time as input, compute x(t), θ(t)
– perform displacement mapping (to mesh resolution)
– Generally, modify the geometry at runtime
![Page 17: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/17.jpg)
Rasterization and Interpolation
• Turns the space between vertices into fragments
• Computes input values for fragments by interpolating values from vertices
![Page 18: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/18.jpg)
Pixel Shader
• Operates on fragments• Input:– color– texture coordinates– user-defined variables (from vertex shader)– texture maps
• Cannot access other pixels – although, texture can be exploited for this
![Page 19: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/19.jpg)
Pixel Shader
• Output:– color (RGBA)– depth
• Note, cannot change position at this point• But, can compute color in sophisticated way,
in parallel at each pixel
![Page 20: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/20.jpg)
Shader input
• Previously mentioned inputs available per-vertex (per-pixel)
• Also have shader parameters that can be set (like global variables)– E.g., direction of sun, location of viewer (same for
all primitives)– E.g., specific parameters (material glossiness, what
texture to use)
![Page 21: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/21.jpg)
Phong and Gouraud Shading
• Traditional Gouraud shading: per-vertex lighting, interpolated to pixels
• Various problems:– Visible mesh boundaries– Strange effects at low mesh resolution
• Phong shading: normals interpolated, per-pixel lighting: done in pixel shader
![Page 22: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/22.jpg)
Render to Texture
• Shaders are “memoryless”• Also, limit to how many instructions in shader
(varies with card)• Can render display buffer to texture, then use
texture as input to later (or same) shader– Or, just display texture on object• eg, mirror
![Page 23: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/23.jpg)
Render to Texture
• Simple postprocessing effects:– render to texture– apply pixel shader involving texture– draw texture to screen• Create quad covering screen, apply texture
• Color modification, darken/brighten, fade/dissolve
![Page 24: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/24.jpg)
Shaders in XNA
• Write a single .fx file with:– list of shader parameters– structure definitions for shader I/O– vertex shader– pixel shader– technique and pass definition
![Page 25: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/25.jpg)
Data flow
Vertex Shader Input
Vertex Shader
Pixel Shader Input
Pixel Shader
Pixel Shader Output
![Page 26: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/26.jpg)
Shader I/O Semantics
• Markers that suggest how data is passed into and out of the shaders– e.g., put "position" data in POSITION semantic
• Example vertex shader input:struct vs_in { float4 pos : POSITION0; float4 col : COLOR0;};
![Page 27: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/27.jpg)
Available semantics
• Differ depending on what the structure is– position semantic not available for pixel shader
output, for example• TEXCOORD semantic for user-defined
variables
• Can be used multiple times: TEXCOORD0 for first, then TEXCOORD1, TEXCOORD2...
![Page 28: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/28.jpg)
Vertex Shader Input Semantics
• POSITION – vertex location in space• COLOR – for the vertex color• NORMAL – surface normal• TEXCOORD – texture coordinates, also
"generic"
• PSIZE – point size (used with point sprites, chiefly for particle system effects)
![Page 29: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/29.jpg)
Vertex Shader Output Semantics
• subset of the inputs
• POSITION• COLOR• TEXCOORD• PSIZE
![Page 30: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/30.jpg)
Pixel Shader Input Semantics
• Only COLOR and TEXCOORD are allowed• Note: considered good practice to use vertex
shader output as pixel shader input – but permitted semantics different!– notably, POSITION required for vs_out, prohibited
by ps_in• "Illegal" semantics ignored by compiler in
definition, but DO NOT USE in ps code
![Page 31: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/31.jpg)
Pixel Shader Output Semantics
• COLOR • DEPTH – depth value for depth test
• In routine operation, one color value (ultimate pixel color) and one depth value
• Can have more outputs if multipass shader, unconventional operation
![Page 32: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/32.jpg)
Techniques and Passes
technique mytechnique { // one or more passes, ordinarily one pass mypass { vertexshader = compile vs_1_1 myvs(); pixelshader = compile ps_2_0 myps(); }}
![Page 33: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/33.jpg)
Shader Code
• Written in C-like HLSL– if, for, = for assignment...
• scalar, vector, and matrix types– int, float– float2, float3, float4– float4x4
• Texture type (2D texture)
![Page 34: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/34.jpg)
Intrinsic Functions
• Some functions are built in• Various mathematical functions– math (exp, pow, log)– trigonometric (sin, cos, tan, asin...)– vector (dot, cross)– "housekeeping" (clamp, lerp, abs, max)
• Functions for dealing with texture• Partial list (common ones) in textbook
![Page 35: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/35.jpg)
Shader Code
• Take control of the pipeline• Very abstract right now, but examples to come
in the following weeks– texture– procedural texture– basic lighting (Phong shading)– specialized lighting– particle systems
![Page 36: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/36.jpg)
Connecting your Shader
• Use is similar to the BasicEffect• May need a custom vertex format, if your
vertex shader input is different from all existing vertex formats
• Set all your parameters• Link to project, configure, and invoke in Draw()
![Page 37: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/37.jpg)
Recap
• Can program parts of the graphics pipeline– vertex shader• output is position, color, texture coordinates
– pixel shader• output is color
• for XNA, use HLSL, a C-like language with many built-in functions
![Page 38: Perspective](https://reader035.fdocuments.in/reader035/viewer/2022062520/568163be550346895dd4d9ab/html5/thumbnails/38.jpg)
Recap
• Things to know:– graphics pipeline• tasks of vertex and pixel shaders• rasterization and interpolation
– vertex and pixel shader input and output semantics
• To learn by practice: writing your own shaders