Need help with Ashes?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

but0n
202 Stars 6 Forks MIT License 541 Commits 7 Opened issues

Description

WebGL2.0 3D Engine - RayTracing

Services available

!
?

Need anything else?

Contributors list

# 32,325
XML
pcb-lay...
kicad
node
528 commits
# 2,425
assembl...
spotify
gc
Rust
1 commit
# 801
GitHub
wechat-...
query-l...
vanilla...
1 commit

image

Build Status

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

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

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

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

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.