# WebGL additional features

I2Djs webGL layer is for high scale performance rendering. I2Djs provides an intuitive API to render elements on large scale. However,  WebGL Layer API has a minor deviation in terms of element creation, for performance reason.

To render any geometrical element, we need to load the respective shader. So for that reason, we create a shader group of the respective 'shaderType' and then create elements under it. For example, to create rectangles, we need to create 'rect' shader group and then add rect elements.

**Code block to create rects.**

```
let rectGroup = webGlLayerInstance.createEl({
					el: 'group',
					attr: {
						shaderType: 'rect'
					}
				}).createEl({
					el: 'rect':
					attr: {
						x: 100,
						y: 100,
						width: 250,
						height: 250
					},
					style: {
						fill: 'hsl(35%, 100%, 0%)';
					}
				});
```

## Shapes Supported:

I2Djs WebGL has a pseudo-DOM implementation for most of the geometrical primitives. In addition, it provides a way to define the custom shaders and the way to feed the data to the attributes, uniforms, textures.

Below is the list of built-in elements.

| Element  | ShaderType | attributes          | Style  |
| -------- | ---------- | ------------------- | ------ |
| rect     | Rect       | x, y, width, height | fill   |
| point    | point      | x, y, size          | fill   |
| line     | line       | x1, y1, x2, y2      | stroke |
| circle   | circle     | cx, cy, r           | fill   |
| polyline | polyline   | d                   | stroke |
| polygon  | polygon    | d                   | fill   |
| image    | image      | x, y, width, height |        |

### Custom Elements:

Sometimes there may be a need to create custom elements/effects, which are not included in the built-in options. To create custom elements, I2Djs provides an easy API to create custom shaders with the inbuild geometrical API.

### Custom Shaders:

{% embed url="<https://codepen.io/nswamy14/pen/XWbVZqP>" %}

## Events:

**Work in progress**