SlideShare una empresa de Scribd logo
1 de 76
GPU-Accelerated Path Rendering
Talk
 S0024 - GPU-Accelerated Path Rendering

  Mark Kilgard (Principal Software Engineer, NVIDIA)

  Standards such as Scalable Vector Graphics (SVG), PostScript, TrueType outline fonts, and immersive web
  content such as Flash depend on a resolution-independent 2D rendering paradigm that GPUs have not
  traditionally accelerated. This tutorial explains a new opportunity to greatly accelerate vector graphics, path
  rendering, and immersive web standards using the GPU. By attending, you will learn how to write OpenGL
  applications that accelerate the full range of path rendering functionality. Not only will you learn how to
  render sophisticated 2D graphics with OpenGL, you will learn to mix such resolution-independent 2D rendering
  with 3D rendering and do so at dynamic, real-time rates.

  Topic Areas: Computer Graphics; GPU Accelerated Internet; Digital Content Creation & Film; Visualization
  Level: Beginner

  Day: Tuesday, 05/15
  Time: 2:00 pm - 2:50 pm
  Location: Room A3
Mark Kilgard
• Principal System Software Engineer
  – OpenGL driver and API evolution
  – Cg (“C for graphics”) shading language
  – GPU-accelerated path rendering
• OpenGL Utility Toolkit (GLUT) implementer
• Author of OpenGL for the X Window System
• Co-author of Cg Tutorial
GPUs are good at a lot of stuff
Games




Battlefield 3, EA
Data visualization
Product design




    Catia
Physics simulation




  CUDA N-Body
Interactive ray tracing




        OptiX
Training
Molecular modeling




      NCSA
Impressive stuff
What about advancing 2D graphics?
Can GPUs render & improve the immersive web?
What is path rendering?
•   A rendering approach
     – Resolution-independent two-dimensional
       graphics
     – Occlusion & transparency depend on
       rendering order
          •   So called “Painter’s Algorithm”
     – Basic primitive is a path to be filled or
       stroked
          •   Path is a sequence of path commands
          •   Commands are
                – moveto, lineto, curveto, arcto, closepath, etc.
•   Standards
     – Content: PostScript, PDF, TrueType fonts,
       Flash, Scalable Vector Graphics (SVG),
       HTML5 Canvas, Silverlight, Office drawings
     – APIs: Apple Quartz 2D, Khronos OpenVG,
       Microsoft Direct2D, Cairo, Skia,
       Qt::QPainter, Anti-grain Graphics
Seminal Path Rendering Paper
• John Warnock & Douglas Wyatt, Xerox PARC
   – Presented SIGGRAPH 1982
   – Warnock founded Adobe months later




                                             John Warnock
                                              Adobe founder
Path Rendering Standards
Document       Resolution-     Immersive         2D Graphics      Office
Printing and   Independent     Web               Programming      Productivity
Exchange       Fonts           Experience        Interfaces       Applications

                                                     Java 2D
                                                     API
               OpenType          Flash
                                                       QtGui
                                                       API

               TrueType
                                   Scalable          Mac OS X
                                   Vector            2D API     Adobe Illustrator
                                   Graphics


Open XML
Paper (XPS)                                                        Inkscape
                             HTML 5           Khronos API        Open Source
Live Demo
Classic PostScript content




                              Complex text rendering




                                                Yesterday’s New York Times rendered from
                  Flash content                       its resolution-independent form
3D Rendering vs. Path Rendering
Characteristic                  GPU 3D rendering                      Path rendering
Dimensionality                  Projective 3D                         2D, typically affine
Pixel mapping                   Resolution independent                Resolution independent
Occlusion                       Depth buffering                       Painter’s algorithm
Rendering primitives            Points, lines, triangles              Paths
Primitive constituents          Vertices                              Control points
Constituents per primitive      1, 2, or 3 respectively               Unbounded
Topology of filled primitives   Always convex                         Can be concave, self-intersecting, and have
                                                                      holes
Degree of primitives            1st order (linear)                    Up to 3rd order (cubic)
Rendering modes                 Filled, wire-frame                    Filling, stroking
Line properties                 Width, stipple pattern                Width, dash pattern, capping, join style
Color processing                Programmable shading                  Painting + filter effects
Text rendering                  No direct support (2nd class          Omni-present (1st class support)
                                support)
Raster operations               Blending                              Brushes, blend modes, compositing
Color model                     RGB or sRGB                           RGB, sRGB, CYMK, or grayscale
Clipping operations             Clip planes, scissoring, stenciling   Clipping to an arbitrary clip path
Coverage determination          Per-color sample                      Sub-color sample
CPU vs. GPU at
Rendering Tasks over Time




     Pipelined 3D Interactive Rendering                       Path Rendering

Goal of NV_path_rendering is to make path rendering a GPU task

Render all interactive pixels, whether 3D or 2D or web content with the GPU
What is NV_path_rendering?
• OpenGL extension to GPU-accelerate path rendering
• Uses “stencil, then cover” (StC) approach
    – Create a path object
    – Step 1: “Stencil” the path object into the stencil buffer
        • GPU provides fast stenciling of filled or stroked paths
    – Step 2: “Cover” the path object and stencil test against its coverage
      stenciled by the prior step
        • Application can configure arbitrary shading during the step
    – More details later
• Supports the union of functionality of all major path rendering
  standards
    – Includes all stroking embellishments
    – Includes first-class text and font support
    – Allows functionality to mix with traditional 3D and programmable shading
Configuration

  NV_path_rendering               GPU: GeForce 480 GTX (GF100)
                                  CPU: Core i7 950 @ 3.07 GHz

Compared to Alternatives




                     Alternative approaches
                     are all much slower
Configuration

Detail on Alternatives   GPU: GeForce 480 GTX (GF100)
                         CPU: Core i7 950 @ 3.07 GHz
Across an range of scenes…
Release 300 GeForce GTX 480 Speedups over Alternatives




Y axis is logarithmic—shows how many TIMES faster NV_path_rendering is that competitor
GeForce 650 (Kepler) Results
Tiger Scene on GeForce 650
Absolute Frames/Second on GeForce 650
    NVpr “peaks” at
    1,800 FPS at 100x100




                           poor quality
NV_path_rendering is more than just
 matching CPU vector graphics
• 3D and vector graphics mix
                               • Superior quality

                                                       CPU
                                GPU                    Competitors




                               • Arbitrary programmable shader on
• 2D in perspective is free      paths— bump mapping
Partial Solutions Not Enough
• Path rendering has 30 years of heritage and history
• Can’t do a 90% solution and Software to change
                                                                        John Warnock
   – Trying to “mix” CPU and GPU methods doesn’t work                    Adobe founder

   – Expensive to move software—needs to be an unambiguous win
• Must surpass CPU approaches on all fronts
   – Performance
   – Quality
   – Functionality
   – Conformance to standards
   – More power efficient
                                        Inspiration: Perceptive Pixel
   – Enable new applications
Path Filling and Stroking




just filling                          just stroking



                            filling + stroke =
                               intended content
Dashing Content Examples


                                                  Artist made windows
                                                    with dashed line
                                Same cake
                                                         segment
                              missing dashed
                              stroking details
                                                                                Technical diagrams
                                                                              and charts often employ
Frosting on cake is dashed
                                                                                     dashing
elliptical arcs with round
end caps for “beaded” look;
flowers are also dashing


    All content shown
    is fully GPU rendered              Dashing character outlines for quilted look
Excellent Geometric Fidelity for Stroking

• Correct stroking is hard
   – Lots of CPU             GPU-accelerated          OpenVG reference
     implementations
     approximate stroking                                             
• GPU-accelerated
  stroking avoids such       Cairo                  Qt
                                                                       
                                          
  short-cuts
   – GPU has FLOPS to
     compute true stroke
                                 Stroking with tight end-point curve
     point containment
Step 1         Step 2:
The Approach                                       Stencil         Cover
                                                         repeat
• “Stencil, then Cover” (StC)
• Map the path rendering task from a sequential
  algorithm…
• …to a pipelined and massively parallel task
• Break path rendering into two steps
  – First, “stencil” the path’s coverage into stencil buffer
  – Second, conservatively “cover” path
     • Test against path coverage determined in the 1st step
     • Shade the path
     • And reset the stencil value to render next path
Pixel pipeline                           Vertex pipeline          Path pipeline

                         Application
                                                                Path specification


Pixel assembly                           Vertex assembly          Transform path
    (unpack)
                                        Vertex operations
                   transform
                    feedback
                                       Primitive assembly

Pixel operations                       Primitive operations   Fill/Stroke
                                                               Covering


  Pixel pack                              Rasterization
  read             Texture
                                       Fragment operations
  back             memory
                                                                    Fill/Stroke
  Application                           Raster operations           Stenciling

                                          Framebuffer         Display
Key Operations for Rendering
Path Objects
• Stencil operation
   – only updates stencil buffer
   – glStencilFillPathNV, glStencilStrokePathNV
• Cover operation
   – glCoverFillPathNV, glCoverStrokePathNV
   – renders hull polygons guaranteed to “cover” region updated by
     corresponding stencil
• Two-step rendering paradigm
   – stencil, then cover (StC)
• Application controls cover stenciling and shading operations
   – Gives application considerable control
• No vertex, tessellation, or geometry shaders active during steps
   – Why? Paths have control points & rasterized regions, not vertices, triangles
Path Rendering Example (1 of 3)
• Let’s draw a green concave 5-point star




              even-odd fill style         non-zero fill style


• Path specification by string of a star
  GLuint pathObj = 42;
  const char *pathString ="M100,180 L40,10 L190,120 L10,120 L160,10 z";
  glPathStringNV(pathObj,GL_PATH_FORMAT_SVG_NV,
                 strlen(pathString),pathString);

• Alternative: path specification by data
  static const GLubyte pathCommands[5] = {
    GL_MOVE_TO_NV, GL_LINE_TO_NV, GL_LINE_TO_NV, GL_LINE_TO_NV, GL_LINE_TO_NV,
  GL_CLOSE_PATH_NV };
  static const GLshort pathVertices[5][2] =
    { {100,180}, {40,10}, {190,120}, {10,120}, {160,10} };
  glPathCommandsNV(pathObj, 6, pathCommands, GL_SHORT, 10, pathVertices);
Path Rendering Example (2 of 3)

• Initialization
   – Clear the stencil buffer to zero and the color buffer to black
     glClearStencil(0);
     glClearColor(0,0,0,0);
     glStencilMask(~0);
     glClear(GL_COLOR_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);
   – Specify the Path's Transform
     glMatrixIdentityEXT(GL_PROJECTION);
     glMatrixOrthoEXT(GL_MODELVIEW, 0,200, 0,200, -1,1); // uses
     DSA!

• Nothing really specific to path rendering here

      DSA = OpenGL’s Direct State Access extension (EXT_direct_state_access)
Path Rendering Example (3 of 3)

• Render star with non-zero fill style
  – Stencil path
     glStencilFillPathNV(pathObj, GL_COUNT_UP_NV, 0x1F);
                                                             non-zero fill style
  – Cover path
    glEnable(GL_STENCIL_TEST);
    glStencilFunc(GL_NOTEQUAL, 0, 0x1F);
    glStencilOp(GL_KEEP, GL_KEEP, GL_ZERO);
    glColor3f(0,1,0); // green
    glCoverFillPathNV(pathObj, GL_BOUNDING_BOX_NV);

• Alternative: for even-odd fill style                       even-odd fill style

  – Just program glStencilFunc differently
     glStencilFunc(GL_NOTEQUAL, 0, 0x1);   // alternative mask
“Stencil, then Cover”                                         stencil fill
                                                        path command
                                                                                  path
                                                                               front-end
Path Fill Stenciling                                                           projective
                                                                                                 path
                                                                                                object
•   Specify a path                                         per-path            transform
                                                          fill region
•   Specify arbitrary path transformation                operations
                                                                              clipping &
     – Projective (4x4) allowed
                                                                              scissoring       sample
     – Depth values can be generated for                                                       accessibility
       depth testing
                                                                             window, depth
•   Sample accessibility determined                                          & stencil tests
     – Accessibility can be limited by any or
       all of
                                                                             path winding
          •   Scissor test, depth test, stencil test,
              view frustum, user-defined clip                                  number
                                                        per-sample
              planes, sample mask, stipple pattern,                          computation
                                                        operations
              and window ownership
•   Winding number w.r.t. the
    transformed path is computed                                                 stencil
                                                           Fill                                 stencil
                                                                                update:
     – Added to stencil value of accessible             stenciling                              buffer
                                                                             +, -, or invert
       samples                                           specific
“Stencil, then Cover”                                      cover fill
                                                         path command
                                                                                 path
                                                                              front-end
    Path Fill Covering                                                                         path
                                                                              projective      object
•    Specify a path                                          per-path         transform
•    Specify arbitrary path transformation                  fill region
                                                           operations
      – Projective (4x4) allowed                                             clipping &
                                                                             scissoring
      – Depth values can be generated for                                                     sample
        depth testing                                                                         accessibility
•                                                                           window, depth
     Sample accessibility determined                       per-sample
                                                                            & stencil tests
      – Accessibility can be limited by any or             operations
        all of
           •   Scissor test, depth test, stencil test,                          stencil
                                                         per-fragment or       update
               view frustum, user-defined clip
               planes, sample mask, stipple                  per-sample     typically zero
               pattern, and window ownership                    shading
•    Conservative covering geometry uses
     stencil to “cover” filled path                           color
                                                                            programmable
                                                                                              stencil
                                                                                 path
      – Determined by prior stencil step                      buffer           shading        buffer
Adding Stroking to the Star
• After the filling, add a stroked “rim”
  to the star like this…

• Set some stroking parameters (one-time):
      glPathParameterfNV(pathObj, GL_STROKE_WIDTH_NV, 10.5);
                                                                         non-zero fill style
      glPathParameteriNV(pathObj, GL_JOIN_STYLE_NV, GL_ROUND_NV);

• Stroke the star
   – Stencil path
      glStencilStrokePathNV(pathObj, 0x3, 0xF); // stroked samples marked “3”
   – Cover path
     glEnable(GL_STENCIL_TEST);
     glStencilFunc(GL_EQUAL, 3, 0xF); // update if sample marked “3”
     glStencilOp(GL_KEEP, GL_KEEP, GL_ZERO);
     glColor3f(1,1,0); // yellow
     glCoverStrokePathNV(pathObj, GL_BOUNDING_BOX_NV);

                                                                       even-odd fill style
stencil stroke
“Stencil, then Cover”                               path command           path
                                                                        front-end
Path Stroke Stenciling                                                  projective
                                                                                           path
                                                                                          object
 •   Specify a path                                                     transform
                                                      per-path
 •   Specify arbitrary path transformation           fill region
       –   Projective (4x4) allowed                 operations         clipping &
       –   Depth values can be generated for                           scissoring
           depth testing                                                                sample
                                                                                        accessibility
 •   Sample accessibility determined                                  window, depth
       –   Accessibility can be limited by any or                     & stencil tests
           all of
            • Scissor test, depth test, stencil
               test, view frustum, user-defined                          stroke
               clip planes, sample mask, stipple    per-sample            point
               pattern, and window ownership        operations        containment
 •   Point containment w.r.t. the stroked
     path is determined
       –                                               Stroke             stencil
           Replace stencil value of contained                                             stencil
           samples                                   stenciling          update:
                                                                                          buffer
                                                      specific           replace
cover stroke
“Stencil, then Cover”                               path command          path
                                                                       front-end
Path Stroke Covering                                                                     path
                                                                       projective       object
•   Specify a path                                    per-path         transform
                                                     fill region
•   Specify arbitrary path transformation           operations
      –   Projective (4x4) allowed                                    clipping &
                                                                      scissoring       sample
      –   Depth values can be generated for
          depth testing                                                                accessibility
•   Sample accessibility determined                 per-sample       window, depth
                                                                     & stencil tests
      –   Accessibility can be limited by any       operations
          or all of
            • Scissor test, depth test, stencil                          stencil
                test, view frustum, user-         per-fragment or       update
                defined clip planes, sample           per-sample
                mask, stipple pattern, and                           typically zero
                window ownership                         shading
•   Conservative covering geometry uses
                                                                     programmable
    stencil to “cover” stroked path                    color                            stencil
                                                                          path
      –   Determined by prior stencil step             buffer           shading         buffer
First-class, Resolution-independent
Font Support
•   Fonts are a standard, first-class part of all path rendering systems
      – Foreign to 3D graphics systems such as OpenGL and Direct3D, but natural for
        path rendering
      – Because letter forms in fonts have outlines defined with paths
          •   TrueType, PostScript, and OpenType fonts all use outlines to specify glyphs
•   NV_path_rendering makes font support easy
      – Can specify a range of path objects with
          •   A specified font
          •   Sequence or range of Unicode character points
•   No requirement for applications use font API to load glyphs
     – You can also load glyphs “manually” from your own glyph outlines
     – Functionality provides OS portability and meets needs of applications
         with mundane font requirements
Handling Common Path Rendering
Functionality: Filtering
• GPUs are highly efficient at image filtering
     – Fast texture mapping
         •   Mipmapping
                                                  Qt
         •   Anisotropic filtering
         •   Wrap modes
• CPUs aren't really
                                                    Moiré
                                                    artifacts



         GPU
                                                  Cairo
Handling Uncommon Path Rendering
Functionality: Projection
• Projection “just works”
   – Because GPU does everything
     with perspective-correct
     interpolation
Projective Path Rendering Support Compared

 GPU           Skia           Cairo        Qt
flawless       yes, but bugs   unsupported   unsupported




     correct      correct      unsupported   unsupported
     correct      wrong        unsupported   unsupported
Path Geometric Queries
• glIsPointInFillPathNV
    – determine if object-space (x,y) position is inside or outside path, given a
      winding number mask
• glIsPointInStrokePathNV
    – determine if object-space (x,y) position is inside the stroke of a path
    – accounts for dash pattern, joins, and caps
• glGetPathLengthNV
    – returns approximation of geometric length of a given sub-range of path
      segments
• glPointAlongPathNV
    – returns the object-space (x,y) position and 2D tangent vector a given
      offset into a specified path object
    – Useful for “text follows a path”
• Queries are modeled after OpenVG queries
Accessible Samples of a Transformed Path
•   When stenciled or covered, a path is transformed by OpenGL’s current
    modelview-projection matrix
      – Allows for arbitrary 4x4 projective transform
      – Means (x,y,0,1) object-space coordinate can be transformed to have depth
•   Fill or stroke stenciling affects “accessible” samples
•   A samples is not accessible if any of these apply to the sample
      –   clipped by user-defined or view frustum clip planes
      –   discarded by the polygon stipple, if enabled
      –   discarded by the pixel ownership test
      –   discarded by the scissor test, if enabled
      –   discarded by the depth test, if enabled
           •   displaced by the polygon offset from glPathStencilDepthOffsetNV
      – discarded by the depth test, if enabled
      – discarded by the (implicitly enabled) stencil test
           •   specified by glPathStencilFuncNV
           •   where the read mask is the bitwise AND of the glPathStencilFuncNV read mask and
               the bit-inversion of the effective mask parameter of the stenciling operation
Mixing Depth Buffering and
Path Rendering
• PostScript tigers surrounding Utah teapot
   – Plus overlaid TrueType font rendering
   – No textures involved, no multi-pass
Demo
3D Path Rendering Details
• Stencil step uses
  GLfloat slope = -0.05;
  GLint bias = -1;
  glPathStencilDepthOffsetNV(slope, bias);
  glDepthFunc(GL_LESS);
  glEnable(GL_DEPTH_TEST);
• Stenciling step uses
  glPathCoverDepthFuncNV(GL_ALWAYS);

• Observation
    – Stencil step is testing—but not writing—depth
        • Stencil won’t be updated if stencil step fails depth test at a sample
    – Cover step is writing—but not testing—depth
        • Cover step doesn’t need depth test because stencil test would only pass if
          prior stencil step’s depth test passed
    – Tricky, but neat because minimal mode changes involved
Without glPathStencilDepthOffset
Bad Things Happen
• Each tiger is layered 240 paths
    – Without the depth offset during the stencil step, all the—essentially co-
      planar—layers would Z-fight as shown below




                              terrible z-fighting artifacts
Path Transformation Process
 Path      object-space coordinates

object               (x,y,0,1)

                                      Modelview         eye-space coordinates
         color/fog/tex
          coordinates
                                       matrix         (xe,ye,ze,we) + attributes

                                                       color/fog/tex coords.            User-defined
            Object-space                                                                 clip planes
            color/fog/tex                          Eye-space
             generation                           color/fog/tex
                                                   generation
                                                                            clipped eye-space coordinates
                                                                                (xe,ye,ze,we) + attributes



                                                                                    clipped clip-space
  Projection         clip-space coordinates        View-frustum                         coordinates
                                                                                                             to path
    matrix          (xc,yc,zc,wc) + attributes      clip planes                (xc,yc,zc,wc) + attributes    stenciling
                                                                                                             or covering
Clip Planes Work with Path Rendering
• Scene showing a Welsh dragon clipped to all 64 combinations of
  6 clip planes enabled & disabled
Path Rendering Works with
Scissoring and Stippling too
 Scene showing a tiger
 scissoring into 9 regions
 Tiger with two different
 polygon stipple patterns
Rendering Paths Clipped to
Some Other Arbitrary Path
• Example clipping the PostScript tiger to a heart
  constructed from two cubic Bezier curves




      unclipped tiger   tiger with pink background clipped to heart
Complex Clipping Example




 tiger is 240 paths
                                     cowboy clip is
                                     the union of 1,366 paths




                      result of clipping tiger
                      to the union of all the cowboy paths
Arbitrary Programmable GPU Shading with
Path Rendering
• During the “cover” step, you can do arbitrary fragment
  processing
    – Could be
        • Fixed-function fragment processing
        • OpenGL assembly programs
        • Cg shaders compiled to assembly with Cg runtime
        • OpenGL Shading Language (GLSL) shaders
        • Your pick—they all work!
• Remember:
    – Your vertex, geometry, & tessellation shaders ignored during cover step
        • (Even your fragment shader is ignored during the “stencil” step)
Example of Bump Mapping on
Path Rendered Text
 • Phrase “Brick wall!” is path rendered and bump
   mapped with a Cg fragment shader

                              light source position
Anti-aliasing Discussion
• Good anti-aliasing is a big deal for path rendering
    – Particularly true for font rendering of small point sizes
    – Features of glyphs are often on the scale of a pixel or less
• NV_path_rendering uses multiple stencil samples per pixel for
  reasonable antialiasing
    – Otherwise, image quality is poor
    – 4 samples/pixel bare minimum
    – 8 or 16 samples/pixel is pretty sufficient
        • But 16 requires expensive 2x2 supersampling of 4x multisampling
        • 16x is extremely memory intensive
• Alternative: quality vs. performance tradeoff
    – Fast enough to render multiple passes to improve quality
    – Approaches
        • Accumulation buffer
        • Alpha accumulation
Anti-aliasing Strategy Benefits
• Benefits from GPU’s existing
  hardware AA strategies
                                                 GPU
    – Multiple color-stencil-depth               rendered
      samples per pixel                          coverage NOT
        • 4, 8, or 16 samples per pixel          conflated with
                                                 opacity
    – Rotated grid sub-positions
    – Fast downsampling by GPU
    – Avoids conflating coverage &
      opacity                                    Cairo, Qt, Skia,
                                                 and Direct2D
        • Maintains distinct color sample
                                                 rendered
          per sample location                    shows dark
    – Centroid sampling                          cracks artifacts
                                                 due to conflating
• Fast enough for temporal           artifacts   coverage with
  schemes                                        opacity, notice
    – >>60 fps means multi-pass                  background
                                                 bleeding
      improves quality
Real
                                  Flash
                                 Scene
                                same scene, GPU-rendered
                                        without conflation




    conflation
    artifacts abound,
    rendered by Skia

conflation is aliasing &
edge coverage percents
are un-predicable in general;
means conflated pixels
flicker when animated slowly
GPU Advantages
• Fast, quality filtering
    – Mipmapping of gradient color ramps essentially free
    – Includes anisotropic filtering (up to 16x)
    – Filtering is post-conversion from sRGB
• Full access to programmable shading
    – No fixed palette of solid color / gradient / pattern brushes
    – Bump mapping, shadow mapping, etc.—it’s all available to you
• Blending
    – Supports native blending in sRGB color space
        • Both colors converted to linear RGB
        • Then result is converted stored as sRGB
• Freely mix 3D and path rendering in same framebuffer
    – Path rendering buffer can be depth tested against 3D
    – So can 3D rendering be stenciled against path rendering
• Obviously performance is MUCH better than CPUs
Improved Color Space:
sRGB Path Rendering                         Radial color gradient example
•                                          moving from saturated red to blue
    Modern GPUs have native support
    for perceptually-correct for
     – sRGB framebuffer blending
     – sRGB texture filtering
     – No reason to tolerate uncorrected                       linear RGB
       linear RGB color artifacts!                            transition between saturated
                                                              red and saturated blue has
     – More intuitive for artists to                          dark purple region
       control
•   Negligible expense for GPU to
    perform sRGB-correct rendering
     – However quite expensive for
       software path renderers to                                sRGB
       perform sRGB rendering                                   perceptually smooth
                                                                transition from saturated
          •   Not done in practice                              red to saturated blue
Trying Out NV_path_rendering
• Operating system support
    – 2000, XP, Vista, Windows 7, Linux, FreeBSD, and Solaris
    – Unfortunately no Mac support
• GPU support
    – GeForce 8 and up (Tesla and beyond)
    – Most efficient on Fermi and Kepler GPUs
    – Current performance can be expected to improve
• Shipping since NVIDIA’s Release 275 drivers
    – Available since summer 2011
• New Release 300 drivers have remarkable NV_path_rendering
  performance
    – Try it, you’ll like it
Learning NV_path_rendering

• White paper + source code available
   – “Getting Started with NV_path_rendering”
• Explains
   – Path specification
   – “Stencil, then Cover” API usage
   – Instanced rendering for text and glyphs
NV_path_rendering SDK Examples

• A set of NV_path_rendering examples of varying levels
  of complexity
   – Most involved example is an accelerated SVG viewer
      • Not a complete SVG implementation



• Compiles on Windows and Linux
   – Standard makefiles for Linux
   – Use Visual Studio 2008 for Windows
Whitepapers
• “Getting Started with NV_path_rendering”
Whitepapers
• “Mixing 3D and Path Rendering”
SDK Example Walkthrough (1)
pr_basic—simplest example           pr_hello_world—kerned, underlined,
of path filling & stroking          stroked, and linear gradient filled text




pr_welsh_dragon—filled layers   pr_gradient—path with holes with texture applied
SDK Example Walkthrough (2)




pr_font_file—loading glyphs from a font file   pr_korean—rendering UTF-8 string of Korea
with the GL_FONT_FILE_NV target                characters




                                                       pr_shaders—use Cg shaders
                                                       to bump map text with
                                                       brick-wall texture
SDK Example Walkthrough (3)




pr_text_wheel—render projected gradient   pr_tiger—classic PostScript tiger rendered
text as spokes of a wheel                 as filled & stroked path layers



                                           pr_warp_tiger—warp the tiger
                                           with a free projective transform

                                           click & drag the bounding rectangle
                                           corners to change the projection
SDK Example Walkthrough (4)




pr_tiger3d—multiple projected and depth tested     pr_svg—GPU-accelerated SVG viewer
tigers + 3D teapot + overlaid text



                                                 pr_pick—test points to determine if they
                                                 are in the filled and/or stroked region of a
                                                 complex path
Conclusions
• GPU-acceleration of 2D resolution-independent graphics
  is coming
  – HTML 5 and low-power requirements
    are demanding it
• “Stencil, then Cover” approach
  – Very fast
  – Quality, functionality, and features
  – Available today through NV_path_rendering
• Shipping today
  – NV_path_rendering resources available
Questions?
More Information
• Best drivers: Release 300 drivers
  – www.nvidia.com/drivers
       • Grab the latest Beta drivers for your OS & GPU
• Developer resources
  –   http://developer.nvidia.com/nv-path-rendering
  –   Whitepapers, FAQ, specification
  –   NVprSDK—software development kit
  –   NVprDEMOs—pre-compiled Windows demos
  –   OpenGL Extension Wrangler (GLEW) has API support
• Email: nvpr-support@nvidia.com

Más contenido relacionado

La actualidad más candente

NVIDIA's OpenGL Functionality
NVIDIA's OpenGL FunctionalityNVIDIA's OpenGL Functionality
NVIDIA's OpenGL FunctionalityMark Kilgard
 
GPU accelerated path rendering fastforward
GPU accelerated path rendering fastforwardGPU accelerated path rendering fastforward
GPU accelerated path rendering fastforwardMark Kilgard
 
Programming with NV_path_rendering: An Annex to the SIGGRAPH Asia 2012 paper...
Programming with NV_path_rendering:  An Annex to the SIGGRAPH Asia 2012 paper...Programming with NV_path_rendering:  An Annex to the SIGGRAPH Asia 2012 paper...
Programming with NV_path_rendering: An Annex to the SIGGRAPH Asia 2012 paper...Mark Kilgard
 
NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016Mark Kilgard
 
Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well Mark Kilgard
 
CS 354 GPU Architecture
CS 354 GPU ArchitectureCS 354 GPU Architecture
CS 354 GPU ArchitectureMark Kilgard
 
OpenGL Shading Language
OpenGL Shading LanguageOpenGL Shading Language
OpenGL Shading LanguageJungsoo Nam
 
Avoiding 19 Common OpenGL Pitfalls
Avoiding 19 Common OpenGL PitfallsAvoiding 19 Common OpenGL Pitfalls
Avoiding 19 Common OpenGL PitfallsMark Kilgard
 
NV_path_rendering Frequently Asked Questions
NV_path_rendering Frequently Asked QuestionsNV_path_rendering Frequently Asked Questions
NV_path_rendering Frequently Asked QuestionsMark Kilgard
 
GPU-accelerated Path Rendering
GPU-accelerated Path RenderingGPU-accelerated Path Rendering
GPU-accelerated Path RenderingMark Kilgard
 
OpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUsOpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUsMark Kilgard
 
CS 354 Introduction
CS 354 IntroductionCS 354 Introduction
CS 354 IntroductionMark Kilgard
 
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
OpenGL NVIDIA Command-List: Approaching Zero Driver OverheadOpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
OpenGL NVIDIA Command-List: Approaching Zero Driver OverheadTristan Lorach
 
CS 354 Viewing Stuff
CS 354 Viewing StuffCS 354 Viewing Stuff
CS 354 Viewing StuffMark Kilgard
 
CS 354 Vector Graphics & Path Rendering
CS 354 Vector Graphics & Path RenderingCS 354 Vector Graphics & Path Rendering
CS 354 Vector Graphics & Path RenderingMark Kilgard
 
vkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APIvkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APITristan Lorach
 
EXT_window_rectangles
EXT_window_rectanglesEXT_window_rectangles
EXT_window_rectanglesMark Kilgard
 
SIGGRAPH Asia 2008 Modern OpenGL
SIGGRAPH Asia 2008 Modern OpenGLSIGGRAPH Asia 2008 Modern OpenGL
SIGGRAPH Asia 2008 Modern OpenGLMark Kilgard
 

La actualidad más candente (20)

NVIDIA's OpenGL Functionality
NVIDIA's OpenGL FunctionalityNVIDIA's OpenGL Functionality
NVIDIA's OpenGL Functionality
 
GPU accelerated path rendering fastforward
GPU accelerated path rendering fastforwardGPU accelerated path rendering fastforward
GPU accelerated path rendering fastforward
 
Programming with NV_path_rendering: An Annex to the SIGGRAPH Asia 2012 paper...
Programming with NV_path_rendering:  An Annex to the SIGGRAPH Asia 2012 paper...Programming with NV_path_rendering:  An Annex to the SIGGRAPH Asia 2012 paper...
Programming with NV_path_rendering: An Annex to the SIGGRAPH Asia 2012 paper...
 
OpenGL for 2015
OpenGL for 2015OpenGL for 2015
OpenGL for 2015
 
NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016NVIDIA OpenGL in 2016
NVIDIA OpenGL in 2016
 
OpenGL 4 for 2010
OpenGL 4 for 2010OpenGL 4 for 2010
OpenGL 4 for 2010
 
Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well Modern OpenGL Usage: Using Vertex Buffer Objects Well
Modern OpenGL Usage: Using Vertex Buffer Objects Well
 
CS 354 GPU Architecture
CS 354 GPU ArchitectureCS 354 GPU Architecture
CS 354 GPU Architecture
 
OpenGL Shading Language
OpenGL Shading LanguageOpenGL Shading Language
OpenGL Shading Language
 
Avoiding 19 Common OpenGL Pitfalls
Avoiding 19 Common OpenGL PitfallsAvoiding 19 Common OpenGL Pitfalls
Avoiding 19 Common OpenGL Pitfalls
 
NV_path_rendering Frequently Asked Questions
NV_path_rendering Frequently Asked QuestionsNV_path_rendering Frequently Asked Questions
NV_path_rendering Frequently Asked Questions
 
GPU-accelerated Path Rendering
GPU-accelerated Path RenderingGPU-accelerated Path Rendering
GPU-accelerated Path Rendering
 
OpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUsOpenGL 4.5 Update for NVIDIA GPUs
OpenGL 4.5 Update for NVIDIA GPUs
 
CS 354 Introduction
CS 354 IntroductionCS 354 Introduction
CS 354 Introduction
 
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
OpenGL NVIDIA Command-List: Approaching Zero Driver OverheadOpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
OpenGL NVIDIA Command-List: Approaching Zero Driver Overhead
 
CS 354 Viewing Stuff
CS 354 Viewing StuffCS 354 Viewing Stuff
CS 354 Viewing Stuff
 
CS 354 Vector Graphics & Path Rendering
CS 354 Vector Graphics & Path RenderingCS 354 Vector Graphics & Path Rendering
CS 354 Vector Graphics & Path Rendering
 
vkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan APIvkFX: Effect(ive) approach for Vulkan API
vkFX: Effect(ive) approach for Vulkan API
 
EXT_window_rectangles
EXT_window_rectanglesEXT_window_rectangles
EXT_window_rectangles
 
SIGGRAPH Asia 2008 Modern OpenGL
SIGGRAPH Asia 2008 Modern OpenGLSIGGRAPH Asia 2008 Modern OpenGL
SIGGRAPH Asia 2008 Modern OpenGL
 

Destacado

GPUs in Big Data - StampedeCon 2014
GPUs in Big Data - StampedeCon 2014GPUs in Big Data - StampedeCon 2014
GPUs in Big Data - StampedeCon 2014StampedeCon
 
Computational Techniques for the Statistical Analysis of Big Data in R
Computational Techniques for the Statistical Analysis of Big Data in RComputational Techniques for the Statistical Analysis of Big Data in R
Computational Techniques for the Statistical Analysis of Big Data in Rherbps10
 
Accelerating Machine Learning Applications on Spark Using GPUs
Accelerating Machine Learning Applications on Spark Using GPUsAccelerating Machine Learning Applications on Spark Using GPUs
Accelerating Machine Learning Applications on Spark Using GPUsIBM
 
PG-Strom - GPU Accelerated Asyncr
PG-Strom - GPU Accelerated AsyncrPG-Strom - GPU Accelerated Asyncr
PG-Strom - GPU Accelerated AsyncrKohei KaiGai
 
Deep learning on spark
Deep learning on sparkDeep learning on spark
Deep learning on sparkSatyendra Rana
 
Enabling Graph Analytics at Scale: The Opportunity for GPU-Acceleration of D...
Enabling Graph Analytics at Scale:  The Opportunity for GPU-Acceleration of D...Enabling Graph Analytics at Scale:  The Opportunity for GPU-Acceleration of D...
Enabling Graph Analytics at Scale: The Opportunity for GPU-Acceleration of D...odsc
 
Heterogeneous System Architecture Overview
Heterogeneous System Architecture OverviewHeterogeneous System Architecture Overview
Heterogeneous System Architecture Overviewinside-BigData.com
 
PG-Strom - GPGPU meets PostgreSQL, PGcon2015
PG-Strom - GPGPU meets PostgreSQL, PGcon2015PG-Strom - GPGPU meets PostgreSQL, PGcon2015
PG-Strom - GPGPU meets PostgreSQL, PGcon2015Kohei KaiGai
 
PyData Amsterdam - Name Matching at Scale
PyData Amsterdam - Name Matching at ScalePyData Amsterdam - Name Matching at Scale
PyData Amsterdam - Name Matching at ScaleGoDataDriven
 
From Machine Learning to Learning Machines: Creating an End-to-End Cognitive ...
From Machine Learning to Learning Machines: Creating an End-to-End Cognitive ...From Machine Learning to Learning Machines: Creating an End-to-End Cognitive ...
From Machine Learning to Learning Machines: Creating an End-to-End Cognitive ...Spark Summit
 
DeepLearning4J and Spark: Successes and Challenges - François Garillot
DeepLearning4J and Spark: Successes and Challenges - François GarillotDeepLearning4J and Spark: Successes and Challenges - François Garillot
DeepLearning4J and Spark: Successes and Challenges - François Garillotsparktc
 
How to Solve Real-Time Data Problems
How to Solve Real-Time Data ProblemsHow to Solve Real-Time Data Problems
How to Solve Real-Time Data ProblemsIBM Power Systems
 
Containerizing GPU Applications with Docker for Scaling to the Cloud
Containerizing GPU Applications with Docker for Scaling to the CloudContainerizing GPU Applications with Docker for Scaling to the Cloud
Containerizing GPU Applications with Docker for Scaling to the CloudSubbu Rama
 
Tallinn Estonia Advanced Java Meetup Spark + TensorFlow = TensorFrames Oct 24...
Tallinn Estonia Advanced Java Meetup Spark + TensorFlow = TensorFrames Oct 24...Tallinn Estonia Advanced Java Meetup Spark + TensorFlow = TensorFrames Oct 24...
Tallinn Estonia Advanced Java Meetup Spark + TensorFlow = TensorFrames Oct 24...Chris Fregly
 
The Potential of GPU-driven High Performance Data Analytics in Spark
The Potential of GPU-driven High Performance Data Analytics in SparkThe Potential of GPU-driven High Performance Data Analytics in Spark
The Potential of GPU-driven High Performance Data Analytics in SparkSpark Summit
 
Spark Summit EU talk by Tim Hunter
Spark Summit EU talk by Tim HunterSpark Summit EU talk by Tim Hunter
Spark Summit EU talk by Tim HunterSpark Summit
 
GPU Support in Spark and GPU/CPU Mixed Resource Scheduling at Production Scale
GPU Support in Spark and GPU/CPU Mixed Resource Scheduling at Production ScaleGPU Support in Spark and GPU/CPU Mixed Resource Scheduling at Production Scale
GPU Support in Spark and GPU/CPU Mixed Resource Scheduling at Production Scalesparktc
 

Destacado (20)

GPUs in Big Data - StampedeCon 2014
GPUs in Big Data - StampedeCon 2014GPUs in Big Data - StampedeCon 2014
GPUs in Big Data - StampedeCon 2014
 
Computational Techniques for the Statistical Analysis of Big Data in R
Computational Techniques for the Statistical Analysis of Big Data in RComputational Techniques for the Statistical Analysis of Big Data in R
Computational Techniques for the Statistical Analysis of Big Data in R
 
GPU Ecosystem
GPU EcosystemGPU Ecosystem
GPU Ecosystem
 
Accelerating Machine Learning Applications on Spark Using GPUs
Accelerating Machine Learning Applications on Spark Using GPUsAccelerating Machine Learning Applications on Spark Using GPUs
Accelerating Machine Learning Applications on Spark Using GPUs
 
PG-Strom - GPU Accelerated Asyncr
PG-Strom - GPU Accelerated AsyncrPG-Strom - GPU Accelerated Asyncr
PG-Strom - GPU Accelerated Asyncr
 
Deep learning on spark
Deep learning on sparkDeep learning on spark
Deep learning on spark
 
Enabling Graph Analytics at Scale: The Opportunity for GPU-Acceleration of D...
Enabling Graph Analytics at Scale:  The Opportunity for GPU-Acceleration of D...Enabling Graph Analytics at Scale:  The Opportunity for GPU-Acceleration of D...
Enabling Graph Analytics at Scale: The Opportunity for GPU-Acceleration of D...
 
Heterogeneous System Architecture Overview
Heterogeneous System Architecture OverviewHeterogeneous System Architecture Overview
Heterogeneous System Architecture Overview
 
PG-Strom - GPGPU meets PostgreSQL, PGcon2015
PG-Strom - GPGPU meets PostgreSQL, PGcon2015PG-Strom - GPGPU meets PostgreSQL, PGcon2015
PG-Strom - GPGPU meets PostgreSQL, PGcon2015
 
PyData Amsterdam - Name Matching at Scale
PyData Amsterdam - Name Matching at ScalePyData Amsterdam - Name Matching at Scale
PyData Amsterdam - Name Matching at Scale
 
Hadoop + GPU
Hadoop + GPUHadoop + GPU
Hadoop + GPU
 
Deep Learning on Hadoop
Deep Learning on HadoopDeep Learning on Hadoop
Deep Learning on Hadoop
 
From Machine Learning to Learning Machines: Creating an End-to-End Cognitive ...
From Machine Learning to Learning Machines: Creating an End-to-End Cognitive ...From Machine Learning to Learning Machines: Creating an End-to-End Cognitive ...
From Machine Learning to Learning Machines: Creating an End-to-End Cognitive ...
 
DeepLearning4J and Spark: Successes and Challenges - François Garillot
DeepLearning4J and Spark: Successes and Challenges - François GarillotDeepLearning4J and Spark: Successes and Challenges - François Garillot
DeepLearning4J and Spark: Successes and Challenges - François Garillot
 
How to Solve Real-Time Data Problems
How to Solve Real-Time Data ProblemsHow to Solve Real-Time Data Problems
How to Solve Real-Time Data Problems
 
Containerizing GPU Applications with Docker for Scaling to the Cloud
Containerizing GPU Applications with Docker for Scaling to the CloudContainerizing GPU Applications with Docker for Scaling to the Cloud
Containerizing GPU Applications with Docker for Scaling to the Cloud
 
Tallinn Estonia Advanced Java Meetup Spark + TensorFlow = TensorFrames Oct 24...
Tallinn Estonia Advanced Java Meetup Spark + TensorFlow = TensorFrames Oct 24...Tallinn Estonia Advanced Java Meetup Spark + TensorFlow = TensorFrames Oct 24...
Tallinn Estonia Advanced Java Meetup Spark + TensorFlow = TensorFrames Oct 24...
 
The Potential of GPU-driven High Performance Data Analytics in Spark
The Potential of GPU-driven High Performance Data Analytics in SparkThe Potential of GPU-driven High Performance Data Analytics in Spark
The Potential of GPU-driven High Performance Data Analytics in Spark
 
Spark Summit EU talk by Tim Hunter
Spark Summit EU talk by Tim HunterSpark Summit EU talk by Tim Hunter
Spark Summit EU talk by Tim Hunter
 
GPU Support in Spark and GPU/CPU Mixed Resource Scheduling at Production Scale
GPU Support in Spark and GPU/CPU Mixed Resource Scheduling at Production ScaleGPU Support in Spark and GPU/CPU Mixed Resource Scheduling at Production Scale
GPU Support in Spark and GPU/CPU Mixed Resource Scheduling at Production Scale
 

Similar a GTC 2012: GPU-Accelerated Path Rendering

An Introduction to NV_path_rendering
An Introduction to NV_path_renderingAn Introduction to NV_path_rendering
An Introduction to NV_path_renderingMark Kilgard
 
Modern OpenGL scientific visualization
Modern OpenGL scientific visualizationModern OpenGL scientific visualization
Modern OpenGL scientific visualizationNicolas Rougier
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationJustin Dorfman
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
 
NVIDIA Graphics, Cg, and Transparency
NVIDIA Graphics, Cg, and TransparencyNVIDIA Graphics, Cg, and Transparency
NVIDIA Graphics, Cg, and TransparencyMark Kilgard
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersAriya Hidayat
 
Hardware Shaders
Hardware ShadersHardware Shaders
Hardware Shadersgueste52f1b
 
The Rendering Pipeline - Challenges & Next Steps
The Rendering Pipeline - Challenges & Next StepsThe Rendering Pipeline - Challenges & Next Steps
The Rendering Pipeline - Challenges & Next StepsJohan Andersson
 
Sig13 ce future_gfx
Sig13 ce future_gfxSig13 ce future_gfx
Sig13 ce future_gfxCass Everitt
 
Graphics pipelining
Graphics pipeliningGraphics pipelining
Graphics pipeliningAreena Javed
 
아이폰강의(7) pdf
아이폰강의(7) pdf아이폰강의(7) pdf
아이폰강의(7) pdfsunwooindia
 
GFX Part 1 - Introduction to GPU HW and OpenGL ES specifications
GFX Part 1 - Introduction to GPU HW and OpenGL ES specificationsGFX Part 1 - Introduction to GPU HW and OpenGL ES specifications
GFX Part 1 - Introduction to GPU HW and OpenGL ES specificationsPrabindh Sundareson
 
Open source print quality software
Open source print quality softwareOpen source print quality software
Open source print quality softwareChristophe Mercier
 
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...Johan Andersson
 

Similar a GTC 2012: GPU-Accelerated Path Rendering (20)

NV_path_rendering
NV_path_renderingNV_path_rendering
NV_path_rendering
 
An Introduction to NV_path_rendering
An Introduction to NV_path_renderingAn Introduction to NV_path_rendering
An Introduction to NV_path_rendering
 
Modern OpenGL scientific visualization
Modern OpenGL scientific visualizationModern OpenGL scientific visualization
Modern OpenGL scientific visualization
 
Understanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentationUnderstanding hardware acceleration on mobile browsers presentation
Understanding hardware acceleration on mobile browsers presentation
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
(2) gui drawing
(2) gui drawing(2) gui drawing
(2) gui drawing
 
Hardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for AndroidHardware Accelerated 2D Rendering for Android
Hardware Accelerated 2D Rendering for Android
 
CAD STANDARDS
CAD STANDARDSCAD STANDARDS
CAD STANDARDS
 
NVIDIA Graphics, Cg, and Transparency
NVIDIA Graphics, Cg, and TransparencyNVIDIA Graphics, Cg, and Transparency
NVIDIA Graphics, Cg, and Transparency
 
Understanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile BrowsersUnderstanding Hardware Acceleration on Mobile Browsers
Understanding Hardware Acceleration on Mobile Browsers
 
Hardware Shaders
Hardware ShadersHardware Shaders
Hardware Shaders
 
The Rendering Pipeline - Challenges & Next Steps
The Rendering Pipeline - Challenges & Next StepsThe Rendering Pipeline - Challenges & Next Steps
The Rendering Pipeline - Challenges & Next Steps
 
Sig13 ce future_gfx
Sig13 ce future_gfxSig13 ce future_gfx
Sig13 ce future_gfx
 
Graphics pipelining
Graphics pipeliningGraphics pipelining
Graphics pipelining
 
아이폰강의(7) pdf
아이폰강의(7) pdf아이폰강의(7) pdf
아이폰강의(7) pdf
 
GFX Part 1 - Introduction to GPU HW and OpenGL ES specifications
GFX Part 1 - Introduction to GPU HW and OpenGL ES specificationsGFX Part 1 - Introduction to GPU HW and OpenGL ES specifications
GFX Part 1 - Introduction to GPU HW and OpenGL ES specifications
 
Open source print quality software
Open source print quality softwareOpen source print quality software
Open source print quality software
 
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
 
(2) gui drawing
(2) gui drawing(2) gui drawing
(2) gui drawing
 
What is OpenGL ?
What is OpenGL ?What is OpenGL ?
What is OpenGL ?
 

Más de Mark Kilgard

D11: a high-performance, protocol-optional, transport-optional, window system...
D11: a high-performance, protocol-optional, transport-optional, window system...D11: a high-performance, protocol-optional, transport-optional, window system...
D11: a high-performance, protocol-optional, transport-optional, window system...Mark Kilgard
 
Computers, Graphics, Engineering, Math, and Video Games for High School Students
Computers, Graphics, Engineering, Math, and Video Games for High School StudentsComputers, Graphics, Engineering, Math, and Video Games for High School Students
Computers, Graphics, Engineering, Math, and Video Games for High School StudentsMark Kilgard
 
NVIDIA OpenGL and Vulkan Support for 2017
NVIDIA OpenGL and Vulkan Support for 2017NVIDIA OpenGL and Vulkan Support for 2017
NVIDIA OpenGL and Vulkan Support for 2017Mark Kilgard
 
NVIDIA OpenGL 4.6 in 2017
NVIDIA OpenGL 4.6 in 2017NVIDIA OpenGL 4.6 in 2017
NVIDIA OpenGL 4.6 in 2017Mark Kilgard
 
Virtual Reality Features of NVIDIA GPUs
Virtual Reality Features of NVIDIA GPUsVirtual Reality Features of NVIDIA GPUs
Virtual Reality Features of NVIDIA GPUsMark Kilgard
 
Accelerating Vector Graphics Rendering using the Graphics Hardware Pipeline
Accelerating Vector Graphics Rendering using the Graphics Hardware PipelineAccelerating Vector Graphics Rendering using the Graphics Hardware Pipeline
Accelerating Vector Graphics Rendering using the Graphics Hardware PipelineMark Kilgard
 
NV_path rendering Functional Improvements
NV_path rendering Functional ImprovementsNV_path rendering Functional Improvements
NV_path rendering Functional ImprovementsMark Kilgard
 
CS 354 Final Exam Review
CS 354 Final Exam ReviewCS 354 Final Exam Review
CS 354 Final Exam ReviewMark Kilgard
 
CS 354 Surfaces, Programmable Tessellation, and NPR Graphics
CS 354 Surfaces, Programmable Tessellation, and NPR GraphicsCS 354 Surfaces, Programmable Tessellation, and NPR Graphics
CS 354 Surfaces, Programmable Tessellation, and NPR GraphicsMark Kilgard
 
CS 354 Performance Analysis
CS 354 Performance AnalysisCS 354 Performance Analysis
CS 354 Performance AnalysisMark Kilgard
 
CS 354 Acceleration Structures
CS 354 Acceleration StructuresCS 354 Acceleration Structures
CS 354 Acceleration StructuresMark Kilgard
 
CS 354 Global Illumination
CS 354 Global IlluminationCS 354 Global Illumination
CS 354 Global IlluminationMark Kilgard
 
CS 354 Ray Casting & Tracing
CS 354 Ray Casting & TracingCS 354 Ray Casting & Tracing
CS 354 Ray Casting & TracingMark Kilgard
 
CS 354 Bezier Curves
CS 354 Bezier Curves CS 354 Bezier Curves
CS 354 Bezier Curves Mark Kilgard
 

Más de Mark Kilgard (15)

D11: a high-performance, protocol-optional, transport-optional, window system...
D11: a high-performance, protocol-optional, transport-optional, window system...D11: a high-performance, protocol-optional, transport-optional, window system...
D11: a high-performance, protocol-optional, transport-optional, window system...
 
Computers, Graphics, Engineering, Math, and Video Games for High School Students
Computers, Graphics, Engineering, Math, and Video Games for High School StudentsComputers, Graphics, Engineering, Math, and Video Games for High School Students
Computers, Graphics, Engineering, Math, and Video Games for High School Students
 
NVIDIA OpenGL and Vulkan Support for 2017
NVIDIA OpenGL and Vulkan Support for 2017NVIDIA OpenGL and Vulkan Support for 2017
NVIDIA OpenGL and Vulkan Support for 2017
 
NVIDIA OpenGL 4.6 in 2017
NVIDIA OpenGL 4.6 in 2017NVIDIA OpenGL 4.6 in 2017
NVIDIA OpenGL 4.6 in 2017
 
Virtual Reality Features of NVIDIA GPUs
Virtual Reality Features of NVIDIA GPUsVirtual Reality Features of NVIDIA GPUs
Virtual Reality Features of NVIDIA GPUs
 
Accelerating Vector Graphics Rendering using the Graphics Hardware Pipeline
Accelerating Vector Graphics Rendering using the Graphics Hardware PipelineAccelerating Vector Graphics Rendering using the Graphics Hardware Pipeline
Accelerating Vector Graphics Rendering using the Graphics Hardware Pipeline
 
NV_path rendering Functional Improvements
NV_path rendering Functional ImprovementsNV_path rendering Functional Improvements
NV_path rendering Functional Improvements
 
CS 354 Final Exam Review
CS 354 Final Exam ReviewCS 354 Final Exam Review
CS 354 Final Exam Review
 
CS 354 Surfaces, Programmable Tessellation, and NPR Graphics
CS 354 Surfaces, Programmable Tessellation, and NPR GraphicsCS 354 Surfaces, Programmable Tessellation, and NPR Graphics
CS 354 Surfaces, Programmable Tessellation, and NPR Graphics
 
CS 354 Performance Analysis
CS 354 Performance AnalysisCS 354 Performance Analysis
CS 354 Performance Analysis
 
CS 354 Acceleration Structures
CS 354 Acceleration StructuresCS 354 Acceleration Structures
CS 354 Acceleration Structures
 
CS 354 Global Illumination
CS 354 Global IlluminationCS 354 Global Illumination
CS 354 Global Illumination
 
CS 354 Ray Casting & Tracing
CS 354 Ray Casting & TracingCS 354 Ray Casting & Tracing
CS 354 Ray Casting & Tracing
 
CS 354 Typography
CS 354 TypographyCS 354 Typography
CS 354 Typography
 
CS 354 Bezier Curves
CS 354 Bezier Curves CS 354 Bezier Curves
CS 354 Bezier Curves
 

Último

TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024Lonnie McRorey
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brandgvaughan
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxBkGupta21
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxLoriGlavin3
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024BookNet Canada
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024Stephanie Beckett
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Mattias Andersson
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxLoriGlavin3
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxLoriGlavin3
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .Alan Dix
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersRaghuram Pandurangan
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsPixlogix Infotech
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfMounikaPolabathina
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupFlorian Wilhelm
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLScyllaDB
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 

Último (20)

TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
 
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your BrandWordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
 
unit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptxunit 4 immunoblotting technique complete.pptx
unit 4 immunoblotting technique complete.pptx
 
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptxThe Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
The Fit for Passkeys for Employee and Consumer Sign-ins: FIDO Paris Seminar.pptx
 
DMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special EditionDMCC Future of Trade Web3 - Special Edition
DMCC Future of Trade Web3 - Special Edition
 
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
New from BookNet Canada for 2024: Loan Stars - Tech Forum 2024
 
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data PrivacyTrustArc Webinar - How to Build Consumer Trust Through Data Privacy
TrustArc Webinar - How to Build Consumer Trust Through Data Privacy
 
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
 
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
 
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptxPasskey Providers and Enabling Portability: FIDO Paris Seminar.pptx
Passkey Providers and Enabling Portability: FIDO Paris Seminar.pptx
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptxDigital Identity is Under Attack: FIDO Paris Seminar.pptx
Digital Identity is Under Attack: FIDO Paris Seminar.pptx
 
From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .From Family Reminiscence to Scholarly Archive .
From Family Reminiscence to Scholarly Archive .
 
Generative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information DevelopersGenerative AI for Technical Writer or Information Developers
Generative AI for Technical Writer or Information Developers
 
The Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and ConsThe Ultimate Guide to Choosing WordPress Pros and Cons
The Ultimate Guide to Choosing WordPress Pros and Cons
 
What is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdfWhat is DBT - The Ultimate Data Build Tool.pdf
What is DBT - The Ultimate Data Build Tool.pdf
 
Streamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project SetupStreamlining Python Development: A Guide to a Modern Project Setup
Streamlining Python Development: A Guide to a Modern Project Setup
 
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQLDeveloper Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 

GTC 2012: GPU-Accelerated Path Rendering

  • 2. Talk  S0024 - GPU-Accelerated Path Rendering Mark Kilgard (Principal Software Engineer, NVIDIA) Standards such as Scalable Vector Graphics (SVG), PostScript, TrueType outline fonts, and immersive web content such as Flash depend on a resolution-independent 2D rendering paradigm that GPUs have not traditionally accelerated. This tutorial explains a new opportunity to greatly accelerate vector graphics, path rendering, and immersive web standards using the GPU. By attending, you will learn how to write OpenGL applications that accelerate the full range of path rendering functionality. Not only will you learn how to render sophisticated 2D graphics with OpenGL, you will learn to mix such resolution-independent 2D rendering with 3D rendering and do so at dynamic, real-time rates. Topic Areas: Computer Graphics; GPU Accelerated Internet; Digital Content Creation & Film; Visualization Level: Beginner Day: Tuesday, 05/15 Time: 2:00 pm - 2:50 pm Location: Room A3
  • 3. Mark Kilgard • Principal System Software Engineer – OpenGL driver and API evolution – Cg (“C for graphics”) shading language – GPU-accelerated path rendering • OpenGL Utility Toolkit (GLUT) implementer • Author of OpenGL for the X Window System • Co-author of Cg Tutorial
  • 4. GPUs are good at a lot of stuff
  • 8. Physics simulation CUDA N-Body
  • 13. What about advancing 2D graphics?
  • 14. Can GPUs render & improve the immersive web?
  • 15. What is path rendering? • A rendering approach – Resolution-independent two-dimensional graphics – Occlusion & transparency depend on rendering order • So called “Painter’s Algorithm” – Basic primitive is a path to be filled or stroked • Path is a sequence of path commands • Commands are – moveto, lineto, curveto, arcto, closepath, etc. • Standards – Content: PostScript, PDF, TrueType fonts, Flash, Scalable Vector Graphics (SVG), HTML5 Canvas, Silverlight, Office drawings – APIs: Apple Quartz 2D, Khronos OpenVG, Microsoft Direct2D, Cairo, Skia, Qt::QPainter, Anti-grain Graphics
  • 16. Seminal Path Rendering Paper • John Warnock & Douglas Wyatt, Xerox PARC – Presented SIGGRAPH 1982 – Warnock founded Adobe months later John Warnock Adobe founder
  • 17. Path Rendering Standards Document Resolution- Immersive 2D Graphics Office Printing and Independent Web Programming Productivity Exchange Fonts Experience Interfaces Applications Java 2D API OpenType Flash QtGui API TrueType Scalable Mac OS X Vector 2D API Adobe Illustrator Graphics Open XML Paper (XPS) Inkscape HTML 5 Khronos API Open Source
  • 18. Live Demo Classic PostScript content Complex text rendering Yesterday’s New York Times rendered from Flash content its resolution-independent form
  • 19. 3D Rendering vs. Path Rendering Characteristic GPU 3D rendering Path rendering Dimensionality Projective 3D 2D, typically affine Pixel mapping Resolution independent Resolution independent Occlusion Depth buffering Painter’s algorithm Rendering primitives Points, lines, triangles Paths Primitive constituents Vertices Control points Constituents per primitive 1, 2, or 3 respectively Unbounded Topology of filled primitives Always convex Can be concave, self-intersecting, and have holes Degree of primitives 1st order (linear) Up to 3rd order (cubic) Rendering modes Filled, wire-frame Filling, stroking Line properties Width, stipple pattern Width, dash pattern, capping, join style Color processing Programmable shading Painting + filter effects Text rendering No direct support (2nd class Omni-present (1st class support) support) Raster operations Blending Brushes, blend modes, compositing Color model RGB or sRGB RGB, sRGB, CYMK, or grayscale Clipping operations Clip planes, scissoring, stenciling Clipping to an arbitrary clip path Coverage determination Per-color sample Sub-color sample
  • 20. CPU vs. GPU at Rendering Tasks over Time Pipelined 3D Interactive Rendering Path Rendering Goal of NV_path_rendering is to make path rendering a GPU task Render all interactive pixels, whether 3D or 2D or web content with the GPU
  • 21. What is NV_path_rendering? • OpenGL extension to GPU-accelerate path rendering • Uses “stencil, then cover” (StC) approach – Create a path object – Step 1: “Stencil” the path object into the stencil buffer • GPU provides fast stenciling of filled or stroked paths – Step 2: “Cover” the path object and stencil test against its coverage stenciled by the prior step • Application can configure arbitrary shading during the step – More details later • Supports the union of functionality of all major path rendering standards – Includes all stroking embellishments – Includes first-class text and font support – Allows functionality to mix with traditional 3D and programmable shading
  • 22. Configuration NV_path_rendering GPU: GeForce 480 GTX (GF100) CPU: Core i7 950 @ 3.07 GHz Compared to Alternatives Alternative approaches are all much slower
  • 23. Configuration Detail on Alternatives GPU: GeForce 480 GTX (GF100) CPU: Core i7 950 @ 3.07 GHz
  • 24. Across an range of scenes… Release 300 GeForce GTX 480 Speedups over Alternatives Y axis is logarithmic—shows how many TIMES faster NV_path_rendering is that competitor
  • 26. Tiger Scene on GeForce 650 Absolute Frames/Second on GeForce 650 NVpr “peaks” at 1,800 FPS at 100x100 poor quality
  • 27. NV_path_rendering is more than just matching CPU vector graphics • 3D and vector graphics mix • Superior quality   CPU GPU Competitors • Arbitrary programmable shader on • 2D in perspective is free paths— bump mapping
  • 28. Partial Solutions Not Enough • Path rendering has 30 years of heritage and history • Can’t do a 90% solution and Software to change John Warnock – Trying to “mix” CPU and GPU methods doesn’t work Adobe founder – Expensive to move software—needs to be an unambiguous win • Must surpass CPU approaches on all fronts – Performance – Quality – Functionality – Conformance to standards – More power efficient Inspiration: Perceptive Pixel – Enable new applications
  • 29. Path Filling and Stroking just filling just stroking filling + stroke = intended content
  • 30. Dashing Content Examples Artist made windows with dashed line Same cake segment missing dashed stroking details Technical diagrams and charts often employ Frosting on cake is dashed dashing elliptical arcs with round end caps for “beaded” look; flowers are also dashing All content shown is fully GPU rendered Dashing character outlines for quilted look
  • 31. Excellent Geometric Fidelity for Stroking • Correct stroking is hard – Lots of CPU GPU-accelerated OpenVG reference implementations approximate stroking   • GPU-accelerated stroking avoids such Cairo Qt   short-cuts – GPU has FLOPS to compute true stroke Stroking with tight end-point curve point containment
  • 32. Step 1 Step 2: The Approach Stencil Cover repeat • “Stencil, then Cover” (StC) • Map the path rendering task from a sequential algorithm… • …to a pipelined and massively parallel task • Break path rendering into two steps – First, “stencil” the path’s coverage into stencil buffer – Second, conservatively “cover” path • Test against path coverage determined in the 1st step • Shade the path • And reset the stencil value to render next path
  • 33. Pixel pipeline Vertex pipeline Path pipeline Application Path specification Pixel assembly Vertex assembly Transform path (unpack) Vertex operations transform feedback Primitive assembly Pixel operations Primitive operations Fill/Stroke Covering Pixel pack Rasterization read Texture Fragment operations back memory Fill/Stroke Application Raster operations Stenciling Framebuffer Display
  • 34. Key Operations for Rendering Path Objects • Stencil operation – only updates stencil buffer – glStencilFillPathNV, glStencilStrokePathNV • Cover operation – glCoverFillPathNV, glCoverStrokePathNV – renders hull polygons guaranteed to “cover” region updated by corresponding stencil • Two-step rendering paradigm – stencil, then cover (StC) • Application controls cover stenciling and shading operations – Gives application considerable control • No vertex, tessellation, or geometry shaders active during steps – Why? Paths have control points & rasterized regions, not vertices, triangles
  • 35. Path Rendering Example (1 of 3) • Let’s draw a green concave 5-point star even-odd fill style non-zero fill style • Path specification by string of a star GLuint pathObj = 42; const char *pathString ="M100,180 L40,10 L190,120 L10,120 L160,10 z"; glPathStringNV(pathObj,GL_PATH_FORMAT_SVG_NV, strlen(pathString),pathString); • Alternative: path specification by data static const GLubyte pathCommands[5] = { GL_MOVE_TO_NV, GL_LINE_TO_NV, GL_LINE_TO_NV, GL_LINE_TO_NV, GL_LINE_TO_NV, GL_CLOSE_PATH_NV }; static const GLshort pathVertices[5][2] = { {100,180}, {40,10}, {190,120}, {10,120}, {160,10} }; glPathCommandsNV(pathObj, 6, pathCommands, GL_SHORT, 10, pathVertices);
  • 36. Path Rendering Example (2 of 3) • Initialization – Clear the stencil buffer to zero and the color buffer to black glClearStencil(0); glClearColor(0,0,0,0); glStencilMask(~0); glClear(GL_COLOR_BUFFER_BIT | GL_STENCIL_BUFFER_BIT); – Specify the Path's Transform glMatrixIdentityEXT(GL_PROJECTION); glMatrixOrthoEXT(GL_MODELVIEW, 0,200, 0,200, -1,1); // uses DSA! • Nothing really specific to path rendering here DSA = OpenGL’s Direct State Access extension (EXT_direct_state_access)
  • 37. Path Rendering Example (3 of 3) • Render star with non-zero fill style – Stencil path glStencilFillPathNV(pathObj, GL_COUNT_UP_NV, 0x1F); non-zero fill style – Cover path glEnable(GL_STENCIL_TEST); glStencilFunc(GL_NOTEQUAL, 0, 0x1F); glStencilOp(GL_KEEP, GL_KEEP, GL_ZERO); glColor3f(0,1,0); // green glCoverFillPathNV(pathObj, GL_BOUNDING_BOX_NV); • Alternative: for even-odd fill style even-odd fill style – Just program glStencilFunc differently glStencilFunc(GL_NOTEQUAL, 0, 0x1); // alternative mask
  • 38. “Stencil, then Cover” stencil fill path command path front-end Path Fill Stenciling projective path object • Specify a path per-path transform fill region • Specify arbitrary path transformation operations clipping & – Projective (4x4) allowed scissoring sample – Depth values can be generated for accessibility depth testing window, depth • Sample accessibility determined & stencil tests – Accessibility can be limited by any or all of path winding • Scissor test, depth test, stencil test, view frustum, user-defined clip number per-sample planes, sample mask, stipple pattern, computation operations and window ownership • Winding number w.r.t. the transformed path is computed stencil Fill stencil update: – Added to stencil value of accessible stenciling buffer +, -, or invert samples specific
  • 39. “Stencil, then Cover” cover fill path command path front-end Path Fill Covering path projective object • Specify a path per-path transform • Specify arbitrary path transformation fill region operations – Projective (4x4) allowed clipping & scissoring – Depth values can be generated for sample depth testing accessibility • window, depth Sample accessibility determined per-sample & stencil tests – Accessibility can be limited by any or operations all of • Scissor test, depth test, stencil test, stencil per-fragment or update view frustum, user-defined clip planes, sample mask, stipple per-sample typically zero pattern, and window ownership shading • Conservative covering geometry uses stencil to “cover” filled path color programmable stencil path – Determined by prior stencil step buffer shading buffer
  • 40. Adding Stroking to the Star • After the filling, add a stroked “rim” to the star like this… • Set some stroking parameters (one-time): glPathParameterfNV(pathObj, GL_STROKE_WIDTH_NV, 10.5); non-zero fill style glPathParameteriNV(pathObj, GL_JOIN_STYLE_NV, GL_ROUND_NV); • Stroke the star – Stencil path glStencilStrokePathNV(pathObj, 0x3, 0xF); // stroked samples marked “3” – Cover path glEnable(GL_STENCIL_TEST); glStencilFunc(GL_EQUAL, 3, 0xF); // update if sample marked “3” glStencilOp(GL_KEEP, GL_KEEP, GL_ZERO); glColor3f(1,1,0); // yellow glCoverStrokePathNV(pathObj, GL_BOUNDING_BOX_NV); even-odd fill style
  • 41. stencil stroke “Stencil, then Cover” path command path front-end Path Stroke Stenciling projective path object • Specify a path transform per-path • Specify arbitrary path transformation fill region – Projective (4x4) allowed operations clipping & – Depth values can be generated for scissoring depth testing sample accessibility • Sample accessibility determined window, depth – Accessibility can be limited by any or & stencil tests all of • Scissor test, depth test, stencil test, view frustum, user-defined stroke clip planes, sample mask, stipple per-sample point pattern, and window ownership operations containment • Point containment w.r.t. the stroked path is determined – Stroke stencil Replace stencil value of contained stencil samples stenciling update: buffer specific replace
  • 42. cover stroke “Stencil, then Cover” path command path front-end Path Stroke Covering path projective object • Specify a path per-path transform fill region • Specify arbitrary path transformation operations – Projective (4x4) allowed clipping & scissoring sample – Depth values can be generated for depth testing accessibility • Sample accessibility determined per-sample window, depth & stencil tests – Accessibility can be limited by any operations or all of • Scissor test, depth test, stencil stencil test, view frustum, user- per-fragment or update defined clip planes, sample per-sample mask, stipple pattern, and typically zero window ownership shading • Conservative covering geometry uses programmable stencil to “cover” stroked path color stencil path – Determined by prior stencil step buffer shading buffer
  • 43. First-class, Resolution-independent Font Support • Fonts are a standard, first-class part of all path rendering systems – Foreign to 3D graphics systems such as OpenGL and Direct3D, but natural for path rendering – Because letter forms in fonts have outlines defined with paths • TrueType, PostScript, and OpenType fonts all use outlines to specify glyphs • NV_path_rendering makes font support easy – Can specify a range of path objects with • A specified font • Sequence or range of Unicode character points • No requirement for applications use font API to load glyphs – You can also load glyphs “manually” from your own glyph outlines – Functionality provides OS portability and meets needs of applications with mundane font requirements
  • 44. Handling Common Path Rendering Functionality: Filtering • GPUs are highly efficient at image filtering – Fast texture mapping • Mipmapping  Qt • Anisotropic filtering • Wrap modes • CPUs aren't really Moiré artifacts  GPU  Cairo
  • 45. Handling Uncommon Path Rendering Functionality: Projection • Projection “just works” – Because GPU does everything with perspective-correct interpolation
  • 46. Projective Path Rendering Support Compared  GPU  Skia  Cairo  Qt flawless yes, but bugs unsupported unsupported correct correct unsupported unsupported correct wrong unsupported unsupported
  • 47. Path Geometric Queries • glIsPointInFillPathNV – determine if object-space (x,y) position is inside or outside path, given a winding number mask • glIsPointInStrokePathNV – determine if object-space (x,y) position is inside the stroke of a path – accounts for dash pattern, joins, and caps • glGetPathLengthNV – returns approximation of geometric length of a given sub-range of path segments • glPointAlongPathNV – returns the object-space (x,y) position and 2D tangent vector a given offset into a specified path object – Useful for “text follows a path” • Queries are modeled after OpenVG queries
  • 48. Accessible Samples of a Transformed Path • When stenciled or covered, a path is transformed by OpenGL’s current modelview-projection matrix – Allows for arbitrary 4x4 projective transform – Means (x,y,0,1) object-space coordinate can be transformed to have depth • Fill or stroke stenciling affects “accessible” samples • A samples is not accessible if any of these apply to the sample – clipped by user-defined or view frustum clip planes – discarded by the polygon stipple, if enabled – discarded by the pixel ownership test – discarded by the scissor test, if enabled – discarded by the depth test, if enabled • displaced by the polygon offset from glPathStencilDepthOffsetNV – discarded by the depth test, if enabled – discarded by the (implicitly enabled) stencil test • specified by glPathStencilFuncNV • where the read mask is the bitwise AND of the glPathStencilFuncNV read mask and the bit-inversion of the effective mask parameter of the stenciling operation
  • 49. Mixing Depth Buffering and Path Rendering • PostScript tigers surrounding Utah teapot – Plus overlaid TrueType font rendering – No textures involved, no multi-pass
  • 50. Demo
  • 51. 3D Path Rendering Details • Stencil step uses GLfloat slope = -0.05; GLint bias = -1; glPathStencilDepthOffsetNV(slope, bias); glDepthFunc(GL_LESS); glEnable(GL_DEPTH_TEST); • Stenciling step uses glPathCoverDepthFuncNV(GL_ALWAYS); • Observation – Stencil step is testing—but not writing—depth • Stencil won’t be updated if stencil step fails depth test at a sample – Cover step is writing—but not testing—depth • Cover step doesn’t need depth test because stencil test would only pass if prior stencil step’s depth test passed – Tricky, but neat because minimal mode changes involved
  • 52. Without glPathStencilDepthOffset Bad Things Happen • Each tiger is layered 240 paths – Without the depth offset during the stencil step, all the—essentially co- planar—layers would Z-fight as shown below terrible z-fighting artifacts
  • 53. Path Transformation Process Path object-space coordinates object (x,y,0,1) Modelview eye-space coordinates color/fog/tex coordinates matrix (xe,ye,ze,we) + attributes color/fog/tex coords. User-defined Object-space clip planes color/fog/tex Eye-space generation color/fog/tex generation clipped eye-space coordinates (xe,ye,ze,we) + attributes clipped clip-space Projection clip-space coordinates View-frustum coordinates to path matrix (xc,yc,zc,wc) + attributes clip planes (xc,yc,zc,wc) + attributes stenciling or covering
  • 54. Clip Planes Work with Path Rendering • Scene showing a Welsh dragon clipped to all 64 combinations of 6 clip planes enabled & disabled
  • 55. Path Rendering Works with Scissoring and Stippling too Scene showing a tiger scissoring into 9 regions Tiger with two different polygon stipple patterns
  • 56. Rendering Paths Clipped to Some Other Arbitrary Path • Example clipping the PostScript tiger to a heart constructed from two cubic Bezier curves unclipped tiger tiger with pink background clipped to heart
  • 57. Complex Clipping Example tiger is 240 paths cowboy clip is the union of 1,366 paths result of clipping tiger to the union of all the cowboy paths
  • 58. Arbitrary Programmable GPU Shading with Path Rendering • During the “cover” step, you can do arbitrary fragment processing – Could be • Fixed-function fragment processing • OpenGL assembly programs • Cg shaders compiled to assembly with Cg runtime • OpenGL Shading Language (GLSL) shaders • Your pick—they all work! • Remember: – Your vertex, geometry, & tessellation shaders ignored during cover step • (Even your fragment shader is ignored during the “stencil” step)
  • 59. Example of Bump Mapping on Path Rendered Text • Phrase “Brick wall!” is path rendered and bump mapped with a Cg fragment shader light source position
  • 60. Anti-aliasing Discussion • Good anti-aliasing is a big deal for path rendering – Particularly true for font rendering of small point sizes – Features of glyphs are often on the scale of a pixel or less • NV_path_rendering uses multiple stencil samples per pixel for reasonable antialiasing – Otherwise, image quality is poor – 4 samples/pixel bare minimum – 8 or 16 samples/pixel is pretty sufficient • But 16 requires expensive 2x2 supersampling of 4x multisampling • 16x is extremely memory intensive • Alternative: quality vs. performance tradeoff – Fast enough to render multiple passes to improve quality – Approaches • Accumulation buffer • Alpha accumulation
  • 61. Anti-aliasing Strategy Benefits • Benefits from GPU’s existing hardware AA strategies GPU – Multiple color-stencil-depth rendered samples per pixel coverage NOT • 4, 8, or 16 samples per pixel conflated with opacity – Rotated grid sub-positions – Fast downsampling by GPU – Avoids conflating coverage & opacity Cairo, Qt, Skia, and Direct2D • Maintains distinct color sample rendered per sample location shows dark – Centroid sampling cracks artifacts due to conflating • Fast enough for temporal artifacts coverage with schemes opacity, notice – >>60 fps means multi-pass background bleeding improves quality
  • 62. Real Flash Scene same scene, GPU-rendered without conflation conflation artifacts abound, rendered by Skia conflation is aliasing & edge coverage percents are un-predicable in general; means conflated pixels flicker when animated slowly
  • 63. GPU Advantages • Fast, quality filtering – Mipmapping of gradient color ramps essentially free – Includes anisotropic filtering (up to 16x) – Filtering is post-conversion from sRGB • Full access to programmable shading – No fixed palette of solid color / gradient / pattern brushes – Bump mapping, shadow mapping, etc.—it’s all available to you • Blending – Supports native blending in sRGB color space • Both colors converted to linear RGB • Then result is converted stored as sRGB • Freely mix 3D and path rendering in same framebuffer – Path rendering buffer can be depth tested against 3D – So can 3D rendering be stenciled against path rendering • Obviously performance is MUCH better than CPUs
  • 64. Improved Color Space: sRGB Path Rendering Radial color gradient example • moving from saturated red to blue Modern GPUs have native support for perceptually-correct for – sRGB framebuffer blending – sRGB texture filtering – No reason to tolerate uncorrected  linear RGB linear RGB color artifacts! transition between saturated red and saturated blue has – More intuitive for artists to dark purple region control • Negligible expense for GPU to perform sRGB-correct rendering – However quite expensive for software path renderers to  sRGB perform sRGB rendering perceptually smooth transition from saturated • Not done in practice red to saturated blue
  • 65. Trying Out NV_path_rendering • Operating system support – 2000, XP, Vista, Windows 7, Linux, FreeBSD, and Solaris – Unfortunately no Mac support • GPU support – GeForce 8 and up (Tesla and beyond) – Most efficient on Fermi and Kepler GPUs – Current performance can be expected to improve • Shipping since NVIDIA’s Release 275 drivers – Available since summer 2011 • New Release 300 drivers have remarkable NV_path_rendering performance – Try it, you’ll like it
  • 66. Learning NV_path_rendering • White paper + source code available – “Getting Started with NV_path_rendering” • Explains – Path specification – “Stencil, then Cover” API usage – Instanced rendering for text and glyphs
  • 67. NV_path_rendering SDK Examples • A set of NV_path_rendering examples of varying levels of complexity – Most involved example is an accelerated SVG viewer • Not a complete SVG implementation • Compiles on Windows and Linux – Standard makefiles for Linux – Use Visual Studio 2008 for Windows
  • 68. Whitepapers • “Getting Started with NV_path_rendering”
  • 69. Whitepapers • “Mixing 3D and Path Rendering”
  • 70. SDK Example Walkthrough (1) pr_basic—simplest example pr_hello_world—kerned, underlined, of path filling & stroking stroked, and linear gradient filled text pr_welsh_dragon—filled layers pr_gradient—path with holes with texture applied
  • 71. SDK Example Walkthrough (2) pr_font_file—loading glyphs from a font file pr_korean—rendering UTF-8 string of Korea with the GL_FONT_FILE_NV target characters pr_shaders—use Cg shaders to bump map text with brick-wall texture
  • 72. SDK Example Walkthrough (3) pr_text_wheel—render projected gradient pr_tiger—classic PostScript tiger rendered text as spokes of a wheel as filled & stroked path layers pr_warp_tiger—warp the tiger with a free projective transform click & drag the bounding rectangle corners to change the projection
  • 73. SDK Example Walkthrough (4) pr_tiger3d—multiple projected and depth tested pr_svg—GPU-accelerated SVG viewer tigers + 3D teapot + overlaid text pr_pick—test points to determine if they are in the filled and/or stroked region of a complex path
  • 74. Conclusions • GPU-acceleration of 2D resolution-independent graphics is coming – HTML 5 and low-power requirements are demanding it • “Stencil, then Cover” approach – Very fast – Quality, functionality, and features – Available today through NV_path_rendering • Shipping today – NV_path_rendering resources available
  • 76. More Information • Best drivers: Release 300 drivers – www.nvidia.com/drivers • Grab the latest Beta drivers for your OS & GPU • Developer resources – http://developer.nvidia.com/nv-path-rendering – Whitepapers, FAQ, specification – NVprSDK—software development kit – NVprDEMOs—pre-compiled Windows demos – OpenGL Extension Wrangler (GLEW) has API support • Email: nvpr-support@nvidia.com

Notas del editor

  1. NV_path_rendering provides a new third pipeline—in addition to the vertex and pixel pipelines—for rendering pixels