Example 3: VSC with Pure WebGL

An example of how to create faster WebGL applications by avoiding pixel readback, using pure WebGL and a Visual Studio Code environment on Windows.

Installing and Running

1. Install Visual Studio Code from https://code.visualstudio.com/download

2. Start VS Code, click the 'Extensions' button, and install the 'Live Server' extension. It will add a button to the status bar.

3. Start Live Server by clicking the button in the status bar, and take note of the port number (default = 5500)

4. Debugging on Windows

   • There is no support for backlight switching on Windows yet. Until support is available, you must comment-out lines that reference the BackLightController variable. Despite no backlight, everything else should work as expected.

   • From 'Run and Debug', select 'Launch Chrome/Edge against localhost.'

5. Running on LumePad

   • Ensure both your Windows and LumeTab systems are on the same WiFi connection.

   • From Windows:

     • Open a command-prompt, run "ipconfig" and take note of the IPV4 address.

     • Ensure the Live Server is running in VS Code.

   • From LumeTab: Start Chrome and add the Live Server port number to the IPV4 address (e.g. 192.168.1.1111:5500) and enter it into the address bar.

Details

This example highlights the ability to perform faster rendering using render-to-texture in a pure WebGL environment without Three.js. Similar to Example 2, it supports development within Visual Studio Code.

Unlike previous examples 1 and 2, this example uses pure WebGL and does not use two canvases with separate WebGL contexts. A single canvas with the same WebGL context is shared between and application and SDK. This means the SDK must be careful to restore all WebGL state it modifies, and is the reason for the extra maxAttribs parameter in RenderController.Initialize(). This parameter defines the number of WebGL attributes your application will use, and defaults to 16.

You can enable or disable the render-to-texture mode by modifying the nativeMode variable.

View sharpening can be enabled or disabled using the enableViewSharpening parameter in RenderController.Initialize().

The structure of the application is similar to Example 2 with three important functions:

• main(): This function performs all requires initialization, camera setup, and resource allocations. It will optionally create the offscreen render-target in non-native mode. Unlike the previous examples, it renders a cube with a per-face color rather than a texture.

• render(): This function performs the rendering using either (a) the fast render-target method or (b) the slower pixel readback method, depending on the nativeMode variable.

• onMouseDown(): This function simply toggles the backlight switching.