Movatterモバイル変換


[0]ホーム

URL:


Mark Kilgard, profile picture
Uploaded byMark Kilgard
PPT, PDF2,863 views

SIGGRAPH 2012: GPU-Accelerated 2D and Web Rendering

Mark Kilgard's talk focuses on advancements in GPU-accelerated 2D graphics and web rendering, highlighting NVIDIA's approach to optimizing path rendering using a 'stencil, then cover' method for improved efficiency and quality. The presentation covers various applications, rendering standards, and the benefits of integrating resolution-independent graphics into web content. It aims to demonstrate how modern GPUs can significantly enhance rendering processes for both 3D and 2D content, making them essential for interactive visual computing.

Embed presentation

Downloaded 67 times
GPU-Accelerated 2D and   Web Rendering      Mark Kilgard
Talk DetailsLocation: West Hall Meeting Room 503, Los Angeles Convention CenterDate: Wednesday, August 8, 2012Time: 2:40 PM – 3:40 PMMark Kilgard (Principal Software Engineer, NVIDIA)Abstract: The future of GPU-based visual computing integrates the web, resolution-independent 2Dgraphics, and 3D to maximize interactivity and quality while minimizing consumed power. See what NVIDIA isdoing today to accelerate resolution-independent 2D graphics for web content. This presentation explainsNVIDIA's unique "stencil, then cover" approach to accelerating path rendering with OpenGL anddemonstrates the wide variety of web content that can be accelerated with this approach.Topic Areas: GPU Accelerated Internet; Digital Content Creation & Film; VisualizationLevel: IntermediateWatch video replay: http://nvidia.fullviewmedia.com/siggraph2012/ondemand/SS106.html
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
GamesBattlefield 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 StandardsDocument       Resolution-     Immersive         2D Graphics      OfficePrinting and   Independent     Web               Programming      ProductivityExchange       Fonts           Experience        Interfaces       Applications                                                     Java 2D                                                     API               OpenType          Flash                                                       QtGui                                                       API               TrueType                                   Scalable          Mac OS X                                   Vector            2D API     Adobe Illustrator                                   GraphicsOpen XMLPaper (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
Last Year’s SIGGRAPH Results in Real-timeRon Maharik, Mikhail Bessmeltsev,Alla Sheffer, Ariel Shamir andNathan CarrSIGGRAPH 2011, July 2011“Girl with Words in Her Hair” scene    591 paths    338,507 commands    1,244,474 coordinates
3D Rendering vs. Path RenderingCharacteristic                  GPU 3D rendering                        Path renderingDimensionality                  Projective 3D                           2D, typically affinePixel mapping                   Resolution independent                  Resolution independentOcclusion                       Depth buffering                         Painter’s algorithmRendering primitives            Points, lines, triangles                PathsPrimitive constituents          Vertices                                Control pointsConstituents per primitive      1, 2, or 3 respectively                 UnboundedTopology of filled primitives   Always convex                           Can be concave, self-intersecting, and have holesDegree of primitives            1st order (linear)                      Up to 3rd order (cubic)Rendering modes                 Filled, wire-frame                      Filling, strokingLine properties                 Width, stipple pattern                  Width, dash pattern, capping, join styleColor processing                Programmable shading                    Painting + filter effectsText rendering                  No direct support (2nd class support)   Omni-present (1st class support)Raster operations               Blending                                Brushes, blend modes, compositingColor model                     RGB or sRGB                             RGB, sRGB, CYMK, or grayscaleClipping operations             Clip planes, scissoring, stenciling     Clipping to an arbitrary clip pathCoverage determination          Per-color sample                        Sub-color sample
CPU vs. GPU Limited atRendering Tasks over Time100%                                                                                      100% 90%                                                                                      90% 80%                                                                                      80% 70%                                                                                      70% 60%                                                                                      60% 50%                                                                                GPU   50%                                                                                 GPU                                                                                    CPU                                                                                       CPU 40%                                                                                      40% 30%                                                                                      30% 20%                                                                                      20% 10%                                                                                      10% 0%                                                                                        0%       1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012                1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012       Pipelined 3D Interactive Rendering                                                                              Path RenderingGoal of NV_path_rendering is to make path rendering a GPU-limited taskRender 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
ConfigurationGPU: GeForce 480 GTX (GF100)CPU: Core i7 950 @ 3.07 GHz      NV_path_rendering                               Compared to Alternatives                                                     Alternative approaches                                                     are all much slower
ConfigurationGPU: GeForce 480 GTX (GF100)CPU: Core i7 950 @ 3.07 GHz    Detail on Alternatives                                                        Fast, but unacceptable                                                                quality
Across an range of scenes…Release 300 GeForce GTX 480 Speedups over AlternativesY 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                    500.0                    450.0                               NVpr “peaks” at                               1,800 FPS at 100x100                    400.0                                                           NV_path_rendering (16x)                                                           Cairo                    350.0                                                           QtFrames per second                                                           Skia Bitmap                    300.0                                                           Skia Ganesh FBO                                                           Skia Ganesh 1x (aliased)                    250.0                                                           Direct2D GPU                                                           Direct2D WARP                    200.0                                                                                       poor quality                    150.0                    100.0                     50.0                      0.0                            100x100   200x200   300x300   400x400    500x500     600x600   700x700   800x800   900x900   1000x1000   1100x1100                                                                           Window resolution
NV_path_rendering is more than justmatching CPU vector graphics3D and vector graphics mix                             Superior quality                                                       CPU                             GPU                       Competitors                             Arbitrary programmable shader on paths—2D in perspective is free                             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      Trying to “mix” CPU and GPU methods doesn’t work      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      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 employFrosting on cake is dashed                                                                                     dashingelliptical arcs with roundend 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 implementations     approximate stroking            GPU-accelerated          OpenVG reference GPU-accelerated stroking avoids such short-cuts                                                                   GPU has FLOPS to compute true     stroke point containment                                     Cairo                  Qt                                                                                                                       Stroking with tight end-point curve
The Approach                               Step 1      Step 2:                                           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 specificationPixel assembly                           Vertex assembly          Transform path    (unpack)                                        Vertex operations                   transform                    feedback                                       Primitive assemblyPixel 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 RenderingPath ObjectsStencil operation  only updates stencil buffer  glStencilFillPathNV, glStencilStrokePathNVCover operation  glCoverFillPathNV, glCoverStrokePathNV  renders hull polygons guaranteed to “cover” region updated by  corresponding stencilTwo-step rendering paradigm  stencil, then cover (StC)Application controls cover stenciling and shading operations  Gives application considerable controlNo vertex, tessellation, or geometry shaders active duringsteps  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-endPath Fill Stenciling                                                                        path                                                                          projective       object Specify a path                                       per-path            transform                                                     fill region Specify arbitrary path transformation                                                    operations     Projective (4x4) allowed                                            clipping &     Depth values can be generated for                                   scissoring       sample     depth testing                                                                        accessibility Sample accessibility determined                                        window, depth     Accessibility can be limited by any                                & stencil tests     or all of         Scissor test, depth test, stencil test,         view frustum, user-defined clip                                path winding         planes, sample mask, stipple                                     number         pattern, and window ownership             per-sample                                                                        computation Winding number w.r.t. the                         operations transformed path is computed     Added to stencil value of accessible                                   stencil     samples                                          Fill                                 stencil                                                                           update:                                                   stenciling                              buffer                                                                        +, -, or invert                                                    specific
“Stencil, then Cover”                              cover fill                                             path command                                                                     path                                                                  front-endPath Fill Covering                                                                 path                                                                  projective      object Specify a path                                  per-path         transform Specify arbitrary path                         fill region transformation                                operations                                                                 clipping &     Projective (4x4) allowed                                    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       operations     or all of         Scissor test, depth test, stencil                          stencil         test, view frustum, user-defined    per-fragment or       update         clip planes, sample mask, stipple       per-sample         pattern, and window ownership                          typically zero                                                    shading Conservative covering geometry uses stencil to “cover” filled path                            programmable     Determined by prior stencil step             color                           stencil                                                                     path                                                  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);    glPathParameteriNV(pathObj, GL_JOIN_STYLE_NV, GL_ROUND_NV);        non-zero fill style 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-endPath Stroke Stenciling                                                                path                                                                   projective        object   Specify a path                                per-path          transform   Specify arbitrary path transformation        fill region        Projective (4x4) allowed               operations         clipping &        Depth values can be generated for        depth testing                                             scissoring                                                                                   sample   Sample accessibility determined                                                 accessibility        Accessibility can be limited by any                      window, depth        or all of                                                & stencil tests           Scissor test, depth test, stencil           test, view frustum, user-defined           clip planes, sample mask, stipple           pattern, and window ownership                            stroke                                               per-sample            point   Point containment w.r.t. the stroked   path is determined                          operations        containment        Replace stencil value of contained        samples                                                  Stroke             stencil                                                                                     stencil                                                stenciling          update:                                                                                     buffer                                                 specific           replace
cover stroke“Stencil, then Cover”                          path command          path                                                                  front-endPath Stroke Covering                                                                path                                                                  projective       object  Specify a path                                 per-path         transform  Specify arbitrary path                        fill region  transformation                               operations                                                                 clipping &       Projective (4x4) allowed                                  scissoring       sample       Depth values can be generated for       depth testing                                                              accessibility  Sample accessibility determined              per-sample       window, depth       Accessibility can be limited by any                      & stencil tests                                               operations       or all of             Scissor test, depth test,             stencil test, view frustum,                            stencil             user-defined clip planes,       per-fragment or       update             sample mask, stipple pattern,       per-sample     typically zero             and window ownership                   shading  Conservative covering geometry  uses stencil to “cover” stroked path                          programmable       Determined by prior stencil step           color                            stencil                                                                     path                                                  buffer           shading         buffer
First-class, Resolution-independent   Font SupportFonts 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 glyphsNV_path_rendering makes font support easy    Can specify a range of path objects with        A specified font        Sequence or range of Unicode character pointsNo 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 RenderingFunctionality: Filtering GPUs are highly efficient at image filtering    Fast texture mapping                         Qt       Mipmapping       Anisotropic filtering       Wrap modes                                                   Moiré CPUs aren't really                                artifacts          GPU                                                 Cairo
Handling Uncommon Path RenderingFunctionality: Projection Projection “just works”    Because GPU does everything    with perspective-correct    interpolation
Projective Path Rendering Support Compared GPU           Skia           Cairo        Qtflawless       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 RenderingPostScript 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 HappenEach 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 withScissoring 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 PathExample clipping the PostScript tiger to a heart constructed fromtwo 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 withPath 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 onPath 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    Rotated grid sub-positions                     opacity    Fast downsampling by GPU    Avoids conflating coverage &    opacity                                                   Cairo, Qt, Skia,       Maintains distinct color sample             and Direct2D       per sample location                         rendered    Centroid sampling                              shows dark Fast enough for temporal                          cracks artifacts                                                   due to conflating schemes                               artifacts   coverage with    >>60 fps means multi-pass                      opacity, notice    improves quality                               background                                                   bleeding
Real                                  Flash                                 Scene                                same scene, GPU-rendered                                        without conflation    conflation    artifacts abound,    rendered by Skiaconflation is aliasing &edge coverage percentsare un-predicable in general;means conflated pixelsflicker 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 exampleModern GPUs have native support for                                                 moving from saturated red to blueperceptually-correct for     sRGB framebuffer blending     sRGB texture filtering     No reason to tolerate uncorrected linear     RGB color artifacts!     More intuitive for artists to control                           linear RGBNegligible expense for GPU to perform                               transition between saturated                                                                    red and saturated blue hassRGB-correct rendering                                              dark purple region     However quite expensive for software path     renderers to perform sRGB rendering          Not done in practice                                                                       sRGB                                                                      perceptually smooth                                                                      transition from saturated                                                                      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 current driver: use OpenGL 4.3 beta driver    http://www.nvidia.com/content/devzone/opengl-driver-4.3.html    Or try www.nvidia.com/drivers       Grab the latest Beta drivers for your OS & GPU    Latest drivers greatly improve instanced stencil step    performance! 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
Don’t Forget the 20th Anniversary Party    Date: August 8th 2012 ( today! )    Location: JW Marriott Los Angeles at LA Live    Venue: Gold Ballroom – Salon 1
Other OpenGL-related    NVIDIA Sessions at SIGGRAPHGPU Ray Tracing and OptiX    Wednesday in West Hall 503, 3:50 PM - 4:50 PM    David McAllister, OptiX Manager, NVIDIA    Phillip Miller, Director, Workstation Software Product Management, NVIDIAVoxel Cone Tracing & Sparse Voxel Octree for Real-time Global Illumination    Wednesday in NVIDIA Booth, 3:50 PM - 4:50 PM    Cyril Crassin, Postdoctoral Research Scientist, NVIDIA ResearchOpenSubdiv: High Performance GPU Subdivision Surface Drawing    Thursday in NVIDIA Booth, 10:00 AM - 10:30 AM    Pixar Animation Studios GPU Team, PixarnvFX : A New Scene & Material Effect Framework for OpenGL and DirectX    Thursday in NVIDIA Booth, 2:00 PM - 2:30 PM    Tristan Lorach, Developer Relations Senior Engineer, NVIDIA

Recommended

PPT
SIGGRAPH Asia 2012: GPU-accelerated Path Rendering
PPT
GPU accelerated path rendering fastforward
PPT
SIGGRAPH Asia 2012 Exhibitor Talk: OpenGL 4.3 and Beyond
PPT
GTC 2012: GPU-Accelerated Path Rendering
PPT
SIGGRAPH 2012: NVIDIA OpenGL for 2012
PDF
GPU-accelerated Path Rendering
PPT
Slides: Accelerating Vector Graphics Rendering using the Graphics Hardware Pi...
PPTX
Migrating from OpenGL to Vulkan
PDF
NV_path_rendering Frequently Asked Questions
PDF
Programming with NV_path_rendering: An Annex to the SIGGRAPH Asia 2012 paper...
PPT
GTC 2012: NVIDIA OpenGL in 2012
PPT
NVIDIA OpenGL in 2016
PDF
Mixing Path Rendering and 3D
PDF
Accelerating Vector Graphics Rendering using the Graphics Hardware Pipeline
PPT
NVIDIA's OpenGL Functionality
PPT
OpenGL 3.2 and More
PPT
OpenGL for 2015
PPT
Virtual Reality Features of NVIDIA GPUs
PDF
Realizing OpenGL
PPTX
OpenGL Shading Language
PPT
CS 354 GPU Architecture
PDF
Avoiding 19 Common OpenGL Pitfalls
PPT
CS 354 Introduction
PPT
OpenGL 4 for 2010
PPT
CS 354 Vector Graphics & Path Rendering
PPT
CS 354 Viewing Stuff
PPT
An Introduction to NV_path_rendering
PDF
Modern OpenGL Usage: Using Vertex Buffer Objects Well
PDF
Deep learning on spark
PDF
Accelerating Machine Learning Applications on Spark Using GPUs
byIBM
 

More Related Content

PPT
SIGGRAPH Asia 2012: GPU-accelerated Path Rendering
PPT
GPU accelerated path rendering fastforward
PPT
SIGGRAPH Asia 2012 Exhibitor Talk: OpenGL 4.3 and Beyond
PPT
GTC 2012: GPU-Accelerated Path Rendering
PPT
SIGGRAPH 2012: NVIDIA OpenGL for 2012
PDF
GPU-accelerated Path Rendering
PPT
Slides: Accelerating Vector Graphics Rendering using the Graphics Hardware Pi...
PPTX
Migrating from OpenGL to Vulkan
SIGGRAPH Asia 2012: GPU-accelerated Path Rendering
GPU accelerated path rendering fastforward
SIGGRAPH Asia 2012 Exhibitor Talk: OpenGL 4.3 and Beyond
GTC 2012: GPU-Accelerated Path Rendering
SIGGRAPH 2012: NVIDIA OpenGL for 2012
GPU-accelerated Path Rendering
Slides: Accelerating Vector Graphics Rendering using the Graphics Hardware Pi...
Migrating from OpenGL to Vulkan

What's hot

PDF
NV_path_rendering Frequently Asked Questions
PDF
Programming with NV_path_rendering: An Annex to the SIGGRAPH Asia 2012 paper...
PPT
GTC 2012: NVIDIA OpenGL in 2012
PPT
NVIDIA OpenGL in 2016
PDF
Mixing Path Rendering and 3D
PDF
Accelerating Vector Graphics Rendering using the Graphics Hardware Pipeline
PPT
NVIDIA's OpenGL Functionality
PPT
OpenGL 3.2 and More
PPT
OpenGL for 2015
PPT
Virtual Reality Features of NVIDIA GPUs
PDF
Realizing OpenGL
PPTX
OpenGL Shading Language
PPT
CS 354 GPU Architecture
PDF
Avoiding 19 Common OpenGL Pitfalls
PPT
CS 354 Introduction
PPT
OpenGL 4 for 2010
PPT
CS 354 Vector Graphics & Path Rendering
PPT
CS 354 Viewing Stuff
PPT
An Introduction to NV_path_rendering
PDF
Modern OpenGL Usage: Using Vertex Buffer Objects Well
NV_path_rendering Frequently Asked Questions
Programming with NV_path_rendering: An Annex to the SIGGRAPH Asia 2012 paper...
GTC 2012: NVIDIA OpenGL in 2012
NVIDIA OpenGL in 2016
Mixing Path Rendering and 3D
Accelerating Vector Graphics Rendering using the Graphics Hardware Pipeline
NVIDIA's OpenGL Functionality
OpenGL 3.2 and More
OpenGL for 2015
Virtual Reality Features of NVIDIA GPUs
Realizing OpenGL
OpenGL Shading Language
CS 354 GPU Architecture
Avoiding 19 Common OpenGL Pitfalls
CS 354 Introduction
OpenGL 4 for 2010
CS 354 Vector Graphics & Path Rendering
CS 354 Viewing Stuff
An Introduction to NV_path_rendering
Modern OpenGL Usage: Using Vertex Buffer Objects Well

Viewers also liked

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

Similar to SIGGRAPH 2012: GPU-Accelerated 2D and Web Rendering

PDF
Hardware Accelerated 2D Rendering for Android
PDF
Modern Graphics Pipeline Overview
PDF
GeForce 8800 OpenGL Extensions
PPT
NVIDIA Graphics, Cg, and Transparency
PDF
NV_path_rendering
PDF
2D Games to HPC
 
PDF
3 d to_hpc
PDF
3 d to _hpc
PDF
[03 1][gpu용 개발자 도구 - parallel nsight 및 axe] miller axe
PPTX
Graphics pipelining
PDF
GPU Virtualization on VMware's Hosted I/O Architecture
PPTX
Penn graphics
PDF
Keynote (Johan Andersson) - Mantle for Developers - by Johan Andersson, Techn...
PPT
1 COMPUTER GRAPHICS.ppt
PDF
Getting Started with NV_path_rendering
PPT
Computer Graphics Introduction
PPTX
GPU Computing: A brief overview
PPTX
The Rendering Pipeline - Challenges & Next Steps
 
PDF
CPU is in Focus Again! Implementing DOF on CPU.
PDF
Understanding hardware acceleration on mobile browsers presentation
Hardware Accelerated 2D Rendering for Android
Modern Graphics Pipeline Overview
GeForce 8800 OpenGL Extensions
NVIDIA Graphics, Cg, and Transparency
NV_path_rendering
2D Games to HPC
 
3 d to_hpc
3 d to _hpc
[03 1][gpu용 개발자 도구 - parallel nsight 및 axe] miller axe
Graphics pipelining
GPU Virtualization on VMware's Hosted I/O Architecture
Penn graphics
Keynote (Johan Andersson) - Mantle for Developers - by Johan Andersson, Techn...
1 COMPUTER GRAPHICS.ppt
Getting Started with NV_path_rendering
Computer Graphics Introduction
GPU Computing: A brief overview
The Rendering Pipeline - Challenges & Next Steps
 
CPU is in Focus Again! Implementing DOF on CPU.
Understanding hardware acceleration on mobile browsers presentation

More from Mark Kilgard

PDF
D11: a high-performance, protocol-optional, transport-optional, window system...
PPT
Computers, Graphics, Engineering, Math, and Video Games for High School Students
PPT
NVIDIA OpenGL and Vulkan Support for 2017
PPT
NVIDIA OpenGL 4.6 in 2017
PPT
EXT_window_rectangles
PPT
NV_path rendering Functional Improvements
PPTX
OpenGL 4.5 Update for NVIDIA GPUs
PPT
CS 354 Final Exam Review
PPT
CS 354 Surfaces, Programmable Tessellation, and NPR Graphics
PPT
CS 354 Performance Analysis
PPT
CS 354 Acceleration Structures
PPT
CS 354 Global Illumination
PPT
CS 354 Ray Casting & Tracing
PPT
CS 354 Typography
PPT
CS 354 Bezier Curves
D11: a high-performance, protocol-optional, transport-optional, window system...
Computers, Graphics, Engineering, Math, and Video Games for High School Students
NVIDIA OpenGL and Vulkan Support for 2017
NVIDIA OpenGL 4.6 in 2017
EXT_window_rectangles
NV_path rendering Functional Improvements
OpenGL 4.5 Update for NVIDIA GPUs
CS 354 Final Exam Review
CS 354 Surfaces, Programmable Tessellation, and NPR Graphics
CS 354 Performance Analysis
CS 354 Acceleration Structures
CS 354 Global Illumination
CS 354 Ray Casting & Tracing
CS 354 Typography
CS 354 Bezier Curves

Recently uploaded

PDF
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
PDF
[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...
PDF
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
PDF
[DevFest Strasbourg 2025] - NodeJs Can do that !!
PDF
[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels
PDF
The partnership effect: Libraries and publishers on collaborating and thrivin...
PDF
Transforming Supply Chains with Amazon Bedrock AgentCore (AWS Swiss User Grou...
PDF
The Evolving Role of the CEO in the Age of AI
PDF
Transforming Content Operations in the Age of AI
PDF
How Much Does It Cost To Build Software
PDF
Cybersecurity Prevention and Detection: Unit 2
PPTX
kernel PPT (Explanation of Windows Kernal).pptx
PPTX
UFCD 0797 - SISTEMAS OPERATIVOS_Unidade Completa.pptx
PDF
[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...
PPTX
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
PDF
KMWorld - KM & AI Bring Collectivity, Nostalgia, & Selectivity
PDF
ODSC AI West: Agent Optimization: Beyond Context engineering
PDF
10 Best Automation QA Testing Software Tools in 2025.pdf
PDF
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
PDF
Crane Accident Prevention Guide: Key OSHA Regulations for Safer Operations
Mastering UiPath Maestro – Session 2 – Building a Live Use Case - Session 2
[BDD 2025 - Full-Stack Development] Digital Accessibility: Why Developers nee...
Cheryl Hung, Vibe Coding Auth Without Melting Down! isaqb Software Architectu...
[DevFest Strasbourg 2025] - NodeJs Can do that !!
[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels
The partnership effect: Libraries and publishers on collaborating and thrivin...
Transforming Supply Chains with Amazon Bedrock AgentCore (AWS Swiss User Grou...
The Evolving Role of the CEO in the Age of AI
Transforming Content Operations in the Age of AI
How Much Does It Cost To Build Software
Cybersecurity Prevention and Detection: Unit 2
kernel PPT (Explanation of Windows Kernal).pptx
UFCD 0797 - SISTEMAS OPERATIVOS_Unidade Completa.pptx
[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...
Guardrails in Action - Ensuring Safe AI with Azure AI Content Safety.pptx
KMWorld - KM & AI Bring Collectivity, Nostalgia, & Selectivity
ODSC AI West: Agent Optimization: Beyond Context engineering
10 Best Automation QA Testing Software Tools in 2025.pdf
[BDD 2025 - Full-Stack Development] The Modern Stack: Building Web & AI Appli...
Crane Accident Prevention Guide: Key OSHA Regulations for Safer Operations

SIGGRAPH 2012: GPU-Accelerated 2D and Web Rendering

  • 1.
    GPU-Accelerated 2D and Web Rendering Mark Kilgard
  • 2.
    Talk DetailsLocation: WestHall Meeting Room 503, Los Angeles Convention CenterDate: Wednesday, August 8, 2012Time: 2:40 PM – 3:40 PMMark Kilgard (Principal Software Engineer, NVIDIA)Abstract: The future of GPU-based visual computing integrates the web, resolution-independent 2Dgraphics, and 3D to maximize interactivity and quality while minimizing consumed power. See what NVIDIA isdoing today to accelerate resolution-independent 2D graphics for web content. This presentation explainsNVIDIA's unique "stencil, then cover" approach to accelerating path rendering with OpenGL anddemonstrates the wide variety of web content that can be accelerated with this approach.Topic Areas: GPU Accelerated Internet; Digital Content Creation & Film; VisualizationLevel: IntermediateWatch video replay: http://nvidia.fullviewmedia.com/siggraph2012/ondemand/SS106.html
  • 3.
    Mark Kilgard PrincipalSystem 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 goodat a lot of stuff
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
    Can GPUs render& improve the immersive web?
  • 15.
    What is pathrendering? 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 RenderingPaper John Warnock & Douglas Wyatt, Xerox PARC Presented SIGGRAPH 1982 Warnock founded Adobe months later John Warnock Adobe founder
  • 17.
    Path Rendering StandardsDocument Resolution- Immersive 2D Graphics OfficePrinting and Independent Web Programming ProductivityExchange Fonts Experience Interfaces Applications Java 2D API OpenType Flash QtGui API TrueType Scalable Mac OS X Vector 2D API Adobe Illustrator GraphicsOpen XMLPaper (XPS) Inkscape HTML 5 Khronos API Open Source
  • 18.
    Live DemoClassic PostScript content Complex text rendering Yesterday’s New York Times rendered from Flash content its resolution-independent form
  • 19.
    Last Year’s SIGGRAPHResults in Real-timeRon Maharik, Mikhail Bessmeltsev,Alla Sheffer, Ariel Shamir andNathan CarrSIGGRAPH 2011, July 2011“Girl with Words in Her Hair” scene 591 paths 338,507 commands 1,244,474 coordinates
  • 20.
    3D Rendering vs.Path RenderingCharacteristic GPU 3D rendering Path renderingDimensionality Projective 3D 2D, typically affinePixel mapping Resolution independent Resolution independentOcclusion Depth buffering Painter’s algorithmRendering primitives Points, lines, triangles PathsPrimitive constituents Vertices Control pointsConstituents per primitive 1, 2, or 3 respectively UnboundedTopology of filled primitives Always convex Can be concave, self-intersecting, and have holesDegree of primitives 1st order (linear) Up to 3rd order (cubic)Rendering modes Filled, wire-frame Filling, strokingLine properties Width, stipple pattern Width, dash pattern, capping, join styleColor processing Programmable shading Painting + filter effectsText rendering No direct support (2nd class support) Omni-present (1st class support)Raster operations Blending Brushes, blend modes, compositingColor model RGB or sRGB RGB, sRGB, CYMK, or grayscaleClipping operations Clip planes, scissoring, stenciling Clipping to an arbitrary clip pathCoverage determination Per-color sample Sub-color sample
  • 21.
    CPU vs. GPULimited atRendering Tasks over Time100% 100% 90% 90% 80% 80% 70% 70% 60% 60% 50% GPU 50% GPU CPU CPU 40% 40% 30% 30% 20% 20% 10% 10% 0% 0% 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 Pipelined 3D Interactive Rendering Path RenderingGoal of NV_path_rendering is to make path rendering a GPU-limited taskRender all interactive pixels, whether 3D or 2D or web content with the GPU
  • 22.
    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
  • 23.
    ConfigurationGPU: GeForce 480GTX (GF100)CPU: Core i7 950 @ 3.07 GHz NV_path_rendering Compared to Alternatives Alternative approaches are all much slower
  • 24.
    ConfigurationGPU: GeForce 480GTX (GF100)CPU: Core i7 950 @ 3.07 GHz Detail on Alternatives Fast, but unacceptable quality
  • 25.
    Across an rangeof scenes…Release 300 GeForce GTX 480 Speedups over AlternativesY axis is logarithmic—shows how many TIMES faster NV_path_rendering is that competitor
  • 26.
  • 27.
    Tiger Scene onGeForce 650 Absolute Frames/Second on GeForce 650 500.0 450.0 NVpr “peaks” at 1,800 FPS at 100x100 400.0 NV_path_rendering (16x) Cairo 350.0 QtFrames per second Skia Bitmap 300.0 Skia Ganesh FBO Skia Ganesh 1x (aliased) 250.0 Direct2D GPU Direct2D WARP 200.0 poor quality 150.0 100.0 50.0 0.0 100x100 200x200 300x300 400x400 500x500 600x600 700x700 800x800 900x900 1000x1000 1100x1100 Window resolution
  • 28.
    NV_path_rendering is morethan justmatching CPU vector graphics3D and vector graphics mix Superior quality   CPU GPU Competitors Arbitrary programmable shader on paths—2D in perspective is free bump mapping
  • 29.
    Partial Solutions NotEnough Path rendering has 30 years of heritage and history Can’t do a 90% solution and Software to change Trying to “mix” CPU and GPU methods doesn’t work 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 Enable new applications
  • 30.
    Path Filling andStroking just filling just stroking filling + stroke = intended content
  • 31.
    Dashing Content Examples Artist made windows with dashed line Same cake segment missing dashed stroking details Technical diagrams and charts often employFrosting on cake is dashed dashingelliptical arcs with roundend caps for “beaded” look;flowers are also dashing All content shown is fully GPU rendered Dashing character outlines for quilted look
  • 32.
    Excellent Geometric Fidelityfor Stroking Correct stroking is hard Lots of CPU implementations approximate stroking GPU-accelerated OpenVG reference GPU-accelerated stroking avoids such short-cuts   GPU has FLOPS to compute true stroke point containment Cairo Qt   Stroking with tight end-point curve
  • 33.
    The Approach Step 1 Step 2: 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
  • 34.
    Pixel pipeline Vertex pipeline Path pipeline Application Path specificationPixel assembly Vertex assembly Transform path (unpack) Vertex operations transform feedback Primitive assemblyPixel operations Primitive operations Fill/Stroke Covering Pixel pack Rasterization read Texture Fragment operations back memory Fill/Stroke Application Raster operations Stenciling Framebuffer Display
  • 35.
    Key Operations forRenderingPath ObjectsStencil operation only updates stencil buffer glStencilFillPathNV, glStencilStrokePathNVCover operation glCoverFillPathNV, glCoverStrokePathNV renders hull polygons guaranteed to “cover” region updated by corresponding stencilTwo-step rendering paradigm stencil, then cover (StC)Application controls cover stenciling and shading operations Gives application considerable controlNo vertex, tessellation, or geometry shaders active duringsteps Why? Paths have control points & rasterized regions, not vertices, triangles
  • 36.
    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);
  • 37.
    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)
  • 38.
    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
  • 39.
    “Stencil, then Cover” stencil fill path command path front-endPath Fill Stenciling path projective object Specify a path per-path transform fill region Specify arbitrary path transformation operations Projective (4x4) allowed clipping & Depth values can be generated for scissoring sample depth testing accessibility Sample accessibility determined window, depth Accessibility can be limited by any & stencil tests or all of Scissor test, depth test, stencil test, view frustum, user-defined clip path winding planes, sample mask, stipple number pattern, and window ownership per-sample computation Winding number w.r.t. the operations transformed path is computed Added to stencil value of accessible stencil samples Fill stencil update: stenciling buffer +, -, or invert specific
  • 40.
    “Stencil, then Cover” cover fill path command path front-endPath Fill Covering path projective object Specify a path per-path transform Specify arbitrary path fill region transformation operations clipping & Projective (4x4) allowed 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 operations or all of Scissor test, depth test, stencil stencil test, view frustum, user-defined per-fragment or update clip planes, sample mask, stipple per-sample pattern, and window ownership typically zero shading Conservative covering geometry uses stencil to “cover” filled path programmable Determined by prior stencil step color stencil path buffer shading buffer
  • 41.
    Adding Stroking tothe 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); glPathParameteriNV(pathObj, GL_JOIN_STYLE_NV, GL_ROUND_NV); non-zero fill style 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
  • 42.
    stencil stroke“Stencil, thenCover” path command path front-endPath Stroke Stenciling path projective object Specify a path per-path transform Specify arbitrary path transformation fill region Projective (4x4) allowed operations clipping & Depth values can be generated for depth testing scissoring sample Sample accessibility determined accessibility Accessibility can be limited by any window, depth or all of & stencil tests Scissor test, depth test, stencil test, view frustum, user-defined clip planes, sample mask, stipple pattern, and window ownership stroke per-sample point Point containment w.r.t. the stroked path is determined operations containment Replace stencil value of contained samples Stroke stencil stencil stenciling update: buffer specific replace
  • 43.
    cover stroke“Stencil, thenCover” path command path front-endPath Stroke Covering path projective object Specify a path per-path transform Specify arbitrary path fill region transformation operations clipping & Projective (4x4) allowed scissoring sample Depth values can be generated for depth testing accessibility Sample accessibility determined per-sample window, depth Accessibility can be limited by any & stencil tests operations or all of Scissor test, depth test, stencil test, view frustum, stencil user-defined clip planes, per-fragment or update sample mask, stipple pattern, per-sample typically zero and window ownership shading Conservative covering geometry uses stencil to “cover” stroked path programmable Determined by prior stencil step color stencil path buffer shading buffer
  • 44.
    First-class, Resolution-independent Font SupportFonts 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 glyphsNV_path_rendering makes font support easy Can specify a range of path objects with A specified font Sequence or range of Unicode character pointsNo 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
  • 45.
    Handling Common PathRenderingFunctionality: Filtering GPUs are highly efficient at image filtering Fast texture mapping  Qt Mipmapping Anisotropic filtering Wrap modes Moiré CPUs aren't really artifacts  GPU  Cairo
  • 46.
    Handling Uncommon PathRenderingFunctionality: Projection Projection “just works” Because GPU does everything with perspective-correct interpolation
  • 47.
    Projective Path RenderingSupport Compared GPU  Skia  Cairo  Qtflawless yes, but bugs unsupported unsupported correct correct unsupported unsupported correct wrong unsupported unsupported
  • 48.
    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
  • 49.
    Accessible Samples ofa 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
  • 50.
    Mixing Depth Bufferingand Path RenderingPostScript tigers surrounding Utah teapot Plus overlaid TrueType font rendering No textures involved, no multi-pass
  • 51.
  • 52.
    3D Path RenderingDetails 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
  • 53.
    Without glPathStencilDepthOffset Bad Things HappenEach 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
  • 54.
    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
  • 55.
    Clip Planes Workwith Path Rendering Scene showing a Welsh dragon clipped to all 64 combinations of 6 clip planes enabled & disabled
  • 56.
    Path Rendering WorkswithScissoring and Stippling too Scene showing a tiger scissoring into 9 regions Tiger with two different polygon stipple patterns
  • 57.
    Rendering Paths Clippedto Some Other Arbitrary PathExample clipping the PostScript tiger to a heart constructed fromtwo cubic Bezier curves unclipped tiger tiger with pink background clipped to heart
  • 58.
    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
  • 59.
    Arbitrary Programmable GPUShading withPath 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)
  • 60.
    Example of BumpMapping onPath Rendered Text Phrase “Brick wall!” is path rendered and bump mapped with a Cg fragment shader light source position
  • 61.
    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
  • 62.
    Anti-aliasing Strategy BenefitsBenefits 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 Rotated grid sub-positions opacity Fast downsampling by GPU Avoids conflating coverage & opacity Cairo, Qt, Skia, Maintains distinct color sample and Direct2D per sample location rendered Centroid sampling shows dark Fast enough for temporal cracks artifacts due to conflating schemes artifacts coverage with >>60 fps means multi-pass opacity, notice improves quality background bleeding
  • 63.
    Real Flash Scene same scene, GPU-rendered without conflation conflation artifacts abound, rendered by Skiaconflation is aliasing &edge coverage percentsare un-predicable in general;means conflated pixelsflicker when animated slowly
  • 64.
    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
  • 65.
    Improved Color Space: sRGB Path Rendering Radial color gradient exampleModern GPUs have native support for moving from saturated red to blueperceptually-correct for sRGB framebuffer blending sRGB texture filtering No reason to tolerate uncorrected linear RGB color artifacts! More intuitive for artists to control  linear RGBNegligible expense for GPU to perform transition between saturated red and saturated blue hassRGB-correct rendering dark purple region However quite expensive for software path renderers to perform sRGB rendering Not done in practice  sRGB perceptually smooth transition from saturated red to saturated blue
  • 66.
    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
  • 67.
    Learning NV_path_rendering Whitepaper + source code available “Getting Started with NV_path_rendering” Explains Path specification “Stencil, then Cover” API usage Instanced rendering for text and glyphs
  • 68.
    NV_path_rendering SDK ExamplesA 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
  • 69.
    Whitepapers “Getting Startedwith NV_path_rendering”
  • 70.
    Whitepapers “Mixing 3Dand Path Rendering”
  • 71.
    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
  • 72.
    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
  • 73.
    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
  • 74.
    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
  • 75.
    Conclusions GPU-acceleration of2D 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.
  • 77.
    More Information Bestcurrent driver: use OpenGL 4.3 beta driver http://www.nvidia.com/content/devzone/opengl-driver-4.3.html Or try www.nvidia.com/drivers Grab the latest Beta drivers for your OS & GPU Latest drivers greatly improve instanced stencil step performance! 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
  • 78.
    Don’t Forget the20th Anniversary Party Date: August 8th 2012 ( today! ) Location: JW Marriott Los Angeles at LA Live Venue: Gold Ballroom – Salon 1
  • 79.
    Other OpenGL-related NVIDIA Sessions at SIGGRAPHGPU Ray Tracing and OptiX Wednesday in West Hall 503, 3:50 PM - 4:50 PM David McAllister, OptiX Manager, NVIDIA Phillip Miller, Director, Workstation Software Product Management, NVIDIAVoxel Cone Tracing & Sparse Voxel Octree for Real-time Global Illumination Wednesday in NVIDIA Booth, 3:50 PM - 4:50 PM Cyril Crassin, Postdoctoral Research Scientist, NVIDIA ResearchOpenSubdiv: High Performance GPU Subdivision Surface Drawing Thursday in NVIDIA Booth, 10:00 AM - 10:30 AM Pixar Animation Studios GPU Team, PixarnvFX : A New Scene & Material Effect Framework for OpenGL and DirectX Thursday in NVIDIA Booth, 2:00 PM - 2:30 PM Tristan Lorach, Developer Relations Senior Engineer, NVIDIA

Editor's Notes

  • #35 NV_path_rendering provides a new third pipeline—in addition to the vertex and pixel pipelines—for rendering pixels

[8]ページ先頭

©2009-2025 Movatter.jp