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 |
|
11 | <script src="build/ashes.main.js"></script>
|
12 | <script>
|
13 | let { Asset, EntityMgr, Camera, vec3, quat, Screen, OrbitControl, Filter, Shader, Material, QuadMesh, MeshRenderer, Texture } = Ashes;
|
14 |
|
15 |
|
16 |
|
17 |
|
18 |
|
19 | let assetRoot = ''
|
20 | Material.SHADER_PATH = assetRoot + Material.SHADER_PATH;
|
21 |
|
22 | let [,cuspath,scale, yoffset, threshold, radiu, intensity] = [,,,,];
|
23 |
|
24 |
|
25 | let gltf = assetRoot + 'gltfsamples/BoomBox.glb';
|
26 |
|
27 |
|
28 |
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 | gltf = assetRoot + 'gltfsamples/DamagedHelmet.glb';
|
36 | gltf = assetRoot + 'res/MorphPrimitivesTest.glb';
|
37 | gltf = assetRoot + 'res/project_polly.glb';
|
38 |
|
39 |
|
40 | scale = 1;
|
41 |
|
42 | async 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 |
|
48 |
|
49 |
|
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 |
|
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 |
|
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 |
|
84 |
|
85 |
|
86 | let quad = EntityMgr.create('quad');
|
87 |
|
88 | let quadMat = await Asset.LoadMaterial('stylize');
|
89 |
|
90 |
|
91 | let floor = new Texture();
|
92 | window['floor'] = floor;
|
93 |
|
94 |
|
95 |
|
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 |
|
107 |
|
108 |
|
109 |
|
110 |
|
111 | }
|
112 |
|
113 | let loading_vs = `
|
114 | attribute vec3 POSITION;
|
115 | attribute vec2 TEXCOORD_0;
|
116 |
|
117 | varying vec2 uv;
|
118 | varying vec4 pos;
|
119 |
|
120 | void main() {
|
121 | uv = TEXCOORD_0;
|
122 | vec4 position = vec4(POSITION, 1);
|
123 | pos = position;
|
124 | gl_Position = position;
|
125 | }
|
126 | `;
|
127 |
|
128 | let loading_fs = `
|
129 | precision mediump float;
|
130 | uniform sampler2D base;
|
131 | uniform float cur;
|
132 | uniform float powcur;
|
133 |
|
134 | varying vec2 uv;
|
135 | varying vec4 pos;
|
136 |
|
137 | void main() {
|
138 | vec4 base = texture2D(base, uv);
|
139 | float prog = abs(uv.y - 0.5) * 2.;
|
140 |
|
141 |
|
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 |
|
152 | class 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 |
|
181 | main();
|
182 |
|
183 |
|
184 |
|
185 | </script>
|
186 | </html> |
\ | No newline at end of file |