WebGL2.0 3D Engine & ECS & RayTracing
html
npm i ashes3d
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 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);
git clone --recursive https://github.com/but0n/Ashes.git cd Ashesif you don't have yarn installed
npm install -g yarn
yarn
yarn dev