feat: 点光源重构

2025-01-31 23:29:27 +08:00 · 2024-04-30 12:27:20 +08:00 · 2024-04-30 12:27:20 +08:00 · 6417d9218b
commit 6417d9218b
parent 8dba57e222
15 changed files with 3218 additions and 84 deletions
--- a/.prettierignore
+++ b/.prettierignore
@ -9,4 +9,6 @@ public/_server/**/*.js
 script/**/*.js
 public/editor.html
 keyCodes.ts
-src/core/main/setting.ts
+src/core/main/setting.ts
+src/core/fx/shadow.ts
+src/core/fx/shadow_upload.js
--- a/package.json
+++ b/package.json
@ -21,11 +21,12 @@
    "ant-design-vue": "^3.2.20",
    "axios": "^1.5.0",
    "chart.js": "^4.4.0",
+    "gl-matrix": "^3.4.3",
    "jszip": "^3.10.1",
    "lodash-es": "^4.17.21",
    "lz-string": "^1.5.0",
    "mutate-animate": "^1.3.3",
-    "three": "^0.149.0",
+    "pixi.js": "^8.1.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -23,6 +23,9 @@ dependencies:
  chart.js:
    specifier: ^4.4.0
    version: 4.4.0
+  gl-matrix:
+    specifier: ^3.4.3
+    version: 3.4.3
  jszip:
    specifier: ^3.10.1
    version: 3.10.1
@ -35,9 +38,9 @@ dependencies:
  mutate-animate:
    specifier: ^1.3.3
    version: 1.3.3
-  three:
-    specifier: ^0.149.0
-    version: 0.149.0
+  pixi.js:
+    specifier: ^8.1.0
+    version: 8.1.0
  vue:
    specifier: ^3.3.4
    version: 3.3.4
@ -2181,6 +2184,10 @@ packages:
      semver: 7.5.4
    dev: true

+  /@pixi/colord@2.9.6:
+    resolution: {integrity: sha512-nezytU2pw587fQstUu1AsJZDVEynjskwOL+kibwcdxsMBFqPsFFNA7xl0ii/gXuDi6M0xj3mfRJj8pBSc2jCfA==}
+    dev: false
+
  /@pkgjs/parseargs@0.11.0:
    resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
    engines: {node: '>=14'}
@ -2364,6 +2371,14 @@ packages:
      '@babel/types': 7.22.15
    dev: true

+  /@types/css-font-loading-module@0.0.12:
+    resolution: {integrity: sha512-x2tZZYkSxXqWvTDgveSynfjq/T2HyiZHXb00j/+gy19yp70PHCizM48XFdjBCWH7eHBD0R5i/pw9yMBP/BH5uA==}
+    dev: false
+
+  /@types/earcut@2.1.4:
+    resolution: {integrity: sha512-qp3m9PPz4gULB9MhjGID7wpo3gJ4bTGXm7ltNDsmOvsPduTeHp8wSW9YckBj3mljeOh4F0m2z/0JKAALRKbmLQ==}
+    dev: false
+
  /@types/estree@1.0.1:
    resolution: {integrity: sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==}
    dev: true
@ -2634,10 +2649,13 @@ packages:
      - vue
    dev: false

+  /@webgpu/types@0.1.40:
+    resolution: {integrity: sha512-/BBkHLS6/eQjyWhY2H7Dx5DHcVrS2ICj9owvSRdgtQT6KcafLZA86tPze0xAOsd4FbsYKCUBUQyNi87q7gV7kw==}
+    dev: false
+
  /@xmldom/xmldom@0.8.10:
    resolution: {integrity: sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==}
    engines: {node: '>=10.0.0'}
-    dev: true

  /abbrev@1.1.1:
    resolution: {integrity: sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==}
@ -3357,6 +3375,10 @@ packages:
      stream-shift: 1.0.1
    dev: true

+  /earcut@2.2.4:
+    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
+    dev: false
+
  /eastasianwidth@0.2.0:
    resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
    dev: true
@ -3466,6 +3488,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /eventemitter3@5.0.1:
+    resolution: {integrity: sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==}
+    dev: false
+
  /exponential-backoff@3.1.1:
    resolution: {integrity: sha512-dX7e/LHVJ6W3DE1MHWi9S1EYzDESENfLrYohG2G++ovZrYOkm4Knwa0mc1cn84xJOR4KEU0WSchhLbd0UklbHw==}
    dev: true
@ -3696,6 +3722,10 @@ packages:
    engines: {node: '>=12'}
    dev: true

+  /gl-matrix@3.4.3:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+    dev: false
+
  /glob-parent@3.1.0:
    resolution: {integrity: sha512-E8Ak/2+dZY6fnzlR7+ueWvhsH1SjHr4jjss4YS/h4py44jY9MhK/VFdaZJAWDz6BbL21KeteKxFSFpq8OS5gVA==}
    dependencies:
@ -4069,6 +4099,10 @@ packages:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
    dev: true

+  /ismobilejs@1.1.1:
+    resolution: {integrity: sha512-VaFW53yt8QO61k2WJui0dHf4SlL8lxBofUuUmwBo0ljPk0Drz2TiuDW4jo3wDcv41qy/SxrJ+VAzJ/qYqsmzRw==}
+    dev: false
+
  /jackspeak@2.3.3:
    resolution: {integrity: sha512-R2bUw+kVZFS/h1AZqBKrSgDmdmjApzgY0AlCPumopFiAlbUxE2gf+SCuBzQ0cP5hHmUmFYF5yw55T97Th5Kstg==}
    engines: {node: '>=14'}
@ -4651,6 +4685,10 @@ packages:
    engines: {node: '>= 0.10'}
    dev: true

+  /parse-svg-path@0.1.2:
+    resolution: {integrity: sha512-JyPSBnkTJ0AI8GGJLfMXvKq42cj5c006fnLz6fXy6zfoVjJizi8BNTpu8on8ziI1cKy9d9DGNuY17Ce7wuejpQ==}
+    dev: false
+
  /path-dirname@1.0.2:
    resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==}
    dev: true
@ -4703,6 +4741,20 @@ packages:
    engines: {node: '>=6'}
    dev: true

+  /pixi.js@8.1.0:
+    resolution: {integrity: sha512-qclFipWxKavNZoOE0QjGgEklbxjc1mpHf46adsxYLz7O7RnV44PPkq1J5Ssa6y1JxtYUX0fwbphoE/gz276glA==}
+    dependencies:
+      '@pixi/colord': 2.9.6
+      '@types/css-font-loading-module': 0.0.12
+      '@types/earcut': 2.1.4
+      '@webgpu/types': 0.1.40
+      '@xmldom/xmldom': 0.8.10
+      earcut: 2.2.4
+      eventemitter3: 5.0.1
+      ismobilejs: 1.1.1
+      parse-svg-path: 0.1.2
+    dev: false
+
  /postcss-attribute-case-insensitive@6.0.3(postcss@8.4.29):
    resolution: {integrity: sha512-KHkmCILThWBRtg+Jn1owTnHPnFit4OkqS+eKiGEOPIGke54DCeYGJ6r0Fx/HjfE9M9kznApCLcU0DvnPchazMQ==}
    engines: {node: ^14 || ^16 || >=18}
@ -5596,10 +5648,6 @@ packages:
      source-map-support: 0.5.21
    dev: true

-  /three@0.149.0:
-    resolution: {integrity: sha512-tohpUxPDht0qExRLDTM8sjRLc5d9STURNrdnK3w9A+V4pxaTBfKWWT/IqtiLfg23Vfc3Z+ImNfvRw1/0CtxrkQ==}
-    dev: false
-
  /through2-filter@3.0.0:
    resolution: {integrity: sha512-jaRjI2WxN3W1V8/FMZ9HKIBXixtiqs3SQSX4/YGIiP3gL6djW48VoZq9tDqeCWs3MT8YY5wb/zli8VW8snY1CA==}
    dependencies:
--- a/public/project/floors/MT50.js
+++ b/public/project/floors/MT50.js
@ -28,11 +28,10 @@ main.floors.MT50=
            }
        ],
        "5,13": [
-            "欢迎来到苍蓝之殿，这是本塔第二章里面最大的一个区，也是最复杂的一个区。整个苍蓝之殿分为无个部分：左下角、右下角、左上角、右上角和中心，每个部分都有不一样的玩法，多多动脑哦。",
-            "本地图往上走会有一个商店，记得查看"
+            "欢迎来到苍蓝之殿，这是本塔第二章里面最大的一个区，也是最复杂的一个区。整个苍蓝之殿分为无个部分：左下角、右下角、左上角、右上角和中心，每个部分都有不一样的玩法，多多动脑哦。"
        ],
        "9,13": [
-            "在你刚进入苍蓝之殿时，你只能先前往左下角部分（本地图的左面），右下角暂时不能前往。"
+            "在你刚进入苍蓝之殿时，你只能先前往左下角部分（本地图的左面），右下角暂时不能前往。注意往上走往左依然可以进入左下角，不要只盯着这个地图的左边不放。"
        ],
        "9,1": [
            "建议优先点出学习技能，对于特定场景将会非常有帮助",
--- a/public/project/floors/MT51.js
+++ b/public/project/floors/MT51.js
@ -31,6 +31,13 @@ main.floors.MT51=
                14,
                8
            ]
+        },
+        "7,0": {
+            "floorId": "MT53",
+            "loc": [
+                7,
+                14
+            ]
        }
    },
    "beforeBattle": {},
--- a/public/project/floors/MT53.js
+++ b/public/project/floors/MT53.js
@ -1,45 +1,65 @@
 main.floors.MT53=
 {
-"floorId": "MT53",
-"title": "苍蓝之殿-左下",
-"name": "53",
-"width": 15,
-"height": 15,
-"canFlyTo": true,
-"canFlyFrom": true,
-"canUseQuickShop": true,
-"cannotViewMap": false,
-"images": [],
-"ratio": 8,
-"defaultGround": "T650",
-"bgm": "palaceSouth.mp3",
-"firstArrive": [],
-"eachArrive": [],
-"parallelDo": "",
-"events": {},
-"changeFloor": {},
-"beforeBattle": {},
-"afterBattle": {},
-"afterGetItem": {},
-"afterOpenDoor": {},
-"autoEvent": {},
-"cannotMove": {},
-"cannotMoveIn": {},
-"map": [
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0],
-    [  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0,  0]
+    "floorId": "MT53",
+    "title": "苍蓝之殿-左下",
+    "name": "53",
+    "width": 15,
+    "height": 15,
+    "canFlyTo": true,
+    "canFlyFrom": true,
+    "canUseQuickShop": true,
+    "cannotViewMap": false,
+    "images": [],
+    "ratio": 8,
+    "defaultGround": "T650",
+    "bgm": "palaceSouth.mp3",
+    "firstArrive": [],
+    "eachArrive": [],
+    "parallelDo": "",
+    "events": {},
+    "changeFloor": {
+        "7,14": {
+            "floorId": "MT51",
+            "loc": [
+                7,
+                0
+            ]
+        }
+    },
+    "beforeBattle": {},
+    "afterBattle": {},
+    "afterGetItem": {},
+    "afterOpenDoor": {},
+    "autoEvent": {},
+    "cannotMove": {},
+    "cannotMoveIn": {},
+    "map": [
+    [648,648,648,648,648,648,648,648,648,648,648,648,648,648,648],
+    [648,656,  0,219,648,  0,  0,  0,243,  0,  0,492,482,482,648],
+    [648,  0,648,  0,648,648,648,578,648,648,656,648,648,648,648],
+    [648,  0,648,  0,648,  0,  0,  0,648,  0,  0,648,  0,  0,648],
+    [648,  0,648,563,492,  0,  0,  0,648,  0,  0,240,  0,  0,648],
+    [648,  0,648,648,648,648,494,648,648,219,648,648,648,648,648],
+    [648,  0,578,  0,648,403,  0,484,648,  0,  0,648,  0,  0,648],
+    [ 92,  0,648,  0,648,  0, 21,  0,648,  0,  0,220,  0,  0, 94],
+    [648,648,648,  0,648,376,  0,378,648,  0,  0,648,  0,  0,648],
+    [648,  0,648,  0,648,648,249,648,648,219,648,648,648,648,648],
+    [648,  0,648,  0,  0,596,  0,  0,648,  0,  0,539,  0,  0,648],
+    [648,  0,243,  0,  0,648,  0,  0,648,  0,  0,648,  0,  0,648],
+    [648,601,648,648,648,648,243,648,648,648,539,648,  0,  0,648],
+    [648,  0,  0,  0,  0,648,  0,  0,  0,  0,  0,656,  0,  0,648],
+    [648,648,648,648,648,648,648, 93,648,648,648,648,648,648,648]
 ],
+    "bgmap": [
+
+],
+    "fgmap": [
+
+],
+    "bg2map": [
+
+],
+    "fg2map": [
+
+]
 }
--- a/src/core/audio/bgm.ts
+++ b/src/core/audio/bgm.ts
@ -82,6 +82,8 @@ export class BgmController
        if (!this.disable) {
            this.setTransitionAnimate(id, 1, when);
            if (this.now) this.setTransitionAnimate(this.now, 0);
+        } else {
+            this.playing = false;
        }

        if (!noStack) {
@ -134,6 +136,8 @@ export class BgmController
        if (!this.disable) {
            if (transition) this.setTransitionAnimate(this.now, 1);
            else this.get(this.now).play();
+        } else {
+            this.playing = false;
        }
    }

@ -171,6 +175,8 @@ export class BgmController
                this.redoStack = [];
            }
            this.now = id;
+        } else {
+            this.playing = false;
        }
    }

--- a/src/core/fx/shadow.ts
+++ b/src/core/fx/shadow.ts
--- a/src/core/fx/shadow_upload.js
+++ b/src/core/fx/shadow_upload.js
--- a/src/core/fx/webgl.ts
+++ b/src/core/fx/webgl.ts
@ -0,0 +1,298 @@
+import { ensureArray, tip } from '@/plugin/utils';
+import { sleep } from 'mutate-animate';
+import { logger } from '../common/logger';
+
+const { gl, gl2 } = checkSupport();
+
+function checkSupport() {
+    const canvas = document.createElement('canvas');
+    const canvas2 = document.createElement('canvas');
+    const gl = canvas.getContext('webgl');
+    const gl2 = canvas2.getContext('webgl2');
+    if (!gl) {
+        sleep(3000).then(() => {
+            tip(
+                'warning',
+                `您的浏览器不支持WebGL，大部分特效将会无法显示，建议使用新版浏览器`
+            );
+        });
+    }
+    if (!gl2) {
+        sleep(3000).then(() => {
+            tip(
+                'warning',
+                `您的浏览器不支持WebGL2，一部分特效将会无法显示，建议使用新版浏览器`
+            );
+        });
+    }
+    return { gl: !!gl, gl2: !!gl2 };
+}
+
+export function isWebGLSupported() {
+    return gl;
+}
+
+export function isWebGL2Supported() {
+    return gl2;
+}
+
+export type WebGLColorArray = [number, number, number, number];
+
+interface WebGLShaderInfo {
+    vertex: WebGLShader;
+    fragment: WebGLShader;
+}
+
+type UniformBinderNum = 1 | 2 | 3 | 4;
+type UniformBinderType = 'f' | 'i';
+type UniformFunc<
+    N extends UniformBinderNum,
+    T extends UniformBinderType,
+    V extends 'v' | ''
+> = `uniform${N}${T}${V}`;
+
+type UniformBinderValue<N extends UniformBinderNum> = N extends 1
+    ? number
+    : N extends 2
+    ? [number, number]
+    : N extends 3
+    ? [number, number, number]
+    : [number, number, number, number];
+
+interface UniformBinder<
+    N extends UniformBinderNum,
+    T extends UniformBinderType,
+    V extends 'v' | ''
+> {
+    value: UniformBinderValue<N>;
+    set(value: UniformBinderValue<N>): void;
+    get(): UniformBinderValue<N>;
+}
+
+abstract class WebGLBase {
+    abstract canvas: HTMLCanvasElement;
+    abstract gl: WebGLRenderingContext | WebGL2RenderingContext;
+
+    background: WebGLColorArray = [0, 0, 0, 0];
+
+    vsSource: string = '';
+    fsSource: string = '';
+
+    program: WebGLProgram | null = null;
+    shader: WebGLShaderInfo | null = null;
+
+    resetCanvas() {
+        this.gl.clearColor(...this.background);
+        this.gl.clear(this.gl.COLOR_BUFFER_BIT);
+    }
+
+    setSize(width: number, height: number) {
+        this.canvas.width = width;
+        this.canvas.height = height;
+    }
+
+    compile() {
+        const gl = this.gl;
+        gl.deleteProgram(this.program);
+        gl.deleteShader(this.shader?.vertex ?? null);
+        gl.deleteShader(this.shader?.fragment ?? null);
+
+        this.program = this.createProgram();
+        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
+        gl.useProgram(this.program);
+    }
+
+    vs(vs: string) {
+        this.vsSource = vs;
+    }
+
+    fs(fs: string) {
+        this.fsSource = fs;
+    }
+
+    /**
+     * 创建一个全局变量绑定器，用于操作全局变量
+     * @param uniform 全局变量的变量名
+     * @param num 变量的元素数量，float和int视为1，vec2 vec3 vec4分别视为 2 3 4
+     * @param type 数据类型，可以填'f'，表示浮点型，或者填'i'，表示整型
+     * @param vector 是否为向量，可以填'v'，表示是向量，或者填''，表示不是向量
+     * @returns 一个uniform绑定器，用于操作全局变量uniform
+     */
+    createUniformBinder<
+        N extends UniformBinderNum,
+        T extends UniformBinderType,
+        V extends 'v' | ''
+    >(uniform: string, num: N, type: T, vector: V): UniformBinder<N, T, V> {
+        if (!this.program) {
+            throw new Error(
+                `Uniform binder should be use when the program initialized.`
+            );
+        }
+
+        const suffix = `${num}${type}${vector ? 'v' : ''}`;
+        const func = `uniform${suffix}` as UniformFunc<N, T, V>;
+        const value = (
+            num === 1 ? 0 : Array(num).fill(0)
+        ) as UniformBinderValue<N>;
+
+        const loc = this.gl.getUniformLocation(this.program, uniform);
+        const gl = this.gl;
+
+        return {
+            value,
+            set(value) {
+                this.value = value;
+                let v;
+                if (vector === 'v') {
+                    let _v = ensureArray(value);
+                    if (type === 'f') {
+                        v = new Float32Array(_v);
+                    } else {
+                        v = new Int32Array(_v);
+                    }
+                } else {
+                    v = ensureArray(value);
+                }
+                // 对uniform赋值
+                if (vector === 'v') {
+                    // @ts-ignore
+                    gl[func](loc, v);
+                } else {
+                    // @ts-ignore
+                    gl[func](loc, ...v);
+                }
+            },
+            get() {
+                return this.value;
+            }
+        };
+    }
+
+    protected createProgram() {
+        const gl = this.gl;
+        const vs = this.loadShader(gl.VERTEX_SHADER, this.vsSource);
+        const fs = this.loadShader(gl.FRAGMENT_SHADER, this.fsSource);
+
+        this.shader = {
+            vertex: vs,
+            fragment: fs
+        };
+
+        const program = gl.createProgram()!;
+        gl.attachShader(program, vs);
+        gl.attachShader(program, fs);
+        gl.linkProgram(program);
+
+        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+            logger.error(
+                9,
+                `Cannot initialize shader program. Error info: ${gl.getProgramInfoLog(
+                    program
+                )}`
+            );
+        }
+
+        return program;
+    }
+
+    protected loadShader(type: number, source: string) {
+        const gl = this.gl;
+        const shader = gl.createShader(type)!;
+        gl.shaderSource(shader, source);
+        gl.compileShader(shader);
+
+        if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+            throw new Error(
+                `Cannot compile ${
+                    type === gl.VERTEX_SHADER ? 'vertex' : 'fragment'
+                } shader. Error info: ${gl.getShaderInfoLog(shader)}`
+            );
+        }
+
+        return shader;
+    }
+}
+
+export class WebGLCanvas extends WebGLBase {
+    canvas: HTMLCanvasElement;
+    gl: WebGLRenderingContext;
+
+    constructor(canvas?: HTMLCanvasElement) {
+        super();
+        this.canvas = canvas ?? document.createElement('canvas');
+        this.gl = this.canvas.getContext('webgl')!;
+    }
+}
+
+export class WebGL2Canvas extends WebGLBase {
+    canvas: HTMLCanvasElement;
+    gl: WebGL2RenderingContext;
+
+    constructor(canvas?: HTMLCanvasElement) {
+        super();
+        this.canvas = canvas ?? document.createElement('canvas');
+        this.gl = this.canvas.getContext('webgl2')!;
+    }
+
+    vs(vs: string): void {
+        if (!vs.startsWith('#version 300 es')) {
+            this.vsSource = `#version 300 es\n` + vs;
+        } else {
+            this.vsSource = vs;
+        }
+    }
+
+    fs(fs: string): void {
+        if (!fs.startsWith('#version 300 es')) {
+            this.fsSource = `#version 300 es\n` + fs;
+        } else {
+            this.vsSource = fs;
+        }
+    }
+}
+
+export function loadShader(
+    gl: WebGLRenderingContext,
+    type: number,
+    source: string
+) {
+    const shader = gl.createShader(type)!;
+    gl.shaderSource(shader, source);
+    gl.compileShader(shader);
+
+    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+        logger.error(
+            10,
+            `Cannot compile ${
+                type === gl.VERTEX_SHADER ? 'vertex' : 'fragment'
+            } shader. Error info: ${gl.getShaderInfoLog(shader)}`
+        );
+    }
+
+    return shader;
+}
+
+export function createProgram(
+    gl: WebGLRenderingContext,
+    vsSource: string,
+    fsSource: string
+) {
+    const vs = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+    const fs = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+    const program = gl.createProgram()!;
+    gl.attachShader(program, vs);
+    gl.attachShader(program, fs);
+    gl.linkProgram(program);
+
+    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+        logger.error(
+            9,
+            `Cannot initialize shader program. Error info: ${gl.getProgramInfoLog(
+                program
+            )}`
+        );
+    }
+
+    return program;
+}
--- a/src/core/index.ts
+++ b/src/core/index.ts
@ -59,6 +59,7 @@ import { MCGenerator } from './main/layout';
 import { ResourceController } from './loader/controller';
 import { logger } from './common/logger';
 import { Danmaku } from './main/custom/danmaku';
+import * as Shadow from './fx/shadow';

 // ----- 类注册
 Mota.register('class', 'AudioPlayer', AudioPlayer);
@ -131,6 +132,7 @@ Mota.register('module', 'UIComponents', {
    Keyboard: KeyboardPanel
 });
 Mota.register('module', 'MCGenerator', MCGenerator);
+Mota.register('module', 'Shadow', Shadow);

 main.renderLoaded = true;
 Mota.require('var', 'hook').emit('renderLoaded');
--- a/src/core/main/custom/danmaku.ts
+++ b/src/core/main/custom/danmaku.ts
@ -160,7 +160,7 @@ export class Danmaku extends EventEmitter<DanmakuEvent> {
            this.posted = false;
            this.posting = false;
            logger.error(
-                3,
+                1,
                `Unexpected error when posting danmaku. Error info: ${e}`
            );
            return Promise.reject();
--- a/src/plugin/game/dev/hotReload.js
+++ b/src/plugin/game/dev/hotReload.js
@ -53,6 +53,7 @@ export {};
            }
            core.updateStatusBar(true, true);
        }
+        Mota.require('module', 'Shadow').Shadow.update(true);
        console.log(`Floor hot reload: ${data}`);
    }

--- a/src/plugin/shadow/gameShadow.ts
+++ b/src/plugin/shadow/gameShadow.ts
@ -15,35 +15,35 @@ import { setCanvasFilterByFloorId } from '../fx/gameCanvas';

 export function init() {
    // 勇士身上的光源
-    Mota.rewrite(core.control, 'drawHero', 'add', () => {
-        if (core.getFlag('__heroOpacity__') !== 0) {
-            getAllLights().forEach(v => {
-                if (!v.followHero) return;
-                v._offset ??= { x: v.x, y: v.y };
-                v.x = core.status.heroCenter.px + v._offset.x;
-                v.y = core.status.heroCenter.py + v._offset.y;
-                refreshLight();
-            });
-        }
-    });
-    // 更新地形数据
-    Mota.rewrite(core.maps, 'removeBlock', 'add', success => {
-        if (success && main.replayChecking) updateShadow(true);
-        return success;
-    });
-    Mota.rewrite(core.maps, 'setBlock', 'add', () => {
-        if (main.replayChecking) updateShadow(true);
-    });
-    Mota.rewrite(core.events, 'changingFloor', 'add', (_, floorId) => {
-        if (!main.replayChecking) {
-            updateShadow();
-            setCanvasFilterByFloorId(floorId);
-        }
-    });
-    // 初始化画布信息
-    Mota.rewrite(core.ui, 'deleteAllCanvas', 'add', () => {
-        if (main.mode === 'play' && !main.replayChecking) initShadowCanvas();
-    });
+    // Mota.rewrite(core.control, 'drawHero', 'add', () => {
+    //     if (core.getFlag('__heroOpacity__') !== 0) {
+    //         getAllLights().forEach(v => {
+    //             if (!v.followHero) return;
+    //             v._offset ??= { x: v.x, y: v.y };
+    //             v.x = core.status.heroCenter.px + v._offset.x;
+    //             v.y = core.status.heroCenter.py + v._offset.y;
+    //             refreshLight();
+    //         });
+    //     }
+    // });
+    // // 更新地形数据
+    // Mota.rewrite(core.maps, 'removeBlock', 'add', success => {
+    //     if (success && main.replayChecking) updateShadow(true);
+    //     return success;
+    // });
+    // Mota.rewrite(core.maps, 'setBlock', 'add', () => {
+    //     if (main.replayChecking) updateShadow(true);
+    // });
+    // Mota.rewrite(core.events, 'changingFloor', 'add', (_, floorId) => {
+    //     if (!main.replayChecking) {
+    //         updateShadow();
+    //         setCanvasFilterByFloorId(floorId);
+    //     }
+    // });
+    // // 初始化画布信息
+    // Mota.rewrite(core.ui, 'deleteAllCanvas', 'add', () => {
+    //     if (main.mode === 'play' && !main.replayChecking) initShadowCanvas();
+    // });
 }

 const shadowInfo: Partial<Record<FloorIds, Light[]>> = {
--- a/src/ui/start.vue
+++ b/src/ui/start.vue
@ -131,6 +131,7 @@ function showCursor() {
 * 设置光标位置
 */
 function setCursor(ele: HTMLSpanElement, i: number) {
+    if (!ele) return;
    const style = getComputedStyle(ele);
    cursor.style.top = `${
        parseFloat(style.height) * (i + 0.5) -
@ -297,6 +298,7 @@ async function setButtonAnimate() {

    buttons.forEach(
        v =>
+            v &&
            (v.style.transition =
                'transform 0.3s ease-out, color 0.3s ease-out')
    );