CEF documentation

The CEF module (Chromium Embedded Framework) allows to render websites to texture as well as handling signals from point and click devices and keyboard input. This is useful to create 2D UIs, either for HUD elements or on a geometry as part of the virtual scene.

The easiest method is to use a VR.Sprite as shown in the Websockets.xml example:

import VR

s = VR.Sprite('site')
s.webOpen('http://google.com', 1200, 1)
VR.find('light').addChild(s)

The first parameter is the URI to open. The second parameter is the texture resolution and the last parameter the aspect ratio of the sprite.

The next step is to write your own UI as a website and open it on the sprite. Add a new script and name it 'site'. Then replace the google URL with:

s.webOpen('http://localhost:5500/site', 800, 1)

Change the script type to website and write a minimal valid HTML to see it appear on the sprite. On any change to your HTML code the site gets reloaded directly on the sprite.

The next step is to set up the communication between the websites' javascript and your PolyVR python scritps. To achieve this you need to set up a websocket in your website and add a Python script to handle the incomming messages. Check out the script templates, hudInit, hudSite and hudSite.

Websocket in JS:

 var websocket = new WebSocket('ws://localhost:5500');
 websocket.onopen = function() { send('register|hud'); };
 websocket.onerror = function(e) {};
 websocket.onmessage = function(m) { if(m.data) handle(m.data); };
 websocket.onclose = function(e) {};

 function send(m) { websocket.send(m); };
 function handle(m) { console.log(m); };

Python handler:

import VR

m = dev.getMessage()
print m

Add a trigger to the python handler:

Trigger: on_device
Device: server1
Key: -1
State: Released

It may be necessary to use the CEF module directly to get more control during the CEF initialisation.

mat = VR.Material('UImat')
mat.setLit(False)

cef = VR.CEF()
cef.setMaterial(mat)
cef.open('http://localhost:5500/site')
cef.setAspectRatio(1)

keyboard = VR.find('keyboard')
cef.addKeyboard(keyboard) # pass the keyboard device

mouse = VR.find('mouse')
cef.addMouse(mouse, geo, 0, 2, 3, 4) # CEF needs the geometry the site will be put on, it uses the texture coords for the mouse interaction

geo.setMaterial(mat) # give the material to any geometry with texture coordinates