nidza/README-MORE.md

Nidza.js is ultimate canvas2d+3d solution. In context of 3d graphics it is used for GLSL manipulation. Objective is low CPU usage price.

# ABOUT SHADERS

## Full Custom shader on user level code [use glmatrix]
 This is `shader-component-custom.js` example.
 Also this is default code for base shader.

```js

// import { Nidza, Utility } from "nidza"; prodc
import {Nidza, Utility} from "../node_modules/nidza/index";

window.addEventListener("load", function(e) {
  loader.innerText = "NIDZA READY";
  setTimeout(function() {
    loader.style.display = "none";
  }, 200);
});

// This component depens on glmatrix engine
Utility.loadSync(
  "https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js",
  () => {
    var nidza = new Nidza();

    let myShader = {
      id: "myShader",
      size: {
        width: window.innerWidth,
        height: window.innerHeight,
      },
      parentDom: document.getElementById("testHolder"),
    };

    var indentityMyShader = nidza.createNidza3dIndentity(myShader);
    let myShaderElement = indentityMyShader.addShaderComponentCustom({
      id: "vertex-color-comp",
    });

    myShaderElement.initDefaultFSShader = () => {
      return `
        varying lowp vec4 vColor;

        void main(void) {
          gl_FragColor = vColor;
        }
      `;
    }

    myShaderElement.initDefaultVSShader = () => {
      return `
        attribute vec4 aVertexPosition;
        attribute vec4 aVertexColor;

        uniform mat4 uModelViewMatrix;
        uniform mat4 uProjectionMatrix;

        varying lowp vec4 vColor;

        void main(void) {
          gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
          vColor = aVertexColor;
        }
      `;
    }

    myShaderElement.positions = [
      1.0, 1.0,
     -1.0, 1.0,
      1.0, -1.0,
     -1.0, -1.0,
    ];
    myShaderElement.colors = [
      1.0, 1.0, 1.0, 1.0,    // white
      1.0, 0.0, 0.0, 1.0,    // red
      0.0, 1.0, 0.0, 1.0,    // green
      0.0, 0.0, 1.0, 1.0,    // blue
    ];

    myShaderElement.initDefaultBuffers = function() {
      var gl = this.gl;
      const positionBuffer = gl.createBuffer();
      // Select the positionBuffer as the one to apply buffer
      // operations to from here out.
      gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

      // Now create an array of positions for the square.
      gl.bufferData(gl.ARRAY_BUFFER,
        new Float32Array(this.positions),
        gl.STATIC_DRAW);

      const colorBuffer = gl.createBuffer();
      gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
      gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.colors), gl.STATIC_DRAW);

      return {
        position: positionBuffer,
        color: colorBuffer,
      }
    };

    const shaderProgram = myShaderElement.initShaderProgram(
      myShaderElement.gl,
      myShaderElement.initDefaultVSShader(),
      myShaderElement.initDefaultFSShader());

    myShaderElement.programInfo = {
      program: shaderProgram,
      attribLocations: {
        vertexPosition: myShaderElement.gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
        vertexColor: myShaderElement.gl.getAttribLocation(shaderProgram, 'aVertexColor'),
      },
      uniformLocations: {
        projectionMatrix: myShaderElement.gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
        modelViewMatrix: myShaderElement.gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
      },
    };

    myShaderElement.buffers = myShaderElement.initDefaultBuffers(myShaderElement.gl);

    // myShaderElement.draw(); Manually call once.
    dispatchEvent(
      new CustomEvent(indentityMyShader.getKey("activate-updater"), {
        detail: {
          id: "vertex-color-comp",
        },
      })
    );

    // Make it global
    window.myShaderElement = myShaderElement;
    window.indentityMyShader = indentityMyShader;
  }
);

```