Create a WebEngine to add an interactive website, PDFs, or HTML content to a VRED scene. The content streams into a material texture channel in real-time and uses the properties of the material for display.

How to Create a WebEngine

1. In the Menu Bar, select Scene > Media Editor to open the Media Editor.

2. Select the + icon in the bottom Icon Bar, then WebEngine to create a WebEngine.

3. Double-click the WebEngine and name it.

4. Set the Width and Height:

   • If using HTML content in the URL, enter the known width and height from the code.
   • If using a website in the URL, adjust the width and height when the website is displayed on an object.

5. Add a URL for the content:

   • To add a website, enter it in the URL field (for example, www.autodesk.com).
   • To add a local HTML file, use the Browse icon. HTML can contain audio and video. The HTML file can refer to audio and video files that are embedded. Supported media formats are WebM (.webm), OGG (.ogg/.ogv), and WAV (.wav).

6. From the Material Editor, drag the assigned material for the WebEngine onto the Material field.

7. Set the texture type:

   • Diffuse:

     The environment is reflected in this texture.

     1. In the Material Editor Properties, under Material, set the Diffuse Color to white.
     2. In the Material Editor Properties, under Diffuse Texture, check Use Texture, then set Mapping Type to UV. Rotate the Diffuse Texture as needed.

   • Incandescence:

     In raytracing, the material emits light into the scene when Use as Light Source is activated.

     1. In the Material Editor Properties, under Material, set the Diffuse Color to black.
     2. In the Material Editor Properties, under Incandescence, set Intensity to 1.00 and the color to white.
     3. Set Mapping Type to UV. Rotate the Incandescence Texture as needed.

   • Diffuse + Incandescence:

     This texture is used when the properties of incandescence and an alpha channel, that is only available in Diffuse, are needed.

     This HTML example code sets the background of a webpage transparent (alpha):

      <style>
     
      body{
     
      background-color: rgba(0, 0, 0, 0);
     
      }
     
      </style>

     1. In the Material Editor Properties, under Material, set the Diffuse Color to white.
     2. In the Material Editor Properties, under Diffuse Texture, check Use Alpha.
     3. In the Material Editor Properties, under Incandescence, set Intensity to 1.00 and the color to white.
     4. In either Diffuse Texture or Incandescence, set Mapping Type to UV. Rotate the Texture as needed.

Decoupling Service for WebEngines

A decoupled service was added in 2021.3 to access WebEngines and expose them in Python, so you can automatically reload a WebEngine in VRED. This is needed when an external application streams its UI to VRED, it has changes, and needs to be reloaded.

Use vrWebEngineService and vrdWebEngine. Now a sceneplate WebEngine shares the name of its sceneplate, making it possible to find it with the new service.

VRED to HTML5 Communication

There is a two-way communication and interaction between VRED and HTML5. Here is an example of VRED to HTML5.

Executing the Variant Set (Home\_Button) with an associated Python function (sendToWebEngine), triggers a specific WebEngine (Webengine\_A) and sends an HTML event (VRED\_HOME\_Btn) to the web page. The web page must have an Event Listener to receive the message.

The following is an example of HTML code to receive a message:

<script>

document.addEventListener("VRED\_HOME\_Btn", Icon_HomeClick);

</script>

HTML5 to VRED Communication

An img element and a URL can be used to send Python commands from the webpage to VRED, using the webserver. For example, src = "http://localhost:8888?..... The webserver must be enabled in the preferences.

HTML code to set the Switch Material to choice 0:

<script>

function r(){

var i = document.createElement("img");

i.src = "http://localhost:8888/python?value=setSwitchMaterialChoice('SwitchColor', 0)";

};

</script>

HTML code to trigger a VariantSet named Icon_Anim:

<script>

Icon_Click = function(event) {

var i = document.createElement("img");

i.src = "http://localhost:8888/variants?value=selectVariantSet('Icon_Anim')";

};

</script>

Displaying a PDF in a WebEngine

You can interact with a PDF using a frontplate to display it in a WebEngine.

1. Select Scene > Sceneplate Editor.
2. Select Create > Create Frontplate. This will set Name and Type to Frontplate.
3. In the Properties section, set Content Type to Web and Url to the location of the PDF.