WebGL: Create-animate

learn WebGl Layer - Element creation and animation of its attributes.

Create an HTML container with ID to render the graphical context element

<div id="myWebgl"> </div>

Layer Creation:

To create the WebGL layer, invoke the webglLayer method with ContainerID "#myWebgl". It returns webGL-2D renderer instance. For more details on webglLayer please refer : API Reference -> Layers -> WebGL Layer Page.

let renderer = i2d.webglLayer('#myWebgl', {}, {});

Element Creation:

To render elements, first, we need to create the shader group and then add elements to it. Without the shader group, elements won't be rendered. For example, to create a circle, we need to create a circle shader group and then rect elements.

Code block to create rects.

let rectGroup = webGlLayerInstance.createEl({
					el: 'group',
					attr: {
						shaderType: 'circle'
					}
				});

Let's create a circle element.

let rect = rectGroup.createEl({
					el: 'circle':
					attr: {
						cx: 100,
						cy: 100,
						r: 250
					},
					style: {
						fill: 'hsl(35%, 100%, 0%)';
					}
				});

Animation:

Now we will animate circle radius from 50 to 200 and fillStyle from '#ff0000' to '#00ff00' in duration - 500 ms. By specifying loop = 10, animation will be repeated 10 time, with alternate direction and easeInOutSin easing.

circle.animateTo({
    duration: 500,
    loop: 10,
    ease: 'easeInOutSin',
    direction: 'alternate',
    attr: {
        r: 200
    },
    style: {
        fill: '#00ff00'
    }
});