Template:WebGL2Canvas/doc

Embeds a WebGL2 canvas that loads a scene from the WebGL: namespace.

Usage

{{WebGL2Canvas|SceneName}}

Or with named parameters:

{{WebGL2Canvas
|scene=SceneName
|width=100%
|height=400
|min-width=800
|min-height=600
}}

Parameters

Parameter	Default	Description
scene or 1	(required)	Name of the scene to load from WebGL:SceneName
width	100%	Canvas width. Accepts pixels (800) or percentage (100%)
height	100%	Canvas height. Accepts pixels (600) or percentage (100%)
min-width	800	Minimum width in pixels (used when width is a percentage)
min-height	600	Minimum height in pixels (used when height is a percentage)

Writing Scenes

Scene scripts are stored in the WebGL: namespace (e.g., WebGL:Test). Only users in the webgl-developer group can edit this namespace.

Scenes use instance mode - define lifecycle methods on the scene object:

<syntaxhighlight lang="javascript"> scene.init = function(gl, canvas) {

   // Called once after script loads
   // Set up shaders, buffers, textures
   gl.clearColor(0.1, 0.1, 0.15, 1.0);

};

scene.render = function(gl, time) {

   // Called every frame
   // time = seconds since scene started
   gl.clear(gl.COLOR_BUFFER_BIT);

};

scene.resize = function(gl, width, height) {

   // Called when canvas size changes
   gl.viewport(0, 0, width, height);

};

scene.cleanup = function(gl) {

   // Optional: called when canvas is removed
   // Free resources here

}; </syntaxhighlight>

Lifecycle Methods

Method	Arguments	Description
init	gl, canvas	Called once after script loads. Set up WebGL resources.
render	gl, time	Called every frame. time is seconds elapsed.
resize	gl, width, height	Called when canvas dimensions change.
cleanup	gl	Called when element is removed. Free resources.

Context Object

The scene object also provides:

• scene.canvas - the canvas DOM element
• scene.gl - the WebGL2 rendering context

You can store custom state on the scene object (e.g., scene.program, scene.vao).

Examples

Fixed size canvas:

{{WebGL2Canvas|Test|width=800|height=600}}

Full-width responsive canvas:

{{WebGL2Canvas|Test|width=100%|height=400}}