web space - 26.finalenon-photorealistic rendering ! what’s next? read: angel, section 6.11...

54
CS452/552; EE465/505 Finale! 4-23–15

Upload: others

Post on 14-Sep-2020

5 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

CS452/552; EE465/505

Finale!

4-23–15

Page 2: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Non-Photorealistic Rendering ! What’s Next?

Read: Angel, ✦Section 6.11 Nonphotorealistic Shading ✦Color Plate 11 Cartoon-shaded teapot

Final Exam: Monday, April 27th, 3:15 to 6:15, SC162

Outline

Page 3: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Goals of Computer Graphics

Page 4: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Non-Photorealistic Rendering

Page 5: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Non-Photorealistic Rendering

Page 6: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Pen-and-Ink illustration ■ Techniques: cross-hatching, outlines, line art, etc.

! Painterly rendering ■ Styles: impressionist, expressionist, pointilist, etc.

! Cartoons ■ Effects: cartoon shading, distortion, etc.

! Technical ■ Characteristics: matte shading, edge lines, etc.

! Scientific ■ Methods: splatting, hedgehogs, etc.

Some NPR Categories

Page 7: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Outline! Pen-and-ink Illustrations ! Painterly Rendering ! Cartoon Shading ! Technical Illustrations

Page 8: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Hue

Page 9: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Tone

Page 10: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Pen-and-Ink Illustrations

Page 11: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Pen-and-Ink Illustrations

Page 12: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Rendering Pipeline: Polygonal Surfaces with NPR

Page 13: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Stroke generated by moving along straight path ! Stroke perturbed by

■ Waviness function (straightness) ■ Pressure function (thickness)

! Collected in stroke textures ■ Tone dependent ■ Resolution dependent ■ Orientation dependent

! How automatic are stroke textures?

Strokes and Stroke Textures

Page 14: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Stroke Texture Examples

Page 15: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Stroke Texture Operations

Page 16: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Selective addition of detail

! Difficult to automate

! User places detail segments interactively

Indication

Page 17: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Indication Example

Page 18: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Rendering Parametric Surfaces

Page 19: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Parametric Surface Example

Page 20: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Hatching + Standard Rendering

Page 21: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Orientable Textures

Page 22: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Orientable Stroke Texture Example

Page 23: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Outline! Pen-and-ink Illustrations ! Painterly Rendering ! Cartoon Shading ! Technical Illustrations

Page 24: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Physical simulation ■ User applies brushstrokes ■ Computer simulates media (paper + ink)

! Automatic painting ■ User provides input image or 3D model ■ User specifies painting parameters ■ Computer generates all strokes

Painterly Rendering

Page 25: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Physical Simulation Example

Page 26: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Computer-Generated Watercolor

Page 27: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Fluid Dynamic Simulation

Page 28: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Interactive Painting

Page 29: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Automatic Painting Example

https://mrl.nyu.edu/projects/npr/painterly/

Page 30: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Start from color image: no 3D information ! Paint in resolution-based layers

■ Blur to current resolution ■ Select brush based on current resolution ■ Find area of largest error compared to real image ■ Place stroke ■ Increase resolution and repeat

! Layers are painted coarse to fine ! Styles controlled by parameters

Automatic Painting from Images

Page 31: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Layered Painting

Page 32: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Style determined by parameters ■ Approximation thresholds ■ Brush sizes ■ Curvature filter ■ Blur factor ■ Minimum and maximum stroke lengths ■ Opacity ■ Grid size ■ Color jitter

! Encapsulate parameter settings as style

Painting Styles

Page 33: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Style Examples

Page 34: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! “Impressionist” ■ No random color, 4 ≤ stroke length ≤ 16 ■ Brush sized 8, 4, 2; approximation threshold 100

! “Expressionist” ■ Random factor 0.5, 10 ≤ stroke length ≤ 16 ■ Brush sizes 8, 4, 2; approximation threshold 50

! “Pointilist” ■ Random factor ~0.75, 0 ≤ stroke length ≤ 0 ■ Brush sizes 4, 2; approximation threshold 100

! Not completely convincing to artists (yet?)

Some Styles

Page 35: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Outline! Pen-and-ink Illustrations ! Painterly Rendering ! Cartoon Shading ! Technical Illustrations

Page 36: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Cartoon Shading

Page 37: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Cartoon Shading as Texture Map

Page 38: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Shading Variations

Page 39: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Outline! Pen-and-ink Illustrations ! Painterly Rendering ! Cartoon Shading ! Technical Illustrations

Page 40: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Technical Illustrations

Page 41: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Conventions in Technical Illustrations

Page 42: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

Technical Illustration Example

Page 43: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Smart graphics ■ Design from the user’s perspective ■ HCI, AI, Perception

! Artistic graphics ■ More tools for the creative artist ■ New styles and ideas

The Future

Page 44: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Beyond photorealism ■ Artistic appeal ■ Technical explanation and illustration ■ Scientific visualization

! Use all traditional computer graphics tools ! Employ them in novel ways ! Have fun!

Summary

Page 45: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Create basic 3D web applications ✦can integrate with other HTML5 packages

!Work with event-driven input ! Use a variety of texture-based methods ! Make use of off-screen rendering

What we can do now

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 46: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! More OpenGL capabilities ! Modeling ! Alternate renderers ! Integration with Web !Where are things going

What we haven’t covered

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 47: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Much more control and many more options ✦Geometry,Tessellation and Compute Shaders ✦Level of Detail (LOD) ✦1-4 Dimensional Textures ✦Many more texture options

! Vertex Array Buffers ! Occlusion Queries

What’s in desktop OpenGL

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 48: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Movement of more desktop OpenGL features to ES and WebGL

!WebCL 1.0 released March 2014 ! ES 3.0 and ES 3.1 ! ECMA 6 Script draft (new version of JS) ! Many JS variants such as Coffee Script

What should we expect soon in APIs

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 49: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Originally hardware and software was dominated by the scientific and CAD communities

✦SGI key for both hardware and software ✦OpenGL developed by SGI

!With PCs and graphics cards leadership moved to Microsoft and game users

✦DirectX ✦Video Toaster

The Players have Changed

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 50: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Development of GPUs ✦Nvidia, AMD and Intel dominate ✦OpenGL makes a comeback ✦Cg (Nvidia) leads to GLSL ✦ Interactive games control direction of hw and sw

!Web and smart phones ✦Google, Mozilla, Nokia and others dominate software

✦ARM dominates smart phone chips

Players Have Changed

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 51: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Level of Detail (LOD) ! Image based rendering ! Light field rendering ! Ray Tracing ! Volume Rendering ! Point Clouds ! Particle Systems ! Information Visualization

Advanced Topics

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 52: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Need more courses ✦Digital Storytelling ✦Game AI ✦HCI ✦Real-time graphics

What about Games?

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 53: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April

! Fastest supercomputers use GPUs for floating point operations

✦GPGPU ✦OpenCL/WebGL ✦Compute shaders

! Low power is a major issue ✦Exascale machine will require 20MW ✦ Intel vs ARM?

Supercomputing

Angel and Shreiner: Interactive Computer Graphics 7E © Addison-Wesley 2015

Page 54: Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11 Nonphotorealistic Shading Color Plate 11 Cartoon-shaded teapot Final Exam: Monday, April