1 | <!DOCTYPE html>
|
2 | <html>
|
3 |
|
4 | <head>
|
5 | <link rel="stylesheet" type="text/css" href="res/css/main.css" />
|
6 | </head>
|
7 |
|
8 | <body>
|
9 | <canvas id="screen"></canvas>
|
10 | </body>
|
11 | <script src="https://cdn.jsdelivr.net/npm/ashes3d@0.0.46/build/ashes.main.js"></script>
|
12 |
|
13 | <script>
|
14 | let { Asset, EntityMgr, Camera, vec3, Screen, OrbitControl, Filter, Shader, Material } = Ashes;
|
15 |
|
16 |
|
17 |
|
18 |
|
19 |
|
20 | let assetRoot = ''
|
21 | Material.SHADER_PATH = assetRoot + Material.SHADER_PATH;
|
22 |
|
23 | let [, cuspath, scale, yoffset, threshold, radiu, intensity] = [, , , ,];
|
24 |
|
25 |
|
26 | let gltf = assetRoot + 'gltfsamples/BoomBox.glb';
|
27 |
|
28 |
|
29 |
|
30 | scale = 0.003;
|
31 | yoffset = 3;
|
32 |
|
33 | gltf = assetRoot + 'gltfsamples/kgirls01/scene.gltf';
|
34 | gltf = assetRoot + 'res/CesiumMan.glb';
|
35 |
|
36 |
|
37 | gltf = assetRoot + 'gltfsamples/3_seconds_of_vacations/scene.gltf';
|
38 | scale = 1;
|
39 | yoffset = 0.1;
|
40 |
|
41 | async function main() {
|
42 |
|
43 | let screen = new Screen('#screen');
|
44 | screen.bgColor = [0.2, 0.2, 0.2, 1];
|
45 |
|
46 |
|
47 |
|
48 |
|
49 | let loading = new loadingAnim(screen);
|
50 | loading.cb = () => {
|
51 | screen.deleteFilter(0);
|
52 | console.log('delete');
|
53 | }
|
54 | screen.attachFilter(loading);
|
55 | Asset.taskObserve = (finished, total) => {
|
56 | let p = finished / total;
|
57 | loading.cur = p;
|
58 | }
|
59 |
|
60 |
|
61 | let skybox = await Asset.loadCubemap(assetRoot + 'res/envmap/GoldenGateBridge2/');
|
62 |
|
63 | let scene = EntityMgr.create('root - (Click each bar which has yellow border to toggle visible)');
|
64 |
|
65 |
|
66 | let mainCamera = scene.appendChild(EntityMgr.create('camera'));
|
67 | let cameraTrans = mainCamera.components.Transform;
|
68 | let cam = EntityMgr.addComponent(mainCamera, new Camera(screen.width / screen.height));
|
69 | vec3.set(cameraTrans.translate, 0, 10, 10);
|
70 |
|
71 | EntityMgr.addComponent(mainCamera, new OrbitControl(screen, mainCamera));
|
72 |
|
73 | document.querySelector('body').appendChild(scene);
|
74 |
|
75 | let gltfroot = scene.appendChild(await Asset.loadGLTF(gltf, screen, skybox));
|
76 | let root = gltfroot.components.Transform;
|
77 | root.translate[1] = yoffset || 0;
|
78 | vec3.scale(root.scale, root.scale, scale || 200)
|
79 |
|
80 |
|
81 |
|
82 |
|
83 |
|
84 | }
|
85 |
|
86 | let loading_vs = `
|
87 | attribute vec3 POSITION;
|
88 | attribute vec2 TEXCOORD_0;
|
89 |
|
90 | varying vec2 uv;
|
91 | varying vec4 pos;
|
92 |
|
93 | void main() {
|
94 | uv = TEXCOORD_0;
|
95 | vec4 position = vec4(POSITION, 1);
|
96 | pos = position;
|
97 | gl_Position = position;
|
98 | }
|
99 | `;
|
100 |
|
101 | let loading_fs = `
|
102 | precision mediump float;
|
103 | uniform sampler2D base;
|
104 | uniform float cur;
|
105 | uniform float powcur;
|
106 |
|
107 | varying vec2 uv;
|
108 | varying vec4 pos;
|
109 |
|
110 | void main() {
|
111 | vec4 base = texture2D(base, uv);
|
112 | float prog = abs(uv.y - 0.5) * 2.;
|
113 |
|
114 |
|
115 |
|
116 |
|
117 | if(cur < prog) {
|
118 | gl_FragColor = vec4(1);
|
119 | } else {
|
120 | gl_FragColor = vec4(base.rgb * powcur, base.a);
|
121 | }
|
122 | }
|
123 | `;
|
124 |
|
125 | class loadingAnim extends Filter {
|
126 |
|
127 | constructor(screen) {
|
128 | let macro = {};
|
129 |
|
130 | let shader = new Shader(loading_vs, loading_fs, macro);
|
131 | super(screen, shader);
|
132 | this.cur = 0;
|
133 | this.stop = false;
|
134 | let cur = 0;
|
135 | Material.setUniform(this.material, 'cur', this.cur);
|
136 | let loop = () => {
|
137 | cur += (this.cur - cur) * 0.05;
|
138 | Material.setUniform(this.material, 'cur', cur);
|
139 | Material.setUniform(this.material, 'powcur', Math.pow(cur, 8));
|
140 | if (cur < 0.999) {
|
141 | requestAnimationFrame(loop);
|
142 | } else {
|
143 | Material.setUniform(this.material, 'cur', 1);
|
144 | Material.setUniform(this.material, 'powcur', 1);
|
145 | if (this.cb) this.cb();
|
146 | }
|
147 | };
|
148 | loop();
|
149 | }
|
150 | }
|
151 |
|
152 |
|
153 | main();
|
154 |
|
155 |
|
156 |
|
157 | </script>
|
158 |
|
159 | </html> |
\ | No newline at end of file |