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

Category: Javascript | November 30, 2020
Author:Chlumsky
Views Total:266 views
Official Page:Go to website
Last Update:November 30, 2020
License:MIT

Preview:

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

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);

You Might Be Interested In:


Leave a Reply