Navigation

Ventuz Introduction

  • Introduction
  • Getting Started
  • Ventuz Editions
  • Ventuz Products
  • Realtime Rendering
  • Frequently Asked Questions
  • Common Mistakes
  • Deploying a Ventuz Presentation
  • Scene Performance and Tweaks

Quick Guides

  • Quick Guide Index
  • Business Logic
  • 3D Art
  • 2D Art
  • Programming
  • System Engineer

General

  • Index
  • What's New
  • Ventuz System Requirements
  • Communication Protocol Overview
  • Configuration Editor
  • Audio / Video Configuration
  • Machine Configuration
  • Web Configuration Editor and License Manager
  • GPI Configuration for Runtime or Director
  • Supported Formats
  • Supported Hardware
  • Multisampling / Anti-Aliasing
  • Input Subsystem
  • Ventuz Proprietary Files
  • Migrating Content to Ventuz 6
  • Migrating Content to Ventuz 5
  • Summary Shortcuts
  • Terminology
  • Manual Index

Ventuz Designer

  • Designer Indices
Introduction
  • Designer Introduction Index
  • Designer Overview
  • Realtime Rendering
  • Project Browser
  • Designer Interface
  • Designer Options
  • Working with Nodes
  • Hierarchy and Content Editors
  • 2D Workflow
  • 3D Workflow
  • Animation Workflow
  • Best Practices
  • Reading Data in Ventuz
  • Display Images and Movies
  • Scene Performance and Tweaks
  • Deploying a Ventuz Presentation
  • Render to Disk
User Interface
  • Designer User Interface Index
  • Designer Interface
  • Renderer Window
  • Layer Editor
  • Property Editor
  • Property Groups
  • Hierarchy Editor
  • Content Editor
  • Find and Replace
  • Toolbox
  • Animation Editor
  • Shader Editor
  • Text Editor
  • Message View
  • Scene Tree
  • Stage Editor
  • Container Outline
  • Watches Editor
  • Performance Statistics
2D Workflow
  • 2D Workflow Index
  • 2D Workflow
  • Layer Editor
  • Common Layer Properties
  • IPP Effects
  • Color Correction FX
  • Distortion FX
  • Filter FX
  • Hierarchy and Content Editors
  • Display Images and Movies
3D Workflow
  • 3D Workflow Index
  • 3D Workflow
  • Hierarchy and Content Editors
  • Renderer Window
  • Camera Navigation
  • Manipulate Objects with Gizmos
  • Layer Editor
  • Property Editor
  • Hierarchy Editor
  • Working with Nodes
  • Isolated Objects
  • Containers
  • Text Rendering
  • Character Sets
  • Geometry Import
  • Display Images and Movies
  • Particle System
  • Creating Realistic Reflections
  • Unreal Integration
  • Notch Integration
  • E2E Node Overview
Logic Workflow
  • Logic Workflow Index
  • Hierarchy and Content Editors
  • Content Editor
  • Hierarchy Editor
  • Working with Nodes
  • Property Editor
  • Containers
  • Project and Scene Data
  • Reading Data in Ventuz
  • Display Images and Movies
  • Input Subsystem
  • Multitouch
  • TUIO Protocol
  • Open Sound Control
  • Unreal Integration
  • Notch Integration
  • E2E Node Overview
Animation Workflow
  • Animation Workflow Index
  • Animation Workflow
  • Animation Editor
  • Content Editor
  • Hierarchy Editor
  • Property Editor
  • Animation and State Engine
  • Templates
  • Template Engine
  • Unreal Integration
  • Notch Integration
Project Structure
  • Project Structure Index
  • Annotations
  • Projects and Scenes
  • Project Properties
  • Project Maintenance
  • Project and Scene Data
  • Scene Management
  • Scene Statistics
  • Scene Tree
  • Performance Statistics
How Tos
  • Designer How to Index
  • How to Run Ventuz
  • How to Work with Designer
  • Ventuz Designer Drag&Drop Workflow
  • How to work with Shadows
  • How to Build Content for Multiple Screens
  • How to Use Emoijs
  • How to Build a Template
  • How to Use the Color Difference Keyer
  • How To Use the HDR Engine
  • How Create Lens Flares and Bloom
  • How to Create Visuals Loader Node
  • How to Remote Control with a Phone
  • How to use Head Mounted Displays
  • How to work with 3D Reference Layers
  • How to create a Firework Particle System
  • How to use DDS with new Block Compression modes
  • How to use the Substance Integration
  • How To Integrate Unreal
  • How To Integrate Notch
  • How To use the Vertex Integration
  • How To Control and Customize Ventuz
Reference
  • Available Nodes
  • Animation Nodes
  • Material&Color Nodes
  • Data Nodes
  • E2E Nodes
  • Geometry Nodes
  • Interaction Nodes
  • IO Nodes
  • Layers
  • Light Nodes
  • Logic Nodes
  • Render Option Nodes
  • Slides Nodes
  • Sound Nodes
  • Text Nodes
  • Texture Nodes
  • VR Nodes
  • World Nodes
  • Summary Shortcuts
  • Layer Editor Shortcuts
  • Hierarchy Editor Shortcuts
  • Content Editor Shortcuts
  • Animation Editor Shortcuts
  • Director Shortcuts

Ventuz Director

  • Index
  • Introduction
  • Environment
  • Show
  • User Interface
  • Assets
  • Taking Action
  • Property Editor
  • Shot Box
  • Project Data
  • Pages
  • Playlist
  • Timeline
  • Content References
  • Topology
  • Channels
  • Macros
  • Designing Templates
  • Plug-Ins
  • Shortcuts
  • Command Line Options
  • Application Settings
  • Glossary
  • GPI Configuration

Ventuz Runtime & Configuration

  • Runtime Index
  • Configuration Configuration Editor
  • Machine Configuration
  • Video/Audio Configuration
  • Web Configuration Editor and License Manager
  • Render Setup Editor
  • Warping and Soft-Edging Editor
  • Machine Clustering
  • Supported Hardware
  • Director Mode
  • Runtime How Tos Index
  • How to Configure Audio
  • How to Use Live Options
  • How To Play Out On Multiple Screens
  • How To Render on a Machine Cluster
  • How to Use Head Mounted Displays
  • How to Setup Spout with Ventuz
  • How to Use Newtek NDI
  • How to Use a Mixed Frame Rate Cluster
  • How to Use Tracking

How To

Designer
  • Designer How to Index
  • How to Run Ventuz
  • How to Work with Designer
  • Ventuz Designer Drag&Drop Workflow
  • How to work with Shadows
  • How to Build Content for Multiple Screens
  • How to Use Emoijs
  • How to Build a Template
  • How to Use the Color Difference Keyer
  • How To Use the HDR Engine
  • How Create Lens Flares and Bloom
  • How to Create Visuals Loader Node
  • How to Remote Control with a Phone
  • How to use Head Mounted Displays
  • How to work with 3D Reference Layers
  • How to create a Firework Particle System
  • How to use DDS with new Block Compression modes
  • How to use the Substance Integration
  • How To Integrate Unreal
  • How To Integrate Notch
  • How To build and playback Ventuz Content in Vertex
Runtime & Configuration
  • Runtime How Tos Index
  • How to Configure Audio
  • How to Use Live Options
  • How To Play Out On Multiple Screens
  • How To Render on a Machine Cluster
  • How to use Head Mounted Displays
  • How to setup Spout with Ventuz
  • How to use Newtek NDI
  • How to use a Mixed Frame Rate Cluster
  • How to use Tracking
  • How To Integrate Unreal
  • How To Integrate Notch
  • How To build and playback Ventuz Content in Vertex
Director
  • How To Control Multiple Graphics Independently From Each Other
  • How to use the Companion with Director

Ventuz Node Reference

ANIMATION
  • Mover
  • Alternator
  • Simple Control
  • Timeline Control
  • Anmation Rig
  • Keyframe Animation
  • Animation Group
COLOR/MATERIAL
  • Alpha
  • Fog
  • Ground Fog
  • Sky Box
  • Color to RGBA
  • HSLA to Color
  • RGBA to Color
  • Color Transformer
  • HLSL Shader
  • Color
  • Material
  • Color Picker
  • Substance Material
DATA
  • Database
  • Excel
  • JSON
  • RSS Feed
  • Resource Linker
  • Text File
  • XML
E2E
  • E2E Axis
  • E2E Data
  • E2E Control
  • E2E Layer
  • E2E Provider
  • E2E Node Overview
GEOMETRY
  • Rectangle
  • Rounded Rectangle
  • Gradient Rectangle
  • Overlay Rectangle
  • Cube
  • Circle
  • Sphere
  • Cylinder
  • Cone
  • Torus
  • Chart
  • Random Points
  • Mesh Loader
  • Geometry Import (Live)
  • Volume
  • Get Bounding Box
  • Arrow
  • Particle System
  • Path Renderer
  • Geometry Renderer
INTERACTION
  • Interaction Rect
  • Touch Button
  • Touch Excluder
  • Touch Marker
  • Touch Paint
  • Touch Pattern
  • Touch Proxy
  • Touch Ripples
  • Touch Transformations
  • Web Browser
  • Touch Teleport
  • Touch Simulator
INPUT/OUTPUT (I/O)
  • GPI
  • Joystick
  • Keyboard
  • MIDI
  • Mouse
  • Network
  • Open Sound Control
  • Serial
  • Timecode
  • DMX
  • HTTP
  • RamDiskWriter
LAYER
  • 3D Layers
  • 3D Layer Reference
  • 2D Layers
  • PSD Import Layer
  • E2E Layer
  • Others
LIGHT
  • Light Sources
LOGIC
  • Array Processing
  • Convert To Text
  • Cluster Synchronization
  • Counter
  • Date Time
  • Directory
  • Dispatcher
  • Enumeration
  • Expressions
  • Invert
  • Log
  • Loop Breaker
  • Math Effects
  • Matrix Operations
  • Scene Event
  • Script
  • String Operations
  • System ID
  • Text Splitter
  • Timer
  • Toggle
  • URL
  • Value Switch
  • Value Buffer
  • Variables
  • Visual Indexer
RENDER OPTIONS
  • Alpha Blending
  • Color Write
  • Alpha Testing
  • Clip Plane
  • Filter
  • Mask
  • Mirror
  • Effect
  • Render Cube Map
  • Draw Modes
  • Stencil
  • ZTesting
SOUND
  • Audio Clip
  • Sound
  • Volume Control
  • Audio Analysis
SLIDES
  • Slide Manager
  • Slide
  • Slide Port
  • Pivot
TEXT
  • Text Effects
  • Text Layouts
  • Text Rendering
TEXTURE
  • Background
  • Hatch
  • Image
  • Texture
  • SVG Loader
  • Gradient Texture
  • Live Video
  • Movie Stream
  • Movie Frame
  • Movie Clip
  • Texture Loader
  • Snapshot
  • Snapshot Framebuffer
  • Texture Saver
  • Video Source Selector
  • VIO Input
  • Spout Receiver
  • NDI Receiver
  • Substance Loader
  • QR Code
VR/AR
  • Tracked Devices
  • Draw Tracked Devices
WORLD
  • Axis
  • Billboard
  • GetWorld
  • SetWorld
  • Arrange
  • Ticker
  • Layout
  • Group
  • World Z Sort
  • YesNo
  • Switch
  • Spread
  • Filter Pass
  • Set Pass
  • Hierarchy Container
  • Scene Port
  • Content Container
  • Template Port
  • Container Info
  • Camera
  • Paths

Advanced and Development

  • Advanced and Development Index
  • Command Line Options
  • Ventuz IP Ports
  • Ventuz Machine Service
  • TUIO
  • .NET Scripting
  • HLSL Shader Programming
  • Ventuz API and SDK
  • Ventuz Extension API
  • Ventuz VIO API
  • Ventuz File Format (VFF)
  • Ventuz Stream Out API
  • Lens Calibration File for FreeD
  • E2E Node Overview
  • Unreal Integration
  • Notch Integration
Remoting
  • Remoting Index
  • Remoting Overview
  • How To Control and Customize Ventuz
  • Remoting 4
  • Remoting 4 via Websockets
  • Remoting 4 via HTTP
  • Director Remoting
  • Deprecated Remoting
  • Remoting Machine Signature

Misc

  • Presets
« Previous:
» Index «
Next: »

Web Browser

Table of Contents

  1. Usage and Interaction
  2. Input
    1. Multitouch ´
    2. Mouse
  3. Browser Functionality
    1. Browser Cache
    2. Disable Security
  4. Progress and Status
    1. Content
    2. Cursor
  5. JavaScript
    1. Methods/Events
    2. Execute On Load
    3. Transparent Background
  6. Limitations

Web Browser An interactive Internet browser that can be used to render HTML or browse the web.

The Web Browser node renders web pages into a texture so their content can be used inside a Ventuz scene. Since Ventuz 5.3 this is done based on the ​Chromium Embedded Framework CEF.

The Web Browser node implements not just the rendering but also the rest of the functionality expected from a browser. Mouse, touch and keyboard input can be used to navigate and interact with the shown content and a navigation history can be used to go back to previously visited pages.

Usage and Interaction

Use the Web Browser node on your own risk! CEF is an open source project which has a code base that exceeds the code base of Ventuz by far! In nearly all cases it is not possible for us to fix problems in CEF. We try to update the CEF version in Ventuz regularly but cannot keep up with the speed of CEF development!

By default, the Web Browser node will take a URL and render its content onto a texture. As an alternative, the NavigationMode property can be changed from URL to HTML to render the content specified in the HTML property. In both cases, the resulting texture is provided by the Texture output property and can be used the same way as any other texture in Ventuz. The resolution of the texture (which is also used as the virtual window resolution passed to the browser layout engine) can be specified with the WebBrowserHeight and WebBrowserWidth properties. If both are zero, the size of the Renderer Window will be used instead. WebBrowserAutoMipMap autogenerates mipmaps for improved rendering quality. However, this may cost some performance and is not supported by all graphics cards. Zoom can be set to a percentage between 10% to 500% to influence the layout (i.e. change the font size, ...).

With the Mute Audio property you can mute single browser nodes.

Just like the other interaction nodes, the Web Browser node has an implicit behavior which causes the node to actually use the texture instead of just generating it. If the ScreenAligned property is set, the Web Browser node will render the texture as a 2D full-screen overlay. When it is deactivated, the node will instead act similar to a Texture Node, activate the texture in the render engine and thus cause subsequent geometries to be rendered using this texture. The implicit behavior can be disabled altogether by deactivating the BehaviorApply property.

Similar to the Touch Paint node, the ScreenAligned property will also influence how mouse/touch input is mapped to the browser window. In the screen-aligned mode, the browser output directly matches the renderer window so the touch coordinates are directly mapped to the virtual browser window. When used in the object-mode (= non screen-aligned), both the geometry under the Web Browser node and the orientation of the world space at the Web Browser node become relevant:

Regardless of the actual geometry, the node will calculate the intersection point between a ray from the camera position through the touch position and the X/Y-plane at the hierarchy position of the browser node. To be more precise, the point -0.5/0.5/0.0 will be mapped to the upper left corner and the point 0.5/-0.5/0.0 to the lower left corner of the virtual browser window. This exactly matches the geometry of a Rectangle node with its default parameters.

If the Rectangle needs to be transformed, an appropriate Axis should be inserted in front of the Web Browser node so that both the interaction node and the geometry are transformed consistently

Input

The Web Browser Node accepts Keyboard, Mouse and Touch input to interact with the rendered content.

Multitouch ´

The Ventuz Multi Touch subsystem directly injects the touch information into the browser and therefore the browser can easily handle pages supporting multitouch.

​Chromium Embedded Framework CEF can handle maximum 16 inputs per browser.

Mouse

The position of the mouse cursor and state of the left mouse button are actually transmitted to the Web Browser node as a virtual touch to ensure consistent behavior between mouse and touch input. When LocalMouse is enabled, the browser will receive additional mouse information (such as mouse wheel movement) which a touch cannot represent. Since this information is independent of the MultiTouch subsystem, it will be transmitted to all browser instances that have the LocalMouse property enabled.

Local mouse information is not transmitted via the Ventuz Input Subsystem to other Ventuz machines in the same network cluster.

If ControlEnabled is set to false, all input will be ignored. There is however an additional mechanism to simulate keyboard input that is not affected by this property. The InjectChar method accepts an integer value which is translated to a unicode character. When the method is invoked, the browser reacts as if this key would have been inserted via the hardware keyboard. Note that this is not the same as pressing a hardware key. For example, to generate the letter â on a German keyboard takes two key presses, first the ^ key and then the a key. In order to support more languages, the inject method accepts a character and not a key press. There are however a number of special character codes supported:

Code Description
13 Return
9 Tab
8 Backspace
127 Delete
27 Escape

To pass an integer value as part of the method invocation, either the output event of a Script node or an Event node has to be used. For the latter, the value can be specified in its Argument property.

The Property Editor accepts hexadecimal numbers if they are entered with a leading "0x" or "#"

The unicode values for the most commonly used characters can be found ​here and ​here. Additional information on other character sets can be found ​here.

Browser Functionality

A dedicated browser application implements a number of functions via its menu bar. Since those won't be part of the rendered output content, Ventuz provides them as input methods:

  • Load: Load the URL/HTML specified in the NavigationURL or NavigationHTML respectively.
  • Reload: Reloads the current content (same as pressing F5/Refresh in a dedicated browser application).
  • Stop: Stops/interrupt the current loading process.
  • Forward: Go one page forward in the navigation history.
  • Backward: Go page backward in the navigation history.

The methods Cut, Copy, Paste, SelectAll represent the familiar editing functionality that is usually found in the menu bar of an application. When invoked, they will copy from or copy to the default windows clip board same as a dedicated browser application would do.

Browser Cache

All Browser instances are using the following location to cache files

%TMP%\Ventuz

With the property Cached disabled no files are written or read from the cache.

Disable Security

With the start of version 6.9 the Disable Security property is deprecated and will be removed in the future. When activating it you will get a pop up notification saying that this is moved to the machine configuration. The reason for this is that with the new ​Chromium Embedded Framework CEF update this has to be set globally and can not be managed per node anmyore. So we had to move it inside the Machine Configuration. There in the *Multi Touch* and Remoting 4 category under the extended tab you will find the Web Browser Settings.

Here you can now disable the Web Security.

Only Disable the Web Security when you know what you are doing. This can open the door for malicious software to enter your PC as well as many other problems. So use with caution!

Progress and Status

When loading a new page, the browser has to fetch resources (e.g. images, ... ) and layout the HTML content. While the browser is busy processing the content, the Loading flag is true. Once layouting is done, the Finished event is fired. To prevent the user from seeing the page building up, the Paused property can be activated which will block the browser from updating its texture. Any processing that is running on the webpage (for example a Flash animation) and any interaction (mouse, keyboard, ...) continues to work same as before. Once Finished is triggered, deactivate the Paused property to present the completed result to the user.

Due to the complexity of a browser layout engine and many ill-formatted HTML sites on the internet, it is to be expected that the browser will crash at one point or the other. If the complete browser has crashed, the Crashed event is fired. If just one of the plug-ins has crashed but the browser is still operational, the PluginCrashed event is fired instead. Call Recover to create a new instance of the browser. The web browser does not recover automatically from a crash, because this could end up in an infinite recovery loop. The user should decide when (and if at all) to recover a crashed web browser.

Content

  • CurrentURL: The URL of the currently displayed HTML page.
  • TargetURL: If the cursor hovers over a link, this provides the URL the link leads to.
  • Title: The title of the currently displayed HTML page.
  • Tooltip: If the content contains a tooltip for the current position of the cursor, it will be provided in this property.

Cursor

The Cursor property indicates the current (mouse) cursor shape suggested by the current touch position. If the cursor output property is bound to a numerical input its value is interpreted as shown below here:

Value Name Value Name Value Name Value Name
0 Pointer (default)
1 Cross 2 Hand 3 Ibeam 4 Wait
5 Help 6 EastResize 7 NorthResize 8 NortheastResize
9 NorthwestResize 10 SouthResize 11 SoutheastResize 12 SouthwestResize
13 WestResize 14 NorthSouthResize 15 EastWestResize 16 NortheastSouthwestResize
17 NorthwestSoutheastResize 18 ColumnResize 19 RowResize 20 MiddlePanning
21 EastPanning 22 NorthPanning 23 NortheastPanning 24 NorthwestPanning
25 SouthPanning 26 SoutheastPanning 27 SouthwestPanning 28 WestPanning
29 Move 30 VerticalText 31 Cell 32 ContextMenu
33 Alias 34 Progress 35 NoDrop 36 Copy
37 None 38 NotAllowed 39 ZoomIn 40 ZoomOut
41 Custom

JavaScript

The Web Browser node supports the ​JavaScript scripting language both as part of the content as well as a means of interaction between Ventuz and the site content. This is done by defining input/output properties, methods and events in the Custom Model editor at the bottom of the Property Editor.

Java Script functions alert and window.prompt as well any other popup windows are not supported!

Methods/Events

Ventuz methods defined on the custom model trigger a global JavaScript method of the same name. The event can have an optional integer argument that is passed as input parameter to the JavaScript function. This is usually done by binding an Event node to the method on the Web Browser node and setting the Event nodes Argument property to the desired value.

Ventuz events can be triggered inside the JavaScript by calling a function of the same name on the global ventuz object. Events also support an optional integer argument.

The following example calculates the square root of the argument passed to the Ventuz Custom Model method CalculateSquare, prints it to the HTML content and then triggers the Ventuz Custom Model event with the result as an argument:

<html>
<head>
<title>Method Test</title>
</head>
<body>
<script type="text/javascript">
function CalculateSquare() {
  var result = ventuz.value * ventuz.value;
  document.write("The square of " + ventuz.value + " is " + result + "<br>");
  ventuz.Result(result);
}
</script>
</body>
</html>

Execute On Load

The property WebBrowserJavaScript can optionally contain a ​JavaScript snippet that is injected and executed on every loaded page. This opens many possibilities to operate on external pages.

Example 1:

document.body.style["background-color"] = "Red";

This code sets the background of every loaded page to Red.

Example 2:

UP = function() { window.scrollBy(0,-5); }
DW = function() { window.scrollBy(0,5); }

Creates two methods called UP and DW in the Custom Model to invoke the defined JS functions. The displayed window will scroll up/down when Ventuz invokes these methods. (See also function ​scrollBy())

Transparent Background

This Option will let you make the Background of a Website transparent.

Updating Ventuz output properties from inside JavaScript code can be very slow! Use with care. You will also need to add the corresponding JavaScript code.

document.body.style["background-color"] = "Transparent";

WebBrowser Settings(Ad Blocker, Audio etc.)

The Web Browser Node has some internal settings to adjust its compatibility with certain web sites and networking behavior inside the Ventuz Machine Configuration.

Disable PluginPlugins (like Adobe Flash) are disabled.
Disable Java ScriptExecution of Java Script code is disabled.
Disable SecurityDisables all security checks inside the Web Browser. Use with Caution!
Allow ClearTypeDisables/enables ​Clear Type. Monochrome scaled text with Clear Type enabled result in colorful edges.
Allow ventuz:// from external sitesAllows you to reference assets inside a Ventuz Project
Ignore SSL certification errorsExecution of Java Script code is disabled.
AudioAllows you to configure the In and Out Ventuz Ordinals and global browser Volume. Also check the crosspoint section in the Audio Video Config for further information.
LanguageThe Language of the browser. Some web sites may recognize this language and display content in that culture. If left blank, the system language (culture) is used.
Proxy ServerIf no direct internet access is available proxy servers for all protocols can be configured here.
User AgentSome web sites (like Facebook.com) expect special keys in the user-agent string. The user agent string can be manually adjusted here. See ​http://www.user-agents.org/index.shtml
Content Block List Downloads a filter lists that automatically remove unwanted content from the internet, including annoying adverts and bothersome banners

Limitations

As with any technology as complex as a web browser, there are certain limitations one has to be aware of.

  • The maximum resolution of the web browser is 4096 x 4096 pixel.
  • A touch is immediately claimed by the Web Browser, so a combination of Touch Translation node with the Web Browser node is not possible.
  • User login prompts and other popup windows are not supported.

See also:
  • Multi Touch
  • Ventuz Input Subsystem
  • ​JavaScript

« Previous:
» Index «
Next: »
Copyright 2022 Ventuz Technology