Rana

Introduction

The Next Generation WebGPU Engine

Browser Support

Recent versions of Firefox, Chrome, Edge, Opera and Safari. IE11+

Major features

• next-generation web 3d solution
• ES6 and CommonJS modules
• Tree shaking of ES6 modules
• Almost the best API to use on the market
• Sophisticated and elegant style design
• An API for JavaScript and Typescript

CDN Links

• https://cdn.jsdelivr.net/npm/rana/dist/index.umd.js

Install inside a NPM project

# npm
npm install rana

# yarn
yarn add rana

# pnpm
pnpm add rana

Use

Use individual components:

Here is a quick react example to get you started, it's all you need:

import { createBox, createSphere, vec3, createEngine, createScene, createPerspectiveCamera, createPointLight } from "../lib";
import { createGround } from "../lib/meshes";
import { scale, translate } from "../lib/transform";
import React,{ useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'rana-ui';

function App() {
  useEffect(() => {
    (async () => {
      const canvas = document.getElementById(
        "webgpu-canvas"
      ) as HTMLCanvasElement;

      if (!canvas) {
        console.error("canvas is not exist.");
      }

      const engine = createEngine(canvas);
      const scene = createScene(engine);

      const camera = createPerspectiveCamera(
        "c1",
        { target: vec3(0, 0, 1), position: vec3(0, 0, -1), up: vec3(0, 1, 0) },
        scene
      );


      const box = createBox("b", scene, {
        width: 2, height: 2, depth: 2
      });


      const light = createPointLight(
        "light1",
        { color: vec3(0, 0.4, 0), position: vec3(-1, -1, -1), intensity: 10, radius: 10 },
        scene
      );

      await engine.loop(() => {
        box.transform = translate(-0.02, 0, 0).mul(box.transform)
        scene.render();
      });
    })();
  }, []);

  return <canvas
          id="webgpu-canvas"
          width="512"
          height="512
        ."
        ></canvas>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

License

This project is licensed under the terms of the MIT license.