Author: | Chlumsky |
---|---|
Views Total: | 266 views |
Official Page: | Go to website |
Last Update: | November 30, 2020 |
License: | MIT |
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);