mythemeway / mtw-canvas-malachite

WebGL Canvas | GLSLX shader files and minified bundles that can be used as 3D animated backgrounds - Demo:

MTW-CANVAS-MALACHITE

Demo_mtw-canvas-malachite.mp4

Note:

• Preview shows the boilerplate-website usage

• Fragment shader is based on Glare of water [License: CC BY 3.0; Copyright: © 2019 Jan Mróz; Changes: made]

| Usage

E. g. as a 3D animated background

Directory: boilerplate-canvas

In this directory, you will find the files for the pure background. You can quickly and easily adapt the GLSLX shader files with mtw-boilerplate-graphics or embed the already minimized canvas bundles directly on a website.

Embed via jsDelivr

<canvas id="mtw-canvas" style="width:100vw;height:100vh;left:0;top:0;position:fixed;"></canvas>
<script src="https://cdn.jsdelivr.net/gh/mythemeway/[email protected]/boilerplate-canvas/twgl/canvas.bundle.min.js"></script>

Self Hosting

<canvas id="mtw-canvas" style="width:100vw;height:100vh;left:0;top:0;position:fixed;"></canvas>
<script src="./canvas.bundle.min.js"></script>

Warning: WebGL canvases can make your CPU sweat. For the environment, stop the requestAnimationFrame loop when the canvas isn't visible #GreenCoding. See my website-boilerplate for an example.

TWGL or three.js

There are two types of minimized bundles available. One contains TWGL and one contains three.js instead. I recommend using the TWGL bundle because it is much smaller as you can see in the table below.

Bundle Sizes	TWGL	three.js
malachite

Note: Badges are clickable and linked to the corresponding minimized bundle.

Directory: boilerplate-website

In this directory, you will find the files for the exchangeable WebGL canvas headers of the MyThemeWay Website-Boilerplates:

Explore: Demo with Website-Boilerplate Light-Particle v4.0

| Other WebGL Canvases

Demo_mtw-canvas-disks.mp4

Demo_mtw-canvas-spiral.mp4

Demo_mtw-canvas-blacksea.mp4

| Appendix

Note on protected brand names and logos

• The use of protected brand names, trade names, utility models and brand logos on this website does not constitute an infringement of copyright; rather, it serves as an illustrative note. Even if this is not marked as such at the respective points, the corresponding legal provisions always apply.

• The brand names and logos used are the property of their respective owners and are subject to their copyright provisions.

• This offer is in no way related to the legal entities of the protected brand names and logos used.

Note on liability for links

• This README contains links to external third-party websites. The README operator has no influence on the content of these sites. Therefore, he cannot assume any liability. Instead, the respective provider is always responsible for the content.

• The linked pages were checked for possible legal violations at the time of linking and illegal content wasn't discernible. A permanent control of the linked pages is unreasonable without concrete evidence of an infringement. However, if the README operator becomes aware of such a violation, he will act immediately.

Readme uses

• star-solid.svg & code-branch-solid.svg [License: CC BY 4.0; Copyright: © Fonticons, Inc.; Changes: made]

• Simple Icons [License: CC0 1.0]

• Shields.io [License: CC0 1.0]