WebGL Component

Events

Draw [Data = {type: "canvas", pos, co, ctx}]: when the entity is ready to be drawn to the stage

NoCanvas: if the browser does not support canvas

When this component is added to an entity it will be drawn to the global webgl canvas element. Its canvas element (and hence any WebGL entity) is always rendered below any DOM entities.

Sprite, Image, SpriteAnimation, and Color all support WebGL rendering. Text entities will need to use DOM or Canvas for now.

If a webgl context does not yet exist, a WebGL entity will automatically create one.

Note: For better performance, minimize the number of spritesheets used, and try to arrange it so that entities with different spritesheets are on different z-levels. This is because entities are rendered in z order, and only entities sharing the same texture can be efficiently batched.

Create a webgl entity like this

var myEntity = Crafty.e("2D, WebGL, Color")
     .color(1, 1, 0, 0.5)
     .attr({x: 13, y: 37, w: 42, h: 42});

Properties

.context

Methods

.draw()

Back to top

.context

src/graphics/webgl.js#L166-L172

The webgl context this entity will be rendered to.

Back to top

.draw()

src/graphics/webgl.js#L199-L208

public this .draw()

An internal method to draw the entity on the webgl canvas element. Rather then rendering directly, it writes relevent information into a buffer to allow batch rendering.