refactor(frontend): 既存のGLSLを単独のファイルに移行 (#16677)

* refactor(frontend): 既存のGLSLを単独のファイルに移行

* fix: glslファイルを参照元ファイルと同じ場所に移動

packages/frontend/src/utility/snowfall-effect.fragment.glsl

@@ -0,0 +1,23 @@
+#version 300 es
+precision mediump float;
+
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+in vec4 v_color;
+in float v_rotation;
+uniform sampler2D u_texture;
+out vec4 out_color;
+
+void main() {
+	vec2 rotated = vec2(
+		cos(v_rotation) * (gl_PointCoord.x - 0.5) + sin(v_rotation) * (gl_PointCoord.y - 0.5) + 0.5,
+		cos(v_rotation) * (gl_PointCoord.y - 0.5) - sin(v_rotation) * (gl_PointCoord.x - 0.5) + 0.5
+	);
+
+	vec4 snowflake = texture(u_texture, rotated);
+
+	out_color = vec4(snowflake.rgb * v_color.xyz, snowflake.a * v_color.a);
+}

packages/frontend/src/utility/snowfall-effect.ts

@@ -3,59 +3,12 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
+import vertexSource from './snowfall-effect.vertex.glsl';
+import fragmentSource from './snowfall-effect.fragment.glsl';
+
 export class SnowfallEffect {
-	private VERTEX_SOURCE = `#version 300 es
-		in vec4 a_position;
-		in vec4 a_color;
-		in vec3 a_rotation;
-		in vec3 a_speed;
-		in float a_size;
-		out vec4 v_color;
-		out float v_rotation;
-		uniform float u_time;
-		uniform mat4 u_projection;
-		uniform vec3 u_worldSize;
-		uniform float u_gravity;
-		uniform float u_wind;
-		uniform float u_spin_factor;
-		uniform float u_turbulence;
-
-		void main() {
-			v_color = a_color;
-			v_rotation = a_rotation.x + (u_time * u_spin_factor) * a_rotation.y;
-
-			vec3 pos = a_position.xyz;
-
-			pos.x = mod(pos.x + u_time + u_wind * a_speed.x, u_worldSize.x * 2.0) - u_worldSize.x;
-			pos.y = mod(pos.y - u_time * a_speed.y * u_gravity, u_worldSize.y * 2.0) - u_worldSize.y;
-
-			pos.x += sin(u_time * a_speed.z * u_turbulence) * a_rotation.z;
-			pos.z += cos(u_time * a_speed.z * u_turbulence) * a_rotation.z;
-
-			gl_Position = u_projection * vec4(pos.xyz, a_position.w);
-			gl_PointSize = (a_size / gl_Position.w) * 100.0;
-		}
-	`;
-
-	private FRAGMENT_SOURCE = `#version 300 es
-		precision mediump float;
-
-		in vec4 v_color;
-		in float v_rotation;
-		uniform sampler2D u_texture;
-		out vec4 out_color;
-
-		void main() {
-			vec2 rotated = vec2(
-				cos(v_rotation) * (gl_PointCoord.x - 0.5) + sin(v_rotation) * (gl_PointCoord.y - 0.5) + 0.5,
-				cos(v_rotation) * (gl_PointCoord.y - 0.5) - sin(v_rotation) * (gl_PointCoord.x - 0.5) + 0.5
-			);
-
-			vec4 snowflake = texture(u_texture, rotated);
-
-			out_color = vec4(snowflake.rgb * v_color.xyz, snowflake.a * v_color.a);
-		}
-	`;
+	private VERTEX_SOURCE = vertexSource;
+	private FRAGMENT_SOURCE = fragmentSource;
 
 	private gl: WebGLRenderingContext;
 	private program: WebGLProgram;

packages/frontend/src/utility/snowfall-effect.vertex.glsl

@@ -0,0 +1,37 @@
+#version 300 es
+
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+in vec4 a_position;
+in vec4 a_color;
+in vec3 a_rotation;
+in vec3 a_speed;
+in float a_size;
+out vec4 v_color;
+out float v_rotation;
+uniform float u_time;
+uniform mat4 u_projection;
+uniform vec3 u_worldSize;
+uniform float u_gravity;
+uniform float u_wind;
+uniform float u_spin_factor;
+uniform float u_turbulence;
+
+void main() {
+	v_color = a_color;
+	v_rotation = a_rotation.x + (u_time * u_spin_factor) * a_rotation.y;
+
+	vec3 pos = a_position.xyz;
+
+	pos.x = mod(pos.x + u_time + u_wind * a_speed.x, u_worldSize.x * 2.0) - u_worldSize.x;
+	pos.y = mod(pos.y - u_time * a_speed.y * u_gravity, u_worldSize.y * 2.0) - u_worldSize.y;
+
+	pos.x += sin(u_time * a_speed.z * u_turbulence) * a_rotation.z;
+	pos.z += cos(u_time * a_speed.z * u_turbulence) * a_rotation.z;
+
+	gl_Position = u_projection * vec4(pos.xyz, a_position.w);
+	gl_PointSize = (a_size / gl_Position.w) * 100.0;
+}