What is path rendering?

Mark KilgardPrincipal System Software EngineerOpenGL driver and API evolutionCg (“C for graphics”) shading languageGPU-accelerated path renderingOpenGL Utility Toolkit (GLUT) implementerAuthor of OpenGL for the X Window SystemCo-author of Cg Tutorial

GamesBattlefield 3, EA

Data visualization

Product designCatia

Physics simulationCUDA N-Body

Interactive ray tracingOptiX

Training

Molecular modelingNCSA

Impressive stuff

What about advancing 2D graphics?

Can GPUs render & improve the immersive web?

What is path rendering?A rendering approachResolution-independent two-dimensionalgraphicsOcclusion & transparency depend on renderingorderSo called “Painter’s Algorithm”Basic primitive is a path to be filled or strokedPath is a sequence of path commandsCommands are– moveto, lineto, curveto, arcto, closepath,etc.StandardsContent: PostScript, PDF, TrueType fonts,Flash, Scalable Vector Graphics (SVG), HTML5Canvas, Silverlight, Office drawingsAPIs: Apple Quartz 2D, Khronos OpenVG,Microsoft Direct2D, Cairo, Skia, Qt::QPainter,Anti-grain Graphics

Seminal Path Rendering PaperJohn Warnock & Douglas Wyatt, Xerox PARCPresented SIGGRAPH 1982Warnock founded Adobe months laterJohn WarnockAdobe founder

Path Rendering StandardsDocumentPrinting andExchangeResolution-IndependentFontsImmersiveWebExperience2D GraphicsProgrammingInterfacesOfficeProductivityApplicationsOpenTypeFlashJava 2DAPIQtGuiAPITrueTypeScalableVectorGraphicsMac OS X2D APIAdobe IllustratorOpen XMLPaper (XPS)HTML 5Khronos APIInkscapeOpen Source

Live DemoClassic PostScript contentComplex text renderingFlash contentYesterday’s New York Times rendered fromits 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” scene591 paths338,507 commands1,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 1 st order (linear) Up to 3 rd 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 (2 nd class support) Omni-present (1 st 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 atRendering Tasks over Time100%100%90%90%80%80%70%70%60%60%50%40%GPUCPU50%40%GPUCPU30%30%20%20%10%10%0%1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012Pipelined 3D Interactive Rendering0%1998 1999 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012Path RenderingGoal of NV_path_rendering is to make path rendering a GPU 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 renderingUses “stencil, then cover” (StC) approachCreate a path objectStep 1: “Stencil” the path object into the stencil bufferGPU provides fast stenciling of filled or stroked pathsStep 2: “Cover” the path object and stencil test against its coverage stenciled by theprior stepApplication can configure arbitrary shading during the stepMore details laterSupports the union of functionality of all major path rendering standardsIncludes all stroking embellishmentsIncludes first-class text and font supportAllows functionality to mix with traditional 3D and programmable shading

1100x1100ConfigurationGPU: GeForce 480 GTX (GF100)CPU: Core i7 950 @ 3.07 GHzNV_path_renderingCompared to AlternativesWith Release 300 driver NV_path_renderingAlternative APIs rendering same content2,000.002,000.001,800.001,600.001,400.001,800.001,600.001,400.001,200.001,000.00800.00600.00CairoQtSkia BitmapSkia Ganesh FBO (16x)Skia Ganesh Aliased (1x)Direct2D GPUDirect2D WARP400.00200.00--100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x1000Frames per second1,200.001,000.00800.00600.0016x8x4x2x1xAlternative approachesare all much slower400.00200.00100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100Frames per secondWindow Resolution in PixelsWindow Resolution in Pixels

Detail on AlternativesSame results, changed Y Axis250.00200.00150.00100.0050.00-100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100CairoQtSkia BitmapSkia Ganesh FBO (16x)Skia Ganesh Aliased (1x)Direct2D GPUDirect2D WARPFrames per secondAlternative APIs rendering same content2,000.001,800.001,600.001,400.001,200.001,000.00800.00600.00400.00200.00Window Resolution in Pixels-1 0 0 x 1 0 02 0 0 x 2 0 03 0 0 x 3 0 04 0 0 x 4 0 05 0 0 x 5 0 06 0 0 x 6 0 07 0 0 x 7 0 08 0 0 x 8 0 09 0 0 x 9 0 01 0 0 0 x 1 0 0 0F r a m e s p e r s e c o n d1 1 0 0 x 1 1 0 0ConfigurationGPU: GeForce 480 GTX (GF100)CPU: Core i7 950 @ 3.07 GHzCairoQtSkia BitmapSkia Ganesh FBO (16x)Skia Ganesh Aliased (1x)Direct2D GPUDirect2D WARPWindow Resolution in PixelsFast, but unacceptablequality

100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100Cougartiger_clipped_by_heAcross an range of scenes…Release 300 GeForce GTX 480 Speedups over AlternativestigerWelsh_dragonYokozawaCeltic_round_dogsbutterfly spikesAmerican_Samoacowboy Buonaparte Embrace_the_World 100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x11001000.00NVpr16/CairoNVpr16/SkiaBitmapNVpr16/SkiaGaneshNVpr16/Direct2D GPU100.00NVpr16/Direct2D WARP10.001.000.10Y axis is logarithmic—shows how many TIMES faster NV_path_rendering is that competitor

GeForce 650 (Kepler) Results0.101.0010.00100.00100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100100x100200x200300x300400x400500x500600x600700x700800x800900x9001000x10001100x1100TigerWelsh_dragonCeltic_round_dogs butterfly spikes American_Samoa cow boy BuonaparteEmbrace_the_WorldYokozaw aCougartiger_clipped_by_hearNVpr16/CairoNVpr16/SkiaBitmapNVpr16/SkiaGaneshNVpr16/D2DNVpr16/WARP

Tiger Scene on GeForce 650Absolute Frames/Second on GeForce 650Frames per second500.0450.0400.0350.0300.0250.0200.0150.0NVpr “peaks” at1,800 FPS at 100x100NV_path_rendering (16x)CairoQtSkia BitmapSkia Ganesh FBOSkia Ganesh 1x (aliased)Direct2D GPUDirect2D WARPpoor quality100.050.00.0100x100 200x200 300x300 400x400 500x500 600x600 700x700 800x800 900x900 1000x1000 1100x1100Window resolution

NV_path_rendering is more than justmatching CPU vector graphics3D and vector graphics mixSuperior qualityGPU CPUCompetitors2D in perspective is freeArbitrary programmable shader on paths—bump mapping

Partial Solutions Not EnoughPath rendering has 30 years of heritage and historyCan’t do a 90% solution and Software to changeTrying to “mix” CPU and GPU methods doesn’t workExpensive to move software—needs to be an unambiguous winMust surpass CPU approaches on all frontsPerformanceQualityFunctionalityConformance to standardsMore power efficientEnable new applicationsJohn WarnockAdobe founderInspiration: Perceptive Pixel

Path Filling and Strokingjust fillingjust strokingfilling + stroke =intended content

Dashing Content ExamplesFrosting on cake is dashedelliptical arcs with roundend caps for “beaded” look;flowers are also dashingSame cakemissing dashedstroking detailsArtist made windowswith dashed linesegmentTechnical diagramsand charts often employdashingAll content shownis fully GPU renderedDashing character outlines for quilted look

Excellent Geometric Fidelity for StrokingCorrect stroking is hardLots of CPU implementationsapproximate strokingGPU-accelerated stroking avoidssuch short-cutsGPU has FLOPS to compute truestroke point containmentGPU-acceleratedCairoOpenVG referenceQtStroking with tight end-point curve

The ApproachStep 1StencilrepeatStep 2:Cover“Stencil, then Cover” (StC)Map the path rendering task from a sequentialalgorithm……to a pipelined and massively parallel taskBreak path rendering into two stepsFirst, “stencil” the path’s coverage into stencil bufferSecond, conservatively “cover” pathTest against path coverage determined in the 1 st stepShade the pathAnd reset the stencil value to render next path

Pixel pipelineVertex pipelinePath pipelineApplicationPath specificationPixel assembly(unpack)transformfeedbackVertex assemblyVertex operationsPrimitive assemblyTransform pathPixel operationsPrimitive operationsFill/StrokeCoveringPixel packRasterizationreadbackApplicationTexturememoryFragment operationsRaster operationsFill/StrokeStencilingFramebufferDisplay

Key Operations for RenderingPath ObjectsStencil operationonly updates stencil bufferglStencilFillPathNV, glStencilStrokePathNVCover operationglCoverFillPathNV, glCoverStrokePathNVrenders hull polygons guaranteed to “cover” region updated bycorresponding stencilTwo-step rendering paradigmstencil, then cover (StC)Application controls cover stenciling and shading operationsGives application considerable controlNo vertex, tessellation, or geometry shaders active duringstepsWhy? Paths have control points & rasterized regions, not vertices,triangles

Path Rendering Example (2 of 3)InitializationClear the stencil buffer to zero and the color buffer to blackglClearStencil(0);glClearColor(0,0,0,0);glStencilMask(~0);glClear(GL_COLOR_BUFFER_BIT | GL_STENCIL_BUFFER_BIT);Specify the Path's TransformglMatrixIdentityEXT(GL_PROJECTION);glMatrixOrthoEXT(GL_MODELVIEW, 0,200, 0,200, -1,1); // uses DSA!Nothing really specific to path rendering hereDSA = OpenGL’s Direct State Access extension (EXT_direct_state_access)

Path Rendering Example (3 of 3)Render star with non-zero fill styleStencil pathglStencilFillPathNV(pathObj, GL_COUNT_UP_NV, 0x1F);Cover pathglEnable(GL_STENCIL_TEST);glStencilFunc(GL_NOTEQUAL, 0, 0x1F);glStencilOp(GL_KEEP, GL_KEEP, GL_ZERO);glColor3f(0,1,0); // greenglCoverFillPathNV(pathObj, GL_BOUNDING_BOX_NV);Alternative: for even-odd fill styleJust program glStencilFunc differentlyglStencilFunc(GL_NOTEQUAL, 0, 0x1); // alternative masknon-zero fill styleeven-odd fill style

“Stencil, then Cover”Path Fill StencilingSpecify a pathSpecify arbitrary path transformationProjective (4x4) allowedDepth values can be generated fordepth testingSample accessibility determinedAccessibility can be limited by anyor all ofScissor test, depth test, stenciltest, view frustum, user-definedclip planes, sample mask, stipplepattern, and window ownershipWinding number w.r.t. thetransformed path is computedAdded to stencil value ofaccessible samplesstencil fillpath commandper-pathfill regionoperationsper-sampleoperationsFillstencilingspecificpathfront-endprojectivetransformclipping &scissoringwindow, depth& stencil testspath windingnumbercomputationstencilupdate:+, -, or invertpathobjectsampleaccessibilitystencilbuffer

“Stencil, then Cover”Path Fill CoveringSpecify a pathSpecify arbitrary pathtransformationProjective (4x4) allowedDepth values can be generated fordepth testingSample accessibility determinedAccessibility can be limited by anyor all ofScissor test, depth test, stenciltest, view frustum, user-definedclip planes, sample mask, stipplepattern, and window ownershipConservative covering geometryuses stencil to “cover” filled pathDetermined by prior stencil stepcover fillpath commandper-pathfill regionoperationsper-sampleoperationsper-fragment orper-sampleshadingcolorbufferpathfront-endprojectivetransformclipping &scissoringwindow, depth& stencil testsstencilupdatetypically zeroprogrammablepathshadingpathobjectsampleaccessibilitystencilbuffer

Adding Stroking to the StarAfter 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 styleStroke the starStencil pathglStencilStrokePathNV(pathObj, 0x3, 0xF); // stroked samples marked“3”Cover pathglEnable(GL_STENCIL_TEST);glStencilFunc(GL_EQUAL, 3, 0xF); // update if sample marked “3”glStencilOp(GL_KEEP, GL_KEEP, GL_ZERO);glColor3f(1,1,0); // yellowglCoverStrokePathNV(pathObj, GL_BOUNDING_BOX_NV);even-odd fill style

“Stencil, then Cover”Path Stroke StencilingSpecify a pathSpecify arbitrary path transformationProjective (4x4) allowedDepth values can be generated fordepth testingSample accessibility determinedAccessibility can be limited by anyor all ofScissor test, depth test, stenciltest, view frustum, user-definedclip planes, sample mask, stipplepattern, and window ownershipPoint containment w.r.t. the strokedpath is determinedReplace stencil value of containedsamplesstencil strokepath commandper-pathfill regionoperationsper-sampleoperationsStrokestencilingspecificpathfront-endprojectivetransformclipping &scissoringwindow, depth& stencil testsstrokepointcontainmentstencilupdate:replacepathobjectsampleaccessibilitystencilbuffer

“Stencil, then Cover”Path Stroke CoveringSpecify a pathSpecify arbitrary pathtransformationProjective (4x4) allowedDepth values can be generated fordepth testingSample accessibility determinedAccessibility can be limited by anyor all ofScissor test, depth test,stencil test, view frustum,user-defined clip planes,sample mask, stipple pattern,and window ownershipConservative covering geometryuses stencil to “cover” stroked pathDetermined by prior stencil stepcover strokepath commandper-pathfill regionoperationsper-sampleoperationsper-fragment orper-sampleshadingcolorbufferpathfront-endprojectivetransformclipping &scissoringwindow, depth& stencil testsstencilupdatetypically zeroprogrammablepathshadingpathobjectsampleaccessibilitystencilbuffer

First-class, Resolution-independentFont SupportFonts are a standard, first-class part of all path rendering systemsForeign to 3D graphics systems such as OpenGL and Direct3D, but natural forpath renderingBecause letter forms in fonts have outlines defined with pathsTrueType, PostScript, and OpenType fonts all use outlines to specify glyphsNV_path_rendering makes font support easyCan specify a range of path objects withA specified fontSequence or range of Unicode character pointsNo requirement for applications use font API to load glyphsYou can also load glyphs “manually” from your own glyph outlinesFunctionality provides OS portability and meets needs of applicationswith mundane font requirements

Handling Common Path RenderingFunctionality: FilteringGPUs are highly efficient at image filteringFast texture mappingMipmappingAnisotropic filteringWrap modesCPUs aren't really QtMoiréartifacts GPU Cairo

Handling Uncommon Path RenderingFunctionality: ProjectionProjection “just works”Because GPU does everythingwith perspective-correctinterpolation

Projective Path Rendering Support Compared GPUflawless Skiayes, but bugs Cairounsupported Qtunsupportedcorrectcorrectcorrectwrongunsupportedunsupportedunsupportedunsupported

Path Geometric QueriesglIsPointInFillPathNVdetermine if object-space (x,y) position is inside or outside path, givena winding number maskglIsPointInStrokePathNVdetermine if object-space (x,y) position is inside the stroke of a pathaccounts for dash pattern, joins, and capsglGetPathLengthNVreturns approximation of geometric length of a given sub-range of pathsegmentsglPointAlongPathNVreturns the object-space (x,y) position and 2D tangent vector a givenoffset into a specified path objectUseful for “text follows a path”Queries are modeled after OpenVG queries

Accessible Samples of a Transformed PathWhen stenciled or covered, a path is transformed by OpenGL’scurrent modelview-projection matrixAllows for arbitrary 4x4 projective transformMeans (x,y,0,1) object-space coordinate can be transformed to have depthFill or stroke stenciling affects “accessible” samplesA samples is not accessible if any of these apply to the sampleclipped by user-defined or view frustum clip planesdiscarded by the polygon stipple, if enableddiscarded by the pixel ownership testdiscarded by the scissor test, if enableddiscarded by the depth test, if enableddisplaced by the polygon offset from glPathStencilDepthOffsetNVdiscarded by the depth test, if enableddiscarded by the (implicitly enabled) stencil testspecified by glPathStencilFuncNVwhere the read mask is the bitwise AND of the glPathStencilFuncNV readmask and the bit-inversion of the effective mask parameter of the stencilingoperation

Mixing Depth Buffering andPath RenderingPostScript tigers surrounding Utah teapotPlus overlaid TrueType font renderingNo textures involved, no multi-pass

Demo

3D Path Rendering DetailsStencil step usesGLfloat slope = -0.05;GLint bias = -1;glPathStencilDepthOffsetNV(slope, bias);glDepthFunc(GL_LESS);glEnable(GL_DEPTH_TEST);Stenciling step usesglPathCoverDepthFuncNV(GL_ALWAYS);ObservationStencil step is testing—but not writing—depthStencil won’t be updated if stencil step fails depth test at a sampleCover step is writing—but not testing—depthCover step doesn’t need depth test because stencil test would only pass if prior stencilstep’s depth test passedTricky, but neat because minimal mode changes involved

Without glPathStencilDepthOffsetBad Things HappenEach tiger is layered 240 pathsWithout the depth offset during the stencil step, all the—essentially co-planar—layers wouldZ-fight as shown belowterrible z-fighting artifacts

Path Transformation ProcessPathobjectobject-space coordinates(x,y,0,1)color/fog/texcoordinatesObject-spacecolor/fog/texgenerationModelviewmatrixeye-space coordinates(xe,ye,ze,we) + attributescolor/fog/tex coords.Eye-spacecolor/fog/texgenerationUser-definedclip planesclipped eye-space coordinates(xe,ye,ze,we) + attributesProjectionmatrixclip-space coordinates(xc,yc,zc,wc) + attributesView-frustumclip planesclipped clip-spacecoordinates(xc,yc,zc,wc) + attributesto pathstencilingor covering

Clip Planes Work with Path RenderingScene showing a Welsh dragon clipped to all 64 combinations of 6 clip planesenabled & disabled

Path Rendering Works withScissoring and Stippling tooScene showing a tigerscissoring into 9 regionsTiger with two differentpolygon stipple patterns

Rendering Paths Clipped toSome Other Arbitrary PathExample clipping the PostScript tiger to a heart constructed fromtwo cubic Bezier curvesunclipped tigertiger with pink background clipped to heart

Complex Clipping Exampletiger is 240 pathscowboy clip isthe union of 1,366 pathsresult of clipping tigerto the union of all the cowboy paths

Arbitrary Programmable GPU Shading withPath RenderingDuring the “cover” step, you can do arbitrary fragment processingCould beFixed-function fragment processingOpenGL assembly programsCg shaders compiled to assembly with Cg runtimeOpenGL Shading Language (GLSL) shadersYour 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 TextPhrase “Brick wall!” is path rendered and bump mapped with a Cgfragment shaderlight source position

Anti-aliasing DiscussionGood anti-aliasing is a big deal for path renderingParticularly true for font rendering of small point sizesFeatures of glyphs are often on the scale of a pixel or lessNV_path_rendering uses multiple stencil samples per pixel for reasonableantialiasingOtherwise, image quality is poor4 samples/pixel bare minimum8 or 16 samples/pixel is pretty sufficientBut 16 requires expensive 2x2 supersampling of 4x multisampling16x is extremely memory intensiveAlternative: quality vs. performance tradeoffFast enough to render multiple passes to improve qualityApproachesAccumulation bufferAlpha accumulation

Anti-aliasing Strategy BenefitsBenefits from GPU’s existinghardware AA strategiesMultiple color-stencil-depthsamples per pixel4, 8, or 16 samples per pixelRotated grid sub-positionsFast downsampling by GPUAvoids conflating coverage &opacityMaintains distinct color sampleper sample locationCentroid samplingFast enough for temporalschemes>>60 fps means multi-passimproves qualityartifactsGPUrenderedcoverage NOTconflated withopacityCairo, Qt, Skia,and Direct2Drenderedshows darkcracks artifactsdue to conflatingcoverage withopacity, noticebackgroundbleeding

RealFlashScenesame scene, GPU-renderedwithout conflationconflationartifacts abound,rendered by Skiaconflation is aliasing &edge coverage percentsare un-predicable in general;means conflated pixelsflicker when animated slowly

GPU AdvantagesFast, quality filteringMipmapping of gradient color ramps essentially freeIncludes anisotropic filtering (up to 16x)Filtering is post-conversion from sRGBFull access to programmable shadingNo fixed palette of solid color / gradient / pattern brushesBump mapping, shadow mapping, etc.—it’s all available to youBlendingSupports native blending in sRGB color spaceBoth colors converted to linear RGBThen result is converted stored as sRGBFreely mix 3D and path rendering in same framebufferPath rendering buffer can be depth tested against 3DSo can 3D rendering be stenciled against path renderingObviously performance is MUCH better than CPUs

Improved Color Space:sRGB Path RenderingModern GPUs have native support forperceptually-correct forsRGB framebuffer blendingsRGB texture filteringNo reason to tolerate uncorrected linear RGBcolor artifacts!More intuitive for artists to controlNegligible expense for GPU to performsRGB-correct renderingHowever quite expensive for software pathrenderers to perform sRGB renderingNot done in practiceRadial color gradient examplemoving from saturated red to blue linear RGBtransition between saturatedred and saturated blue hasdark purple region sRGBperceptually smoothtransition from saturatedred to saturated blue

Trying Out NV_path_renderingOperating system support2000, XP, Vista, Windows 7, Linux, FreeBSD, and SolarisUnfortunately no Mac supportGPU supportGeForce 8 and up (Tesla and beyond)Most efficient on Fermi and Kepler GPUsCurrent performance can be expected to improveShipping since NVIDIA’s Release 275 driversAvailable since summer 2011New Release 300 drivers have remarkable NV_path_rendering performanceTry it, you’ll like it

Learning NV_path_renderingWhite paper + source code available“Getting Started with NV_path_rendering”ExplainsPath specification“Stencil, then Cover” API usageInstanced rendering for text and glyphs

NV_path_rendering SDK ExamplesA set of NV_path_rendering examples of varying levels of complexityMost involved example is an accelerated SVG viewerNot a complete SVG implementationCompiles on Windows and LinuxStandard makefiles for LinuxUse 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 exampleof path filling & strokingpr_hello_world—kerned, underlined,stroked, and linear gradient filled textpr_welsh_dragon—filled layerspr_gradient—path with holes with texture applied

SDK Example Walkthrough (2)pr_font_file—loading glyphs from a font filewith the GL_FONT_FILE_NV targetpr_korean—rendering UTF-8 string of Koreacharacterspr_shaders—use Cg shadersto bump map text withbrick-wall texture

SDK Example Walkthrough (3)pr_text_wheel—render projected gradienttext as spokes of a wheelpr_tiger—classic PostScript tiger renderedas filled & stroked path layerspr_warp_tiger—warp the tigerwith a free projective transformclick & drag the bounding rectanglecorners to change the projection

SDK Example Walkthrough (4)pr_tiger3d—multiple projected and depth testedtigers + 3D teapot + overlaid textpr_svg—GPU-accelerated SVG viewerpr_pick—test points to determine if theyare in the filled and/or stroked region of acomplex path

ConclusionsGPU-acceleration of 2D resolution-independent graphics is comingHTML 5 and low-power requirementsare demanding it“Stencil, then Cover” approachVery fastQuality, functionality, and featuresAvailable today through NV_path_renderingShipping todayNV_path_rendering resources available

Questions?

More InformationBest drivers: OpenGL 4.3 beta driverwww.nvidia.com/driversGrab the latest Beta drivers for your OS & GPUDeveloper resourceshttp://developer.nvidia.com/nv-path-renderingWhitepapers, FAQ, specificationNVprSDK—software development kitNVprDEMOs—pre-compiled Windows demosOpenGL Extension Wrangler (GLEW) has API supportEmail: nvpr-support@nvidia.com

Don’t Forget the 20 th Anniversary PartyDate: August 8th 2012 ( today! )Location: JW Marriott Los Angeles at LA LiveVenue: Gold Ballroom – Salon 1

Other OpenGL-relatedNVIDIA Sessions at SIGGRAPHGPU Ray Tracing and OptiXWednesday in West Hall 503, 3:50 PM - 4:50 PMDavid McAllister, OptiX Manager, NVIDIAPhillip Miller, Director, Workstation Software Product Management, NVIDIAVoxel Cone Tracing & Sparse Voxel Octree for Real-time Global IlluminationWednesday in NVIDIA Booth, 3:50 PM - 4:50 PMCyril Crassin, Postdoctoral Research Scientist, NVIDIA ResearchOpenSubdiv: High Performance GPU Subdivision Surface DrawingThursday in NVIDIA Booth, 10:00 AM - 10:30 AMPixar Animation Studios GPU Team, PixarnvFX : A New Scene & Material Effect Framework for OpenGL and DirectXThursday in NVIDIA Booth, 2:00 PM - 2:30 PMTristan Lorach, Developer Relations Senior Engineer, NVIDIA