WebGL - Animation

with transparent background

by s_light

HTML

<canvas id="canvas"></canvas>

<a href="https://webglfundamentals.org/webgl/lessons/webgl-animation.html">source of WebGL example</a>

<a href="https://en.wikisource.org/wiki/Alice%27s_Adventures_in_Wonderland_(1866)">source of text</a>

<article>
    <h1>
ALICE'S ADVENTURES<br>
IN WONDERLAND.<br>
BY<br>
LEWIS CARROLL.<br>
</h1>

<p>
CHAPTER I.<br>
DOWN THE RABBIT-HOLE.
</p>
<p>
Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, "and what is the use of a book," thought Alice, "without pictures or conversations?"
</p>
<p>
So she was considering in her own mind, (as well as she could, for the hot day made her feel very sleepy and stupid,) whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a white rabbit with pink eyes ran close by her.
</p>
<p>
There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, "Oh dear! Oh dear! I shall be too late!" (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural;) but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and, burning with curiosity, she ran across the field after it, and was just in time to see it pop down a large rabbit-hole under the hedge.
</p>
<p>
In another moment down went Alice after it, never once considering how in the world she was to get out again.
</p>
<p>
The rabbit-hole went straight on like a tunnel for some way, and then dipped suddenly down, so suddenly that Alice had not a moment to think about...

CSS

@import url("https://webglfundamentals.org/webgl/resources/webgl-tutorials.css");
body {
  margin: 0;
}

canvas {
  width: 80%;
  height: 100%;
  display: block;
  background-color: transparent;
  border: none 0px;
  position: fixed;
  top: 1em;
  left:20%;
}



body {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 1em;
    font-size:1.3em;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    background-size: cover;
    /* night blue */
    color:  hsl(225.9, 20%, 40%);
    text-shadow:
        0 0 2px rgb(0, 0, 0),
        0 0 3px rgb(0, 0, 0),
        0 0 6px rgb(0, 0, 0);
    background-color: rgb(0, 0, 20);
    background-image:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 80, 0.9) 100%
        ),
        radial-gradient(
            0.9vh at 60% 12%,
            rgba(255, 230, 200, 0.7) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.7vh at 72% 3%,
            rgba(255, 230, 150, 0.6) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.8vh at 80% 20%,
            rgba(255, 230, 200, 0.8) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.8vh at 82% 30%,
            rgba(255, 200, 0, 0.8) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.8vh at 89% 20%,
            rgba(255, 230, 150, 0.4) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.9vh at 50% 60%,
            rgba(255, 200, 0, 1) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            0.9vh at 43% 55%,
            rgba(255, 255, 255, 1) 0%,
            rgba(0, 0, 0, 0) 100%
        ),
        radial-gradient(
            1.8vh at 45% 75%,
            rgba(255, 200, 150, 1) 0%,
            rgba(0, 0, 0, 0) 100%
     ...

JavaScript

// WebGL - Animation
// from https://webglfundamentals.org/webgl/webgl-animation.html

"use strict";

function main() {
  // Get A WebGL context
  /** @type {HTMLCanvasElement} */
  var canvas = document.getElementById("canvas");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    return;
  }

  // setup GLSL program
  var program = webglUtils.createProgramFromScripts(gl, ["3d-vertex-shader", "3d-fragment-shader"]);

  // look up where the vertex data needs to go.
  var positionLocation = gl.getAttribLocation(program, "a_position");
  var colorLocation = gl.getAttribLocation(program, "a_color");

  // lookup uniforms
  var matrixLocation = gl.getUniformLocation(program, "u_matrix");

  // Create a buffer to put positions in
  var positionBuffer = gl.createBuffer();
  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = positionBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  // Put geometry data into buffer
  setGeometry(gl);

  // Create a buffer to put colors in
  var colorBuffer = gl.createBuffer();
  // Bind it to ARRAY_BUFFER (think of it as ARRAY_BUFFER = colorBuffer)
  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
  // Put geometry data into buffer
  setColors(gl);

  function radToDeg(r) {
    return r * 180 / Math.PI;
  }

  function degToRad(d) {
    return d * Math.PI / 180;
  }

  var translation = [0, 0, -360];
  var rotation = [degToRad(190), degToRad(40), degToRad(320)];
  var scale = [1, 1, 1];
  var fieldOfViewRadians = degToRad(60);
  var rotationSpeed = 1.2;

  var then = 0;

  requestAnimationFrame(drawScene);

  // Draw the scene.
  function drawScene(now) {
    // Convert to seconds
    now *= 0.001;
    // Subtract the previous time from the current time
    var deltaTime = now - then;
    // Remember the current time for the next frame.
    then = now;

    // Every frame increase the rotation a little.
    rotation[1] += rotationSpeed * deltaTime;

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL...