UNPKG

4.24 kBHTMLView Raw
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<!-- <script src="build/ashes.main.js"></script> -->
13<script>
14 let { Asset, EntityMgr, Camera, vec3, Screen, OrbitControl, Filter, Shader, Material } = Ashes;
15
16
17
18
19 // let assetRoot = 'https://but0n.github.io/Ashes/'
20 let assetRoot = ''
21 Material.SHADER_PATH = assetRoot + Material.SHADER_PATH;
22
23 let [, cuspath, scale, yoffset, threshold, radiu, intensity] = [, , , ,];
24
25 // BoomBox
26 let gltf = assetRoot + 'gltfsamples/BoomBox.glb';
27
28 // kgirls01: Skin, Animation:
29 // ----------------------------
30 scale = 0.003;
31 yoffset = 3;
32 // threshold = 0.9;
33 gltf = assetRoot + 'gltfsamples/kgirls01/scene.gltf';
34 gltf = assetRoot + 'res/CesiumMan.glb';
35 // gltf = assetRoot + 'res/BrainStem.glb';
36 // gltf = assetRoot + 'res/project_polly.glb';
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 // Filters
46 // Bloom.initFilters(screen, threshold || 0.6, radiu || 80, intensity || 1.2);
47 // screen.attachFilter(new Vignetting(screen));
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 // Camera and controls
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 // scene.appendChild(await Asset.loadGLTF(assetRoot + 'res/BrainStem.glb', screen, skybox));
81
82
83
84 }
85
86 let loading_vs = `
87attribute vec3 POSITION;
88attribute vec2 TEXCOORD_0;
89
90varying vec2 uv;
91varying vec4 pos;
92
93void 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 = `
102precision mediump float;
103uniform sampler2D base;
104uniform float cur;
105uniform float powcur;
106
107varying vec2 uv;
108varying vec4 pos;
109
110void main() {
111 vec4 base = texture2D(base, uv);
112 float prog = abs(uv.y - 0.5) * 2.;
113
114 // Middle out
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
125class 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