Path Rendering Sample

Category: Visuals

Min PC GPU: Fermi-based (GTX 4xx)

Min Tegra Device: Tegra K1

Description

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

NV_path_rendering

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:

Cubic curves
Quadratic curves
Lines
Fonts/glyphs
Arcs
Dash and Endcap Style

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);