let{ Asset, EntityMgr, Camera, vec3, quat, Screen, OrbitControl, MeshRenderer, Filter, Shader, Material, QuadMesh }=Ashes;letCDN='https://but0n.github.io/Ashes/'Material.SHADER_PATH=CDN+Material.SHADER_PATH;// DamagedHelmetletgltf=CDN+'gltfsamples/DamagedHelmet.glb';asyncfunctionmain(){letscreen=newScreen('#screen');screen.bgColor=[0.2,0.2,0.2,1];letskybox=awaitAsset.loadCubemap(CDN+'res/envmap/GoldenGateBridge2/');letscene=EntityMgr.create('root - (Click each bar which has yellow border to toggle visible)');// CameraletmainCamera=EntityMgr.create('camera');letcam=mainCamera.addComponent(newCamera(screen.width/screen.height));// Set default positionletcameraTrans=mainCamera.components.Transform;vec3.set(cameraTrans.translate,0,10,10);// Add it to scenescene.appendChild(mainCamera);// Attach controlermainCamera.addComponent(newOrbitControl(screen,mainCamera));document.querySelector('body').appendChild(scene);// Load a gltf modelletgltfroot=awaitAsset.loadGLTF(gltf,screen,skybox);scene.appendChild(gltfroot);}main();
Create a quad with texture
// Create an entityletquad=scene.appendChild(EntityMgr.create('quad'));// Load a materialletquadMat=awaitAsset.LoadMaterial('stylize');// PBR material// Load a textureletfloor=awaitAsset.loadTexture(CDN+'res/textures/floor.png',{minFilter: screen.gl.NEAREST_MIPMAP_NEAREST});floor.flipY=true;// Attach texture to material we createdMaterial.setTexture(quadMat,'baseColorTexture',floor);quadMat.shader.macros['HAS_BASECOLOR_MAP']='';// Create a renderer componentletquadMR=newMeshRenderer(screen,newQuadMesh(),quadMat);// Attach renderer to entityquad.addComponent(quadMR);// Set local translate [x, y, z]quad.components.Transform.translate[1]=-1;// Set euler angle x, y, zquat.fromEuler(quad.components.Transform.quaternion,-90,0,0);// The original size of quad is 2x2vec3.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
I got Ashes v0.0.45 from jsDelivr and tried it locally. As a model, I tried Triangle.gltf, Box.gltf etc.
However, the following error was output to the console and it was not displayed.
ashes.main.js:4356
Uncaught (in promise) TypeError: Cannot read property '0' of undefined
at Function.preComputeTangent (ashes.main.js:4356)
at mesh.primitives.map.meshData (ashes.main.js:5500)
at Array.map (<anonymous>)
at gltf.meshes.gltf.meshes.map.mesh (ashes.main.js:5485)
at Array.map (<anonymous>)
at new gltfScene (ashes.main.js:5484)
at Function.<anonymous> (ashes.main.js:5825)
at Generator.next (<anonymous>)
at fulfilled (ashes.main.js:5198)
Perhaps it seems that it is in error because uv is undefined.
I think that it was not an error in the previous version v.0.0.44.
I know that VC.gltf and project_polly.gltf have cool cameras built in them.
However, I do not know how to use them in this library.
Can you add samples if possible?
I tried to display several glTF models using Ashes.
However, it seems that you can not display models in glTF Embedded format.
The following is a sample that could not be displayed because of a format problem.
I tried to display Duck.gltf in Ashes v0.2.3.
However, the following error seems to be displayed.
ashes.main.js:4313 Uncaught (in promise) TypeError: Cannot read property 'NORMAL' of undefined
at Function.bindAccessorsVBO (ashes.main.js:4313)
at Function.updateVAO (ashes.main.js:5060)
at Function.attachMaterial (ashes.main.js:5044)
at new MeshRenderer (ashes.main.js:4966)
at Function.<anonymous> (ashes.main.js:6061)
at Generator.next (<anonymous>)
at fulfilled (ashes.main.js:5301)
I tried to display Duck.gltf in Ashes v0.2.4.
However, there seems to be another problem. The console outputs a WebGL warning and the duck appears and disappears every few seconds.
ashes.main.js:5270 Uncaught (in promise) TypeError: Cannot read property 'map' of undefined
at Function.<anonymous> (ashes.main.js:5270)
at Generator.next (<anonymous>)
at fulfilled (ashes.main.js:860)
I think that it is probably failing to display about models that do not have textures.
I tried to display the glTF file output from Three.js glTF Exporter with Ashes.
However, Ashes does not seem to be able to display that model.
Perhaps I think that Ashes does not correspond to the glTF model without Indices.
I tried to display a triangle without using glTF in Ashes.
It is now displayed, but I am not confident in the code.
I would be happy if you can check if there is any problem with usage.