Class containing helper methods for WebGL rendering.
Inheritance Hierarchy
WebGLSupport
Remarks
Specifically, this class helps in creating, caching and using webgl programs that should work with the yFiles coordinate systems. Instances of this class can be obtained from the webGLSupport property of the context that is passed to render and render.
Type Details
- yfiles module
- view-component
- yfiles-umd modules
- All view modules
- Legacy UMD name
- yfiles.view.WebGLSupport
Methods
Should be called to deallocate and delete program resources created previously via useProgram.
Remarks
This will also perform the actual call to
gl.deleteProgram()
.Parameters
options - Object
A map of options to pass to the method.
A map of options to pass to the method.
- program - WebGLProgram
- A program created by useProgram
Sets the active program as defined by the vertex and fragment shader sources and provides view and world transforms that can be used in the shader definitions.
Remarks
In order not to create a memory leak, if you need to delete the program, call deleteProgram.
The following transforms are made available to the shader:
- u_yf_worldToWebGL – A uniform of type
mat3
that defines the 2D view transform. Apply this transform to world coordinates to render in the WebGL coordinate system. - u_yf_worldToWebGL_3d – A uniform of type
mat4
that defines the 3D view transform. Apply this transform to world coordinates to render in the WebGL coordinate system. - u_yf_worldToIntermediate – A uniform of type
mat3
that defines the 2D intermediate transform. Apply this transform to world coordinates to render in the intermediate coordinate system which incorporates viewport position and zoom. - u_yf_intermediateToView – A uniform of type
mat3
that defines the 2D projection transform. Apply this transform to intermediate coordinates to render in the view coordinate system. Note that this does not include normalizing the coordinates into WebGL's coordinate system. - u_yf_viewToWebGL – A uniform of type
mat3
that transforms 2D coordinates from the view coordinate system into the WebGL coordinate system. - u_yf_viewToWebGL_3d – A uniform of type
mat4
that transforms 3D coordinates from the view coordinate system into the WebGL coordinate system. - u_yf_intermediateToWebGL – A uniform of type
mat3
that transforms 2D coordinates from the intermediate coordinate system into the WebGL coordinate system. - u_yf_intermediateToWebGL_3d – A uniform of type
mat4
that transforms 3D coordinates from the intermediate coordinate system into the WebGL coordinate system. - u_yf_zoom – A uniform of type
float
that contains the current zoom factor, but does not take into account the device pixel ratio. - u_yf_devicePixelRatio – A uniform of type
float
that contains the current device pixel ratio - u_yf_pixelsPerUnit – A uniform of type
float
that contains the current number of screen pixels for each unit in the world coordinate system. It's the product of zoom factor and device pixel ratio and should be preferred overu_yf_zoom * u_yf_devicePixelRatio
to keep the number of uniforms low.
Note that the 3d transforms clip z-values smaller that 0
or greater than 1000
.
Examples
Example vertex shader using 2D coordinates:
attribute vec2 position;
void main() {
gl_position = vec4((u_yf_worldToWebGL * vec3(position, 1)).xy, 0, 1);
}
Example vertex shader using 3D coordinates:
attribute vec3 position;
void main() {
gl_Position = u_yf_worldToWebGL_3d * vec4(position, 1);
}
See Also
Events
Occurs when all visuals have finished rendering into the current WebGL rendering context.
Remarks
This event can be registered to during rendering to the current WebGL context. It is raised when all other visuals in the same context have finished rendering. This event is raised only once for each context and all listeners are automatically removed after the event is fired. This allows for running cleanup and special GL effects at the end of batched GL operations.
Event Registration
addFlushingContextListener(function(this, EventArgs):void)
Event Deregistration
removeFlushingContextListener(function(this, EventArgs):void)