UNPKG

5.68 kBHTMLView Raw
1<!DOCTYPE html>
2<html>
3 <head>
4 <link rel="stylesheet" type="text/css" href="res/css/main.css" />
5 </head>
6
7<body>
8 <canvas id="screen"></canvas>
9</body>
10 <!-- <script src="https://cdn.jsdelivr.net/npm/ashes3d@0.0.46/build/ashes.main.js"></script> -->
11 <script src="build/ashes.main.js"></script>
12 <script>
13let { Asset, EntityMgr, Camera, vec3, quat, Screen, OrbitControl, Filter, Shader, Material, QuadMesh, MeshRenderer, Texture } = Ashes;
14
15
16
17
18// let assetRoot = 'https://but0n.github.io/Ashes/'
19let assetRoot = ''
20Material.SHADER_PATH = assetRoot + Material.SHADER_PATH;
21
22let [,cuspath,scale, yoffset, threshold, radiu, intensity] = [,,,,];
23
24// BoomBox
25let gltf = assetRoot + 'gltfsamples/BoomBox.glb';
26
27// kgirls01: Skin, Animation:
28// ----------------------------
29// scale = 0.003;
30// yoffset = 3;
31// threshold = 0.9;
32// gltf = assetRoot + 'gltfsamples/kgirls01/scene.gltf';
33// gltf = assetRoot + 'res/CesiumMan.glb';
34// gltf = assetRoot + 'res/BrainStem.glb';
35gltf = assetRoot + 'gltfsamples/DamagedHelmet.glb';
36gltf = assetRoot + 'res/MorphPrimitivesTest.glb';
37gltf = assetRoot + 'res/project_polly.glb';
38// gltf = assetRoot + 'res/CesiumMan.gltf';
39// gltf = assetRoot + 'gltfsamples/Suzanne/Suzanne.gltf';
40scale = 1;
41
42async function main() {
43
44 let screen = new Screen('#screen');
45 screen.bgColor = [0.2,0.2,0.2, 1];
46 screen.bgColor = [0.9,0.9,0.9,1];
47 // Filters
48 // Bloom.initFilters(screen, threshold || 0.6, radiu || 80, intensity || 1.2);
49 // screen.attachFilter(new Vignetting(screen));
50
51 let loading = new loadingAnim(screen);
52 loading.cb = () => {
53 screen.deleteFilter(0);
54 console.log('delete');
55 }
56 screen.attachFilter(loading);
57 Asset.taskObserve = (finished, total) => {
58 let p = finished / total;
59 loading.cur = p;
60 }
61
62
63 let skybox = await Asset.loadCubemap(assetRoot + 'res/envmap/GoldenGateBridge2/');
64
65 let scene = EntityMgr.create('root - (Click each bar which has yellow border to toggle visible)');
66
67 // Camera and controls
68 let mainCamera = scene.appendChild(EntityMgr.create('camera'));
69 let cameraTrans = mainCamera.components.Transform;
70 let cam = EntityMgr.addComponent(mainCamera, new Camera(screen.width / screen.height));
71 vec3.set(cameraTrans.translate, 0, 0, 0.1);
72
73 EntityMgr.addComponent(mainCamera, new OrbitControl(screen, mainCamera));
74 // screen.mainCamera = cam;
75
76 document.querySelector('body').appendChild(scene);
77
78 let gltfroot = scene.appendChild(await Asset.loadGLTF(gltf, screen, skybox));
79 let root = gltfroot.components.Transform;
80 root.translate[1] = yoffset || 0;
81 vec3.scale(root.scale, root.scale, scale || 200)
82
83 // scene.appendChild(await Asset.loadGLTF(assetRoot + 'res/BrainStem.glb', screen, skybox));
84
85 // The original size of quad is 2x2
86 let quad = EntityMgr.create('quad');
87
88 let quadMat = await Asset.LoadMaterial('stylize');
89 // let floor = await Asset.loadTexture('res/textures/floor.png', { minFilter: screen.gl.NEAREST_MIPMAP_NEAREST });
90 // floor.flipY = true;
91 let floor = new Texture();
92 window['floor'] = floor;
93 // floor.data = new Uint8Array(4 * 256 * 256);
94 // for (let i = 0; i < 256 * 256; i++) {
95 // floor.data.set([Math.random() * 256, Math.random() * 256, Math.random() * 256, 256], i * 4);
96 // }
97 floor.data = Texture.defaultData;
98 Material.setTexture(quadMat, 'baseColorTexture', floor);
99 quadMat.shader.macros['HAS_BASECOLOR_MAP'] = '';
100
101 let quadMR = new MeshRenderer(screen, new QuadMesh(), quadMat);
102 EntityMgr.addComponent(quad, quadMR);
103 quat.fromEuler(quad.components.Transform.quaternion, -90, 0, 0);
104 vec3.scale(quad.components.Transform.scale, quad.components.Transform.scale, 0.2);
105
106 // let target = document.querySelectorAll('[data-name=_MovingCamera]')[0];
107 // mainCamera.remove();
108 // target.appendChild(mainCamera);
109 // target.appendChild(EntityMgr.clone(quad));
110 // scene.appendChild(mainCamera);
111}
112
113let loading_vs = `
114attribute vec3 POSITION;
115attribute vec2 TEXCOORD_0;
116
117varying vec2 uv;
118varying vec4 pos;
119
120void main() {
121 uv = TEXCOORD_0;
122 vec4 position = vec4(POSITION, 1);
123 pos = position;
124 gl_Position = position;
125}
126`;
127
128let loading_fs = `
129precision mediump float;
130uniform sampler2D base;
131uniform float cur;
132uniform float powcur;
133
134varying vec2 uv;
135varying vec4 pos;
136
137void main() {
138 vec4 base = texture2D(base, uv);
139 float prog = abs(uv.y - 0.5) * 2.;
140
141 // Middle out
142
143
144 if(cur < prog) {
145 gl_FragColor = vec4(1);
146 } else {
147 gl_FragColor = vec4(base.rgb * powcur, base.a);
148 }
149}
150`;
151
152class loadingAnim extends Filter {
153
154 constructor(screen) {
155 let macro = {};
156
157 let shader = new Shader(loading_vs, loading_fs, macro);
158 super(screen, shader);
159 this.cur = 0;
160 this.stop = false;
161 let cur = 0;
162 Material.setUniform(this.material, 'cur', this.cur);
163 let loop = () => {
164 cur += (this.cur - cur) * 0.05;
165 Material.setUniform(this.material, 'cur', cur);
166 Material.setUniform(this.material, 'powcur', Math.pow(cur, 8));
167 if (cur < 0.999) {
168 requestAnimationFrame(loop);
169 } else {
170 Material.setUniform(this.material, 'cur', 1);
171 Material.setUniform(this.material, 'powcur', 1);
172 if (this.cb) this.cb();
173 }
174 };
175 loop();
176 }
177}
178
179
180
181main();
182
183
184
185 </script>
186</html>
\No newline at end of file