Web Space - 26.finaleNon-Photorealistic Rendering ! What’s Next? Read: Angel, Section 6.11...

CS452/552; EE465/505

Finale!

4-23–15

! 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

Goals of Computer Graphics

Non-Photorealistic Rendering

Non-Photorealistic Rendering

! 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

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

Hue

Tone

Pen-and-Ink Illustrations

Pen-and-Ink Illustrations

Rendering Pipeline: Polygonal Surfaces with NPR

! 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

Stroke Texture Examples

Stroke Texture Operations

! Selective addition of detail

! Difficult to automate

! User places detail segments interactively

Indication

Indication Example

Rendering Parametric Surfaces

Parametric Surface Example

Hatching + Standard Rendering

Orientable Textures

Orientable Stroke Texture Example

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

! 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

Physical Simulation Example

Computer-Generated Watercolor

Fluid Dynamic Simulation

Interactive Painting

Automatic Painting Example

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

! 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

Layered Painting

! 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

Style Examples

! “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

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

Cartoon Shading

Cartoon Shading as Texture Map

Shading Variations

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

Technical Illustrations

Conventions in Technical Illustrations

Technical Illustration Example

! 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

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

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

Summary

! 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

! 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

! 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

! 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

! 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

! 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

! 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

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

What about Games?

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

! 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