Path Rendering Sample

Category:  Visuals
Min PC GPU: Fermi-based (GTX 4xx)
Min Tegra Device: Tegra K1


This sample uses NVIDIA's Path Rendering extensions to demonstrate rendering stroked and filled 2D line-art, such as you would implement with Skia, SVG, or HTML Canvas, fully leveraging the power and speed of OpenGL hardware.

APIs Used

Shared User Interface

The OpenGL samples all share a common app framework and certain user interface elements, centered around the "Tweakbar" panel on the left side of the screen, which lets you interactively control certain variables in each sample.

To show and hide the Tweakbar, simply click or touch the triangular button positioned in the top-left of the view.

Other controls are listed below.

Device Input Result
touch 2-Finger Drag Translate the view
2-Finger Pinch Scale the view
mouse Left-Click Drag Translate the view
Right-Click Drag Scale the view (up:out, down:in)
keyboard Escape Quit the application
  Tab Toggle Tweakbar visibility
gamepad Start Toggle Tweakbar visibility

App-Specific Controls

This sample has the following app-specific controls:

Device Input Result
keyboard P Cycle Path Definition Modes
F Toggle Fill Paths
S Toggle Stroke Paths
E Toggle Even-Odd Fill
D Toggle Dashed Lines
gamepad DPAD Left/Right Cycle Path Definition Modes
Left Shoulder Button Toggle Path Fill
Right Shoulder Button Toggle Path Stroke
X Toggle Even-Odd Fill
Y Toggle Dashed Lines

Technical Details

Path rendering is a new OpenGL extension that is focused on rendering a sequence of resolution-independent outlines, known as paths, which can be filled or stroked. Such paths can be painted with constant colors, linear or radial gradients, images, even arbitrary fragment shaders (i.e., bump-mapping).

Unlike bitmap images, path rendering content can be arbitrarily zoomed and rescaled without pixelized results. Path rendering contents are also easy to edit and animate because an artist can manipulate or edit the underlying paths that make up the scene instead of having to manipulate individual pixels. For this reason and many other advantages, path rendering powers important 2D graphics standards such as Skia, PostScript, PDF, Scalable Vector Graphics (SVG), Adobe Flash, TrueType font rendering, HTML 5 Canvas, and more.

This sample shows the most basic attributes of the path rendering APIs, focused on path fill and stroke commands. It shows three different forms of specifying path data, and minor styling ability.

Path Rendering supports the following primitives:

Rendering Process

At a basic level, coding of path rendering support might look like the following:

					//Compile an SVG path 
					glPathStringNV( pathObj, GL_PATH_FORMAT_SVG_NV, 
					strlen(svgPathString), svgPathString); 
					//Fill a stencil of the path 
					glStencilFillPathNV( pathObj, GL_COUNT_UP_NV, 0x1F); 
					//Configure stencil testing 
					//... as appropriate.
					//Cover the stencil 
					glCoverFillPathNV( pathObj, GL_BOUNDING_BOX_NV); 

See Also



NVIDIA® GameWorks™ Documentation Rev. 1.0.200601 ©2014-2020. NVIDIA Corporation. All Rights Reserved.