0.0.5 • Published 1 year ago

rana v0.0.5

Weekly downloads
-
License
-
Repository
github
Last release
1 year ago

license npm latest package npm next package npm downloads Coverage Status Renovate status Average time to resolve an issue Crowdin

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

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.

0.0.3

1 year ago

0.0.2

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.1

2 years ago

2.0.0

2 years ago

1.0.0

3 years ago

0.0.0

3 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.0

4 years ago

0.2.1

4 years ago

0.2.0

4 years ago

0.1.0

4 years ago