WebGL2

The WebGL2 module supports graphics drawing, such as processing the graphics position and color. WebGL2 provides enhanced capabilities in the rendering pipeline and shader language than WebGL.

This module provides WebGL APIs that correspond to the OpenGL ES 3.0 feature set. For more information, see WebGL™.

NOTE

The initial APIs of this module are supported since API version 7. Newly added APIs will be marked with a superscript to indicate their earliest API version.

WebGL2 complies with the OpenGL protocol and does not support multi-thread calling.

This module can be used only in the JavaScript-compatible web-like development paradigm.

Invoking Method

Create a <canvas> component in the HML file. The following is an example:

<!--xxx.hml-->
<div class="container">
    <canvas ref="canvas1" style="width : 400px; height : 200px; background-color : lightyellow;"></canvas>
    <button class="btn-button" onclick="BtnDraw2D">BtnDraw2D</button>
</div>

Obtain the <canvas> component instance in the JS file. The following is an example:

// Obtain the <canvas> component instance.
const el = this.$refs.canvas1;
// Obtain the WebGL context from the <canvas> component instance.
const gl = el.getContext('webgl2');
// Call the WebGL API.
gl.clearColor(0.0, 0.0, 0.0, 1.0);

Type

System capability: SystemCapability.Graphic.Graphic2D.WebGL2

Table 1 Type

APIs

System capability: SystemCapability.Graphic.Graphic2D.WebGL2

Table 2 APIs

WebGL2RenderingContextBase

WebGL2RenderingContextBase

Attributes

Methods

WebGL2RenderingContextOverloads

WebGL2RenderingContextOverloads