https://github.com/but0n/ashes

WebGL2.0 3D Engine - Global Illumination - RayTracing
https://github.com/but0n/ashes

bvh ecs game-engine global-illumination gltf monte-carlo path-tracing pbr-shading raytracer raytracing webgl webgl2

Last synced: 2 days ago
JSON representation

WebGL2.0 3D Engine - Global Illumination - RayTracing

• Host: GitHub
• URL: https://github.com/but0n/ashes
• Owner: but0n
• License: mit
• Created: 2018-10-22T01:54:05.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2022-11-03T12:51:59.000Z (about 2 years ago)
• Last Synced: 2024-10-06T01:05:31.003Z (about 1 month ago)
• Topics: bvh, ecs, game-engine, global-illumination, gltf, monte-carlo, path-tracing, pbr-shading, raytracer, raytracing, webgl, webgl2
• Language: TypeScript
• Homepage: https://codepen.io/but0n/pen/jddYoX
• Size: 15.7 MB
• Stars: 329
• Watchers: 15
• Forks: 16
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    



![image](https://user-images.githubusercontent.com/7625588/101237212-04e26780-372b-11eb-81ee-c45f34aa3031.png)

[![Build Status](https://travis-ci.org/but0n/Ashes.svg?branch=master)](https://travis-ci.org/but0n/Ashes)

[![](https://badgen.net/bundlephobia/minzip/ashes3d)](https://bundlephobia.com/result?p=ashes3d)

[![](https://data.jsdelivr.com/v1/package/npm/ashes3d/badge)](https://www.jsdelivr.com/package/npm/ashes3d)

## [Dynamic GI](https://but0n.github.io/webgl-gi/)

![](https://user-images.githubusercontent.com/7625588/199723977-931991c0-88ca-479c-9c7a-abe6c2af3ab3.jpg)

![](https://user-images.githubusercontent.com/7625588/199723996-919da83c-5898-45b7-b6e6-74aefd062201.jpg)

## [Ray Tracing demo](https://but0n.github.io/Ashes/bvh.html)

![](https://user-images.githubusercontent.com/7625588/121191833-b0719d80-c8af-11eb-97c4-9eac6f8e3e8e.png)

 - Press `k` to toggle render mode

 - Press `q` and `e` to adjust aperture (depth of field)

 - Press `a` and `d` to focal length

 - Press `[` andd `]` to adjust exposure

## [glTF Example](https://but0n.github.io/Ashes/demo.html)

![](https://user-images.githubusercontent.com/7625588/87917315-231b3400-cab8-11ea-9742-afe57859490d.png)

![](https://user-images.githubusercontent.com/7625588/78468675-6f3aa680-775d-11ea-99e0-195d446d6798.png)

![](https://user-images.githubusercontent.com/7625588/67295473-c0d9d680-f519-11e9-96b8-72422af0a547.png)

# Examples

 - [glTF test](https://cx20.github.io/gltf-test/?engines=Ashes)

 - [Examples](https://cx20.github.io/jsdo.it-archives/tag/ashes/)

 - [Examples](https://jsfiddle.net/user/cx20/fiddles/)

# Features

![ezgif-4-e4c6f3cb3183](https://user-images.githubusercontent.com/7625588/58366099-db266e80-7eff-11e9-9d24-396a98895d7c.gif)

 - Entity–component–system (ECS) architectural

 - glTF support

 - Physically based rendering (PBR)

 - Post effects (WIP)

 - Skeleton animation

 - Keyframe animation

 - HDR

# Getting Started

- via CDN

```html

```

- via npm

```

npm i ashes3d

```

# Usage

[Try it](https://codepen.io/but0n/pen/daERdd)

```js

let { Asset, EntityMgr, Camera, vec3, quat, Screen, OrbitControl, MeshRenderer, Filter, Shader, Material, QuadMesh } = Ashes;

let CDN = 'https://but0n.github.io/Ashes/'

Material.SHADER_PATH = CDN + Material.SHADER_PATH;

// DamagedHelmet

let gltf = CDN + 'gltfsamples/DamagedHelmet.glb';

async function main() {

    let screen = new Screen('#screen');

    screen.bgColor = [0.2,0.2,0.2,1];

    let skybox = await Asset.loadCubemap(CDN + 'res/envmap/GoldenGateBridge2/');

    let scene = EntityMgr.create('root - (Click each bar which has yellow border to toggle visible)');

    // Camera

    let mainCamera = EntityMgr.create('camera');

    let cam = mainCamera.addComponent(new Camera(screen.width / screen.height));

    // Set default position

    let cameraTrans = mainCamera.components.Transform;

    vec3.set(cameraTrans.translate, 0, 10, 10);

    // Add it to scene

    scene.appendChild(mainCamera);

    // Attach controler

    mainCamera.addComponent(new OrbitControl(screen, mainCamera));

    document.querySelector('body').appendChild(scene);

    // Load a gltf model

    let gltfroot = await Asset.loadGLTF(gltf, screen, skybox);

    scene.appendChild(gltfroot);

}

main();

```

## Create a quad with texture

```js

    // Create an entity

    let quad = scene.appendChild(EntityMgr.create('quad'));

    // Load a material

    let quadMat = await Asset.LoadMaterial('stylize'); // PBR material

    // Load a texture

    let floor = await Asset.loadTexture(CDN + 'res/textures/floor.png', { minFilter: screen.gl.NEAREST_MIPMAP_NEAREST });

    floor.flipY = true;

    // Attach texture to material we created

    Material.setTexture(quadMat, 'baseColorTexture', floor);

    quadMat.shader.macros['HAS_BASECOLOR_MAP'] = '';

    // Create a renderer component

    let quadMR = new MeshRenderer(screen, new QuadMesh(), quadMat);

    // Attach renderer to entity

    quad.addComponent(quadMR);

    // Set local translate [x, y, z]

    quad.components.Transform.translate[1] = -1;

    // Set euler angle x, y, z

    quat.fromEuler(quad.components.Transform.quaternion, -90, 0, 0);

    // The original size of quad is 2x2

    vec3.scale(quad.components.Transform.scale, quad.components.Transform.scale, 9);

```

# Deployment

```sh

git clone --recursive https://github.com/but0n/Ashes.git

cd Ashes

# if you don't have yarn installed

npm install -g yarn

yarn

yarn dev

```