     Demo_mtw-canvas-malachite.mp4
 |
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]
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><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.
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
   Demo_mtw-canvas-disks.mp4 |
   Demo_mtw-canvas-spiral.mp4 |
   Demo_mtw-canvas-blacksea.mp4 |
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.
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.
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]