Custom Shader

I2Djs provides a way to create out of the box visual effects using a custom shader. A shader is a small program written in GLSL that runs on the GPU. It comprises of Vertex shader and fragment shader, with inputs in the form of Uniforms and Attributes.

I2Djs has an intuitive way to define the custom shader elements.

Syntax:

#.createShaderEl(shaderConfig);

webGLInstance.createShaderEl({
    fragmentShader: ,
    vertexShader: ,
    uniforms: { },
    geometry: ,
    renderTarget:
});

ShaderConfig:

The Following are the properties that are supported by the shaderEL config object.

  • vertexShader - string : GLSL vertex shader code.

  • fragmentShader - string : GLSL fragment shader code.

  • uniforms - Object: Uniforms are global variables, which are the same across all vertices. Uniforms can be accessed by both the vertex shader and the fragment shader.

  • geometry - Geometry Instance: Used to define the geometry by one or more custom attributes. I2Djs provides a set of predefined geometry as mentioned below.

  • renderTarget - TextureObject Instance: A render target is a buffer, where the video card draws pixels for a scene that is being rendered in the background. It's a TextureObject instance.

uniforms :

Uniforms are global variables, which are the same across all vertices. Uniforms can be accessed by both the vertex shader and the fragment shader. It follows object syntax as shown below.

{
    uniformName: {
        value: ,
        size: [optional]
    },
    ...
}

Example of Uniform:

{
    u_a: {
        value: 1.0
    },
    u_resolution: {
        value: [100, 100],
        size: 2
    }
}

geometry :

I2Djs geometry is a way to define one or more attributes, which will be passed as input to the shaders. I2Djs provides a set of predefined geometry as mentioned below.

  • MeshGeometry : Used for rendering triangular polygon mesh. Default drawType : 'TRIANGLES'

  • PointsGeometry: Used for rendering points. Default drawType : 'POINTS'.

  • LineGeometry : Used for rendering line, polylines. Default draw Type : 'LINES'.

renderTarget :

A render target is a buffer where the video card draws pixels for a scene that is being rendered in the background. It's a TextureObject instance.

PreviousWebGL additional featuresNextGeometry