Draw Precise And Efficient Shadows Of Polygons Using WebGL – PolyShadow.js

Preview:

Description:

PolyShadow.js is a JavaScript library that facilitates drawing shadows of rectangles and other polygons in a WebGL context. Based on WebGL shaders and HTML5 canvas.

The shadows are in the form of a precise Gaussian blur. The implementation is based on a mathematical equation and has constant complexity.

To get proper results, polygon triangles must not overlap and must be combined using additive blending without depth testing. Using a floating-point frame buffer may be necessary to avoid artifacts resulting from blending many small triangles.

How to use it:

1. Download and load the polyshadow.js in the document.

<script type="text/javascript" src="polyshadow.js"></script>

2. Creates a rectangle shadow shader and a rectangle vertex buffer for subsequent drawRectangle.

var rectangleShader = PolyShadow.createRectangleShader(gl);

3. Draws a rectangle shadow (a solid-color blurred rectangle) with the following parameters. GL state changes: gl.useProgram, gl.ARRAY_BUFFER, gl.enableVertexAttribArray, gl.vertexAttribPointer.

• {WebGLRenderingContext} gl The WebGL context
• {Object} rectangleShader The rectangle shader created by createRectangleShader
• {number[]} rectangle An array of 4 floats, the rectangle’s sides: [left, bottom, right, top]
• {number[]} transformation A 4×4 vertex transformation matrix in the form of an array of 16 floats
• {number} sigma The blur intensity (the sigma coefficient of the Gaussian distribution)
• {number[]} fillColor The foreground color as an array of [r, g, b, a] – values between 0 and 1
• {number[]} bgColor The background color (to be used in the outer portion of filled fragments) as an array of [r, g, b, a] – values between 0 and 1
• {number} cutoff Even though the Gaussian distribution extends to infinity, it will be cut off when opacity is below this threshold

PolyShadow.drawRectangle(gl, rectangleShader, rectangle, transformation, sigma, fillColor = [0.0, 0.0, 0.0, 1.0], bgColor = [0.0, 0.0, 0.0, 0.0], cutoff = 1.0/512);

4. Deletes a rectangle shader when it’s no longer needed.

• {WebGLRenderingContext} gl The WebGL context
• {Object} rectangleShader The rectangle shader created by createRectangleShader

PolyShadow.deleteRectangleShader(gl, rectangleShader);

5. Creates a triangle shadow shader used to draw triangle mesh shadows.

var triangleShader = PolyShadow.createTriangleShader(gl);

6. Creates a drawable triangle mesh. Its individual triangles must not overlap! (Unless this is intended). GL state changes: gl.ARRAY_BUFFER, gl.ELEMENT_ARRAY_BUFFER.

• {WebGLRenderingContext} gl The WebGL context
• {number[]} triangles An array of triangle coordinates – each triangle represented by six floats: [ax, ay, bx, by, cx, cy]

var triangleMesh = PolyShadow.createTriangleMesh(gl, triangles);

7. Draws a triangle mesh shadow (solid-color blurred triangles). The shadows of the individual triangles must be combined additively, so a form of additive blending is required. Depth test should be disabled to prevent clipping. GL state changes: gl.useProgram, gl.ARRAY_BUFFER, gl.ELEMENT_ARRAY_BUFFER, gl.enableVertexAttribArray, gl.vertexAttribPointer.

• {WebGLRenderingContext} gl The WebGL context
• {Object} triangleShader The triangle shader created by createTriangleShader
• {Object} triangleMesh The triangle mesh created by createTriangleMesh
• {number[]} transformation A 4×4 vertex transformation matrix in the form of an array of 16 floats
• {number} sigma The blur intensity (the sigma coefficient of the Gaussian distribution)
• {number[]} fillColor The foreground color as an array of [r, g, b, a] – values between 0 and 1
• {number[]} bgColor The background color (to be used in the outer portion of filled fragments) as an array of [r, g, b, a] – values between 0 and 1
• {number} cutoff Even though the Gaussian distribution extends to infinity, it will be cut off when opacity is below this threshold

PolyShadow.drawTriangleMesh(gl, triangleShader, triangleMesh, transformation, sigma, fillColor = [0.0, 0.0, 0.0, 1.0], bgColor = [0.0, 0.0, 0.0, 0.0], cutoff = 1.0/512.0);

8. Delete a triangle mesh when it’s no longer needed.

• {WebGLRenderingContext} gl The WebGL context
• {Object} triangleMesh The triangle mesh created by createTriangleMesh

PolyShadow.deleteTriangleMesh(gl, triangleMesh);

9. Delete a triangle shader when it’s no longer needed.

• {WebGLRenderingContext} gl The WebGL context
• {Object} triangleShader The triangle shader created by createTriangleShader

PolyShadow.deleteTriangleShader(gl, triangleShader);