Skip to content

Latest commit

 

History

History
135 lines (94 loc) · 11.6 KB

README.md

File metadata and controls

135 lines (94 loc) · 11.6 KB
Raw

MTW-CANVAS-SPIRAL

Demo_mtw-canvas-spiral.mp4

Note:


| 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/mtw-canvas-spiral@0.0.2/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
spiral  pending...  pending...

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 Dark-Particle v4.0


| Other WebGL Canvases

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