https://github.com/zlatnaspirala/nidza

2d canvas engine - Scene Object oriented . Auto update scene system. No animationframe loop no draw recalls.
https://github.com/zlatnaspirala/nidza

canvas2d cpu-frendly matrix-engine nidza-js optimisation textcomponent textute-generator vanillsjs

Last synced: about 1 month ago
JSON representation

2d canvas engine - Scene Object oriented . Auto update scene system. No animationframe loop no draw recalls.

• Host: GitHub
• URL: https://github.com/zlatnaspirala/nidza
• Owner: zlatnaspirala
• License: mit
• Created: 2021-08-21T21:11:48.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-01-27T23:22:48.000Z (over 1 year ago)
• Last Synced: 2025-02-28T01:05:07.023Z (2 months ago)
• Topics: canvas2d, cpu-frendly, matrix-engine, nidza-js, optimisation, textcomponent, textute-generator, vanillsjs
• Language: JavaScript
• Homepage: https://maximumroulette.com
• Size: 21.3 MB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README-MORE.md
  • License: LICENSE

Awesome Lists containing this project

README

        

# 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;

  }

);

```