but0n / Ashes
Licence: mit
WebGL2.0 3D Engine & ECS & RayTracing
Stars: ✭ 191
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Ashes
Engine
Fast and lightweight JavaScript game engine built on WebGL and glTF
Stars: ✭ 6,890 (+3507.33%)
Mutual labels: game-engine, webgl, webgl2, gltf
Melonjs
a fresh & lightweight javascript game engine
Stars: ✭ 3,721 (+1848.17%)
Mutual labels: game-engine, webgl, webgl2
Babylon.js
Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework.
Stars: ✭ 15,479 (+8004.19%)
Mutual labels: game-engine, webgl, webgl2
webrays
WebRays - Ray Tracing on the Web
Stars: ✭ 38 (-80.1%)
Mutual labels: webgl, raytracing, webgl2
Minimal Gltf Loader
A minimal, engine-agnostic JavaScript glTF Loader.
Stars: ✭ 148 (-22.51%)
Mutual labels: webgl2, gltf
Aframe
🅰️ web framework for building virtual reality experiences.
Stars: ✭ 13,428 (+6930.37%)
Mutual labels: ecs, game-engine
Sketch
Explorations on cross-hatching, engraving, and similar non-photorealistic rendering.
Stars: ✭ 136 (-28.8%)
Mutual labels: webgl, webgl2
Retrace.gl
Create, ray trace & export programatically defined Signed Distance Function CSG geometries with an API suited for generative art - in your browser! 🎉
Stars: ✭ 149 (-21.99%)
Mutual labels: raytracing, webgl2
Mesh.js
A graphics system born for visualization 😘.
Stars: ✭ 156 (-18.32%)
Mutual labels: webgl, webgl2
Ego
A lightweight decision making library for game AI.
Stars: ✭ 145 (-24.08%)
Mutual labels: game-engine, webgl
Timechart
An chart library specialized for large-scale time-series data, built on WebGL.
Stars: ✭ 149 (-21.99%)
Mutual labels: webgl, webgl2
Engine
Oasis Engine is a web-first and mobile-first high-performance real-time development platform.
Stars: ✭ 2,202 (+1052.88%)
Mutual labels: webgl, webgl2
Twigl
twigl.app is an online editor for One tweet shader, with gif generator and sound shader, and broadcast live coding.
Stars: ✭ 145 (-24.08%)
Mutual labels: webgl, webgl2
Playcanvas Ar
Fast and Easy Augmented Reality for the Web 🚀
Stars: ✭ 172 (-9.95%)
Mutual labels: webgl, webgl2
Expo Voxel
🎮🌳 Voxel Terrain made in React Native. ∛
Stars: ✭ 169 (-11.52%)
Mutual labels: game-engine, webgl
Uecs
Ubpa Entity-Component-System (U ECS) in Unity3D-style
Stars: ✭ 174 (-8.9%)
Mutual labels: ecs, game-engine
- Press
k
to toggle render mode - Press
q
ande
to adjust aperture (depth of field) - Press
a
andd
to focal length
"Ferrari 330 P4" (https://skfb.ly/6TZTq) by Sunny is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).
Examples
Features
- Entity–component–system (ECS) architectural
- glTF support
- Physically based rendering (PBR)
- Post effects (WIP)
- Skeleton animation
- Keyframe animation
- HDR
Getting Started
- via CDN
<script src="https://cdn.jsdelivr.net/npm/ashes3d/build/ashes.main.js"></script>
- via npm
npm i ashes3d
Usage
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].