NVPR Basic Path Rendering Sample

Category: Visuals

Min PC GPU: GeForce Fermi-class

Min Tegra Device: Tegra K1

@ GitHub: NVPR Basic Path Rendering Sample Source Code

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 Graphics 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	Esc	Quit the application
	Tab	Toggle TweakBar visibility
gamepad	Start	Toggle TweakBar visibility
	A	Show TweakBar, Toggle Focused Item
	B	Close Focused UI, Hide TweakBar
	DPAD Up/Down	Move Focus to Prev/Next Item
	DPAD Left/Right	Decrease/Increase Focused Item

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