@oneisland/graphics

0.0.1 • Public • Published


A fast and lightweight 3D graphics engine for the web

Overview

Installation

@oneisland/graphics is available through the npm registry:

$ npm install @onesland/graphics

Usage

Creating a simple animation of a rotating cube:

cube.js
// Define the vertices for the cube
const vertices = [
  [-1, -1, 1],
  [ 1, -1, 1],
  [ 1, -1, -1],
  [-1, -1, -1],
  [-1, 1, 1],
  [ 1, 1, 1],
  [ 1, 1, -1],
  [-1, 1, -1]
];

// Define the faces for the cube
const faces = [
  [2, 3, 0],
  [0, 1, 2],
  [7, 3, 0],
  [0, 4, 7],
  [4, 0, 1],
  [1, 5, 4],
  [6, 2, 3],
  [3, 7, 6],
  [5, 1, 2],
  [2, 6, 5],
  [7, 4, 5],
  [5, 6, 7]
];
engine.js
// Create the engine
const engine = new Engine('#engine', async({ canvas, context }) => {

  // Create a scene
  const scene = new Scene('scene', { canvas, context });

  // Create a cube
  const cube = new Mesh('cube', { vertices, faces, scene });

  // Create an animation to rotate the mesh
  const animation = new Animation('rotate', (mesh, delta) => mesh.rotate());

  // Add the animation to the cube
  cube.addAnimation(animation);

  // Return the scene
  return scene;
});

// Show the frames per second
engine.showFPS();
index.html
<!doctype html>
<html lang="en">
  <head>    
    <meta charset="utf-8">
    <title>@oneisland/graphics</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Load the dependencies -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.8.1/gl-matrix-min.js" defer></script>

    <!-- Load the engine  -->
    <script src="./dist/bundle.js" defer></script>

    <!-- Define the cube data -->
    <script src="./cube.js" defer></script>

    <!-- Create an engine -->
    <script src="./engine.js" defer></script>

    <!-- Define the styling -->
    <style>
      html, body {
        width: 100vw;
        height: 100vh;
        padding: 0;
        margin: 0;
      }
      canvas {
        padding: 0;
        margin: 0;
      }
    </style>
  </head>
  <body>

    <!-- Define the element to bind the engine to -->
    <canvas id="engine"></canvas>
  </body>
</html>

View this example live

Documentation

Check out the full documentation

License

MIT

Copyright (c) 2021-present, OneIsland Limited

Package Sidebar

Install

npm i @oneisland/graphics

Weekly Downloads

1

Version

0.0.1

License

MIT

Unpacked Size

57.6 kB

Total Files

12

Last publish

Collaborators

  • danzlarkin