» Rendering overview
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

Rendering overview


Basic structure

In most situations when you render something you have basically the same patch structure:

  1. some primitives (like the Quad (DX9) ) or meshes with their effects (like the Sphere (EX9.Geometry) and PhongDirectional (EX9.Effect) )
  2. are placed using the Transformation nodes (like the Translate (Transform) or UniformScale (Transform) )
  3. grouped together
  4. and rendered to a window.

Working with a 3d scene? You need a Depthbuffer.

Seeing jagged and ugly edges? Turn on Antialiasing.

Want to set a renderer to fullscreen?

  • move it to the desired monitor
  • change its Fullscreen Dimensions using the Inspektor
  • press ALT+Enter to toggle it to/from fullscreen

See the Renderer (EX9)'s helppatch for details.

Examples in your vvvv\girlpower\ directory:

  • Graphics\DX9\Geometry
  • Graphics\DX9\Shader

See also:


The same scene but rendered from another point of view. Note the Camera (Transform Softimage) connected to the Renderer.

There are some cameras in vvvv ready to use:
Check their helppatches.

See also:


And now the objects are spreaded.
There are 12 spheres whose spreaded in a circle by the CircularSpread (Spreads).
And 16 quads arranged in a line by the LinearSpread (Spreads).

See also:

Aspect Ratio

The Aspect Ratio transformation on the Renderer (hidden by default) is used to sqeeze/stretch the coordinate system of the renderer so that the proportions of the window have no effect on the image.

The coordinate system of the Renderer is stretched vertically as a countermeasure to its horizontally stretched window.

Check the helppatch of the AspectRatio (Transform).

See also:


An image is applied to the effect via its Texture. Primitives like Quad (DX9) have the 'Texture' pin as well.

See also:


Related nodes

Renderer (EX9)
ZWriteEnable (EX9.RenderState)
AlphaTest (EX9.Renderstate)
Cull (EX9.Renderstate)

A Depthbuffer stores the depth information of the scene, ie. a single z-value per pixel.

If depth buffering is off (which is the default) objects (and their faces) are just drawn in the order of their priority and their slice index - which looks weird as soon as they are seen in the wrong order.

Turn on depth buffering by selecting the Renderer (EX9) in an Inspektor. There you'll see a "Windowed Depthbuffer" and a "Fullscreen Depthbuffer" pin. Change their default "None" values to D16, D24 (or similar, where 16 or 24 denote the number of bits available for the depth buffer). Typically choose D24X8.

The classic name for drawing without the depth-buffer is painters algorithm: start with the things in the background and then paint all things after another on top of it.

Using the depthbuffer enables a test which is done for each pixel drawn: if a pixel nearer to the camera was already drawn, the new pixel gets rejected. Or to put it the other way round: If the current object to be drawn is nearer to the camera than the stuff already drawn, the object is just drawn on top of the existing color buffer.

See also:


Antialiasing at Mathworld
Antialiasing at Wikipedia

Rotated or curved objects always look jagged if Antialiasing is turned off (which is the default). That's because pixels are squares and there are (still) not so many of them to represent curves or diagonals in a way that the eye will not notice squares.

Use the 'Fullscreen / Windowed Antialiasing Quality' settings of the Renderer (DX9) to specify the desired quality. Usually a value of 4 is a good choice.

This setting is available via Inspektor.

anonymous user login


~7h ago

david: vvvv meetup 3. new stream link. again youtube made us nuts.. please send everybody to https://youtu.be/pa3HRQ7kj6w

~11h ago

joreg: Reminder: Join us this evening, 8pm CET for the 3rd worldwide #vvvv meetup: 3.-worldwide-vvvv-meetup

~17h ago

sinus: @evvvvil: very impressive stuff! keep on marching the rays!You´ll never walk alone!

~1d ago

evvvvil: @mediadog, thankx for pointing it out broski. Wicked.

~3d ago

domj: Catching up with the Midweek Patch Therapy excerpts, expect more videos over the week. https://youtu.be/36r8LnHaS7g

~3d ago

mediadog: @evvvvil hey you made the webgl-dev-list cool stuff list: http://gfxprose.blogspot.com/2020/05/cool-webgl-stuff-2020-05-21.html

~4d ago

evvvvil: Yo I'm live doing a VJ set made in vvvv for OUTLINE demoparty with OddJohn DJing! Come see us play here: https://www.twitch.tv/outlinedemoparty/

~6d ago

domj: A blast to read with great references. Thoughts on how to make programming more learnable and understandable. http://worrydream.com/LearnableProgramming/

~6d ago

gegenlicht: @evvvvil damn. - missed it. Such unique styles, others would create 1000 twitter loops from one of ur sessions. :3 #bobrossmarch

~6d ago

sebescudie: Vous voulez vous mettre à #vvvv ou vous connaissez quelqu'un qui aimerait? Je donne un webinaire en français! https://nodeforum.org/announcements/introduction-au-creative-coding-avec-vvvv-gamma/