!image


Ray Tracing demo

- 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


Examples

- glTF test
- Examples
- Examples

Features

!ezgif-4-e4c6f3cb3183

- 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

`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
``