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
165 Stars 3 Forks MIT License 518 Commits 5 Opened issues

Description

WebGL2.0 3D Engine & ECS & RayTracing

Services available

!
?

Need anything else?

Contributors list

# 46,299
XML
Three.j...
kicad
freerto...
510 commits
# 2,818
unixpor...
Flutter
assembl...
spotify
1 commit
# 731
GitHub
Laravel
rust-la...
wechat-...
1 commit

image

Build Status

Ray Tracing demo

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.