X-visual NPM | npm.io

MRT Support:

About

X-visual is a lib for data visiualization using Three.js for rendering.

Before v1.0, it's a part of a research project and a prototype of a comercial system used to verify and accumulate any usefull tech.

NPM Version

Currently there are two main branches:

master with even least minor version number for developing based on WebGL 2.
```
	E.g, 0.3.52
```
webgl1 with odd least minor version number for legacy function support.
```
	The latest branch version is 0.3.81.
```

Quick Start

    npm i x-visual

Start from the source

    git clone https://github.com/odys-z/x-visual.git
    # npm install webpack
    # npm i three
    npm i

test (without server)

X-visual using two ways to test.

html pages

This way needing clone from git repository like:

   git clone https://github.com/odys-z/x-visual.git

Then using webpack to transpile the tests.

There html test pages are located in test/html, which can be opened directly from local file system:

    test/html/index.html

Some of them are explained in docs/tests & examples

npm test

X-visual initially use Mocha for unit test, but is considering reducing test cases currently. So the "npm test" way is not always working.

The project uses Mocha and Chai for testing, imports like this.

    import chaiStats from 'chai-stats'

To build and test

    npm run build
    npm test

For installing and troubleshooting, there is a trying page may be helpful. See Mocha project example

debug tip

The Mocha & Chai test cases support debugging with Node:

    npm test -- --inspect --inspect-brk

Chrome will show the inspect list at

    chrome://inspect

Hello World

For ecs "hello world", try test/ecs.html. You should see something like this (v0.1.11)

ecs plain js example

The html pages can be load from local file system if browser allow cross domain file access. Try (tested on Ubuntu):

    vim chrome
    # add this: google-chrome --allow-file-access-from-files --allow-file-access --allow-cross-origin-auth-prompt
    chmod +x chrome
    ./chrome

Since v0.3.56, some page can not been loaded without issue of CORS plus local files loaded from file system, due to the new version of browser's policies.

The testing page can be visited for runing python server at x-visual's root folder:

    python3 -m http.server 8000 --bind 127.0.0.1

Some Other Examples

Test Case: GLTFLoader (test/html/gltf-city.html)

Test Case: using html DOM as texture

To update rendering texture, use

    Htmltex.refresh();

see test/html/svg-canvas.html.

Test Case: Model Animization
Test Case: Particle Animation Script

Documents

All the documents are updating.

updating: Introduction, Guide & Reference

API jsdoc

Acknowledgement

Three.js

Note

Since v0.3.54, x-visual no longer directly depends on Three.js directly, via npm pacakge. It's using a forked and modified version of Three.js.

ECS - Powered by @fritzy/ecs

x-visual is a js ECS framework inspired by fritz's ecs-js. The ECS part of x-visual is modified from his source. See change log in x-visual depending package's README in packages/ecs-js.