Js-visg-m-s Manual

npm install js-visg-m-s

Then import:

import  Chart, Map, Stats  from 'js-visg-m-s';

const config = 
    renderer: 'webgpu',
    antialias: false,
    fpsLimit: 30,
    modules: ['TooltipModule', 'DataStreamModule'],
    shaders: 
        vertex: 'custom.vert',
        fragment: 'custom.frag'
;
const app = new JSVisgMS.Application(config);

---

visg-m-s benchmark --runs 5 --output report.json js-visg-m-s manual

For prototyping or small projects, use the unpkg CDN: npm install js-visg-m-s

<script src="https://unpkg.com/js-visg-m-s@2.4.0/dist/visgms.min.js"></script>

Every object in JS-VISG-M-S is a node in a hierarchical tree. Transformations (position, rotation, scale) propagate from parent to child. Example: uniform mat4 modelViewMatrix

const parentGroup = scene.createGroup();
const childSphere = parentGroup.addSphere( radius: 0.5 );
parentGroup.position.set(2, 1, 0);

Modules are pluggable components that extend core functionality. Built-in modules include:

---

const customMaterial = scene.createMaterial(
    shader: 
        vertex: `
            attribute vec3 position;
            uniform mat4 modelViewMatrix;
            void main() 
                gl_PointSize = 10.0;
                gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
`,
        fragment: `
            uniform vec3 color;
            void main() 
                gl_FragColor = vec4(color, 1.0);
`
    ,
    uniforms:  color: [1.0, 0.2, 0.5] 
);

---

A crucial part of any JS-VISG-M-S manual is optimization. Here are proven strategies: