Coloring a Point with a Synthetic Texture

This JavaScript WebGL program demonstrates how color a point with a cteated texture, rather than an image file, and does it without using a buffer.

ColorAPointWithASyntheticTexture.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net's WebGL</title>
    <script  id="idVertexShader" type="c">
      void main() {
        gl_Position = vec4(-0.3, 0.2, 0.0, 1.0);
        gl_PointSize = 200.0;
      }
    </script>

    <script  id="idFragmantShader" type="c">
      precision mediump float;
      uniform sampler2D usamp2D;
      void main() {
        gl_FragColor = texture2D(usamp2D, gl_PointCoord.xy);
      }
    </script>
  </head>
  <body onload="Render()">
    <script>
      function Render() {
        // Get A WebGL context
        var qCanvas = document.querySelector("#idWebGL");
        var qGL = qCanvas.getContext("webgl");

        // The Vertex Shader
        var sVertextShaderCode = document.querySelector("#idVertexShader").text;
        var qVertexShader = qGL.createShader(qGL.VERTEX_SHADER);
        qGL.shaderSource(qVertexShader, sVertextShaderCode);
        qGL.compileShader(qVertexShader);

        // The Fragment Shader
        var sFragShaderCode = document.querySelector("#idFragmantShader").text;
        var qFragmentShader = qGL.createShader(qGL.FRAGMENT_SHADER);
        qGL.shaderSource(qFragmentShader, sFragShaderCode);
        qGL.compileShader(qFragmentShader);

        // Compile and link the program
        var qProgram = qGL.createProgram();
        qGL.attachShader(qProgram, qVertexShader);
        qGL.attachShader(qProgram, qFragmentShader);
        qGL.linkProgram(qProgram);

        // Deallocate
        qGL.detachShader(qProgram, qVertexShader);
        qGL.detachShader(qProgram, qFragmentShader);
        qGL.deleteShader(qVertexShader);
        qGL.deleteShader(qFragmentShader);

        qGL.clearColor(0.75, 0.75, 0.75, 1.0);
        qGL.clear(qGL.COLOR_BUFFER_BIT);
        // A 2x2 image
        const kuiPixelData = new Uint8Array([
          0x00, 0x00, 0x88, 0xFF,  // Blue
          0xFF, 0x00, 0x00, 0xFF,  // Red
          0xFF, 0x00, 0x00, 0xFF,  // Red
          0xFF, 0xFF, 0xFF, 0xFF   // White
        ]);
        const kqTexture = qGL.createTexture();
        qGL.bindTexture(qGL.TEXTURE_2D, kqTexture);
        qGL.texImage2D(qGL.TEXTURE_2D,
          0,                  // Level
          qGL.RGBA,           // Format (Internal)
          2,                  // Width
          2,                  // Height
          0,                  // Border
          qGL.RGBA,           // Format
          qGL.UNSIGNED_BYTE,  // Channel Data Type
          kuiPixelData,       // Pixel Data
        );
        qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_MIN_FILTER, qGL.NEAREST);
        qGL.texParameteri(qGL.TEXTURE_2D, qGL.TEXTURE_MAG_FILTER, qGL.NEAREST);
        qGL.useProgram(qProgram);
        qGL.drawArrays(qGL.POINTS, 0, 1);

        // Deallocate
        qGL.useProgram(null);
        if (qProgram) qGL.deleteProgram(qProgram);
      }
    </script>
    <canvas id="idWebGL" width="400", height="400" style="border:1px solid #444444"></canvas>
  </body>
</html>

WebGL JavaScript

Coloring a Point with a Synthetic Texture

ColorAPointWithASyntheticTexture.html

Output