feat: 添加跨平台运行时、资产系统和UI适配功能 (#256)
* feat(platform-common): 添加WASM加载器和环境检测API * feat(rapier2d): 新增Rapier2D WASM绑定包 * feat(physics-rapier2d): 添加跨平台WASM加载器 * feat(asset-system): 添加运行时资产目录和bundle格式 * feat(asset-system-editor): 新增编辑器资产管理包 * feat(editor-core): 添加构建系统和模块管理 * feat(editor-app): 重构浏览器预览使用import maps * feat(platform-web): 添加BrowserRuntime和资产读取 * feat(engine): 添加材质系统和着色器管理 * feat(material): 新增材质系统和着色器编辑器 * feat(tilemap): 增强tilemap编辑器和动画系统 * feat(modules): 添加module.json配置 * feat(core): 添加module.json和类型定义更新 * chore: 更新依赖和构建配置 * refactor(plugins): 更新插件模板使用ModuleManifest * chore: 添加第三方依赖库 * chore: 移除BehaviourTree-ai和ecs-astar子模块 * docs: 更新README和文档主题样式 * fix: 修复Rust文档测试和添加rapier2d WASM绑定 * fix(tilemap-editor): 修复画布高DPI屏幕分辨率适配问题 * feat(ui): 添加UI屏幕适配系统(CanvasScaler/SafeArea) * fix(ecs-engine-bindgen): 添加缺失的ecs-framework-math依赖 * fix: 添加缺失的包依赖修复CI构建 * fix: 修复CodeQL检测到的代码问题 * fix: 修复构建错误和缺失依赖 * fix: 修复类型检查错误 * fix(material-system): 修复tsconfig配置支持TypeScript项目引用 * fix(editor-core): 修复Rollup构建配置添加tauri external * fix: 修复CodeQL检测到的代码问题 * fix: 修复CodeQL检测到的代码问题
This commit is contained in:
YHH
GitHub
311
packages/material-system/src/Shader.ts
Normal file
311
packages/material-system/src/Shader.ts
Normal file
@@ -0,0 +1,311 @@
|
||||
/**
|
||||
* Shader class for managing GLSL shaders.
|
||||
* 用于管理GLSL着色器的类。
|
||||
*/
|
||||
|
||||
import { ShaderDefinition, UniformValue, UniformType } from './types';
|
||||
|
||||
/**
|
||||
* Shader class that holds vertex and fragment shader source.
|
||||
* 持有顶点和片段着色器源代码的着色器类。
|
||||
*/
|
||||
export class Shader {
|
||||
/** Shader ID assigned by the engine | 引擎分配的着色器ID */
|
||||
private _id: number = -1;
|
||||
|
||||
/** Shader name for reference | 着色器名称用于引用 */
|
||||
public name: string;
|
||||
|
||||
/** Vertex shader GLSL source | 顶点着色器GLSL源代码 */
|
||||
public vertexSource: string;
|
||||
|
||||
/** Fragment shader GLSL source | 片段着色器GLSL源代码 */
|
||||
public fragmentSource: string;
|
||||
|
||||
/** Shader uniforms with default values | 着色器uniform及其默认值 */
|
||||
private uniforms: Map<string, UniformValue> = new Map();
|
||||
|
||||
/** Whether the shader has been compiled | 着色器是否已编译 */
|
||||
private _compiled: boolean = false;
|
||||
|
||||
constructor(name: string, vertexSource: string, fragmentSource: string) {
|
||||
this.name = name;
|
||||
this.vertexSource = vertexSource;
|
||||
this.fragmentSource = fragmentSource;
|
||||
}
|
||||
|
||||
/** Get the shader ID | 获取着色器ID */
|
||||
get id(): number {
|
||||
return this._id;
|
||||
}
|
||||
|
||||
/** Set the shader ID (called by ShaderManager) | 设置着色器ID（由ShaderManager调用） */
|
||||
set id(value: number) {
|
||||
this._id = value;
|
||||
}
|
||||
|
||||
/** Check if shader is compiled | 检查着色器是否已编译 */
|
||||
get compiled(): boolean {
|
||||
return this._compiled;
|
||||
}
|
||||
|
||||
/** Mark shader as compiled | 标记着色器为已编译 */
|
||||
markCompiled(): void {
|
||||
this._compiled = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define a uniform with default value.
|
||||
* 定义带有默认值的uniform。
|
||||
*/
|
||||
defineUniform(name: string, type: UniformType, defaultValue: number | number[] | string): this {
|
||||
this.uniforms.set(name, { type, value: defaultValue });
|
||||
return this;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get uniform definition.
|
||||
* 获取uniform定义。
|
||||
*/
|
||||
getUniform(name: string): UniformValue | undefined {
|
||||
return this.uniforms.get(name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all uniform definitions.
|
||||
* 获取所有uniform定义。
|
||||
*/
|
||||
getUniforms(): Map<string, UniformValue> {
|
||||
return this.uniforms;
|
||||
}
|
||||
|
||||
/**
|
||||
* Export to shader definition.
|
||||
* 导出为着色器定义。
|
||||
*/
|
||||
toDefinition(): ShaderDefinition {
|
||||
const uniformsObj: Record<string, UniformValue> = {};
|
||||
for (const [key, value] of this.uniforms) {
|
||||
uniformsObj[key] = value;
|
||||
}
|
||||
|
||||
return {
|
||||
name: this.name,
|
||||
vertexSource: this.vertexSource,
|
||||
fragmentSource: this.fragmentSource,
|
||||
uniforms: Object.keys(uniformsObj).length > 0 ? uniformsObj : undefined
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Import from shader definition.
|
||||
* 从着色器定义导入。
|
||||
*/
|
||||
static fromDefinition(def: ShaderDefinition): Shader {
|
||||
const shader = new Shader(def.name, def.vertexSource, def.fragmentSource);
|
||||
|
||||
if (def.uniforms) {
|
||||
for (const [key, value] of Object.entries(def.uniforms)) {
|
||||
shader.uniforms.set(key, value);
|
||||
}
|
||||
}
|
||||
|
||||
return shader;
|
||||
}
|
||||
}
|
||||
|
||||
// ============= Built-in Shaders =============
|
||||
// ============= 内置着色器 =============
|
||||
|
||||
/**
|
||||
* Default sprite vertex shader source.
|
||||
* 默认精灵顶点着色器源代码。
|
||||
*/
|
||||
export const DEFAULT_VERTEX_SHADER = `#version 300 es
|
||||
precision highp float;
|
||||
|
||||
// Vertex attributes | 顶点属性
|
||||
layout(location = 0) in vec2 a_position;
|
||||
layout(location = 1) in vec2 a_texCoord;
|
||||
layout(location = 2) in vec4 a_color;
|
||||
|
||||
// Uniforms | 统一变量
|
||||
uniform mat3 u_projection;
|
||||
|
||||
// Outputs to fragment shader | 输出到片段着色器
|
||||
out vec2 v_texCoord;
|
||||
out vec4 v_color;
|
||||
|
||||
void main() {
|
||||
// Apply projection matrix | 应用投影矩阵
|
||||
vec3 pos = u_projection * vec3(a_position, 1.0);
|
||||
gl_Position = vec4(pos.xy, 0.0, 1.0);
|
||||
|
||||
// Pass through to fragment shader | 传递到片段着色器
|
||||
v_texCoord = a_texCoord;
|
||||
v_color = a_color;
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Default sprite fragment shader source.
|
||||
* 默认精灵片段着色器源代码。
|
||||
*/
|
||||
export const DEFAULT_FRAGMENT_SHADER = `#version 300 es
|
||||
precision highp float;
|
||||
|
||||
// Inputs from vertex shader | 来自顶点着色器的输入
|
||||
in vec2 v_texCoord;
|
||||
in vec4 v_color;
|
||||
|
||||
// Texture sampler | 纹理采样器
|
||||
uniform sampler2D u_texture;
|
||||
|
||||
// Output color | 输出颜色
|
||||
out vec4 fragColor;
|
||||
|
||||
void main() {
|
||||
// Sample texture and multiply by vertex color | 采样纹理并乘以顶点颜色
|
||||
vec4 texColor = texture(u_texture, v_texCoord);
|
||||
fragColor = texColor * v_color;
|
||||
|
||||
// Discard fully transparent pixels | 丢弃完全透明的像素
|
||||
if (fragColor.a < 0.01) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Grayscale fragment shader for desaturation effect.
|
||||
* 灰度片段着色器用于去饱和效果。
|
||||
*/
|
||||
export const GRAYSCALE_FRAGMENT_SHADER = `#version 300 es
|
||||
precision highp float;
|
||||
|
||||
in vec2 v_texCoord;
|
||||
in vec4 v_color;
|
||||
|
||||
uniform sampler2D u_texture;
|
||||
uniform float u_grayscale; // 0.0 = full color, 1.0 = full grayscale
|
||||
|
||||
out vec4 fragColor;
|
||||
|
||||
void main() {
|
||||
vec4 texColor = texture(u_texture, v_texCoord);
|
||||
vec4 color = texColor * v_color;
|
||||
|
||||
float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
|
||||
vec3 grayscaleColor = vec3(gray);
|
||||
|
||||
fragColor = vec4(mix(color.rgb, grayscaleColor, u_grayscale), color.a);
|
||||
|
||||
if (fragColor.a < 0.01) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Color tint fragment shader.
|
||||
* 颜色着色片段着色器。
|
||||
*/
|
||||
export const TINT_FRAGMENT_SHADER = `#version 300 es
|
||||
precision highp float;
|
||||
|
||||
in vec2 v_texCoord;
|
||||
in vec4 v_color;
|
||||
|
||||
uniform sampler2D u_texture;
|
||||
uniform vec4 u_tintColor; // Tint color to apply
|
||||
|
||||
out vec4 fragColor;
|
||||
|
||||
void main() {
|
||||
vec4 texColor = texture(u_texture, v_texCoord);
|
||||
vec4 color = texColor * v_color;
|
||||
|
||||
// Apply tint by multiplying RGB and keeping alpha
|
||||
fragColor = vec4(color.rgb * u_tintColor.rgb, color.a * u_tintColor.a);
|
||||
|
||||
if (fragColor.a < 0.01) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Flash/hit effect fragment shader.
|
||||
* 闪白/受击效果片段着色器。
|
||||
*/
|
||||
export const FLASH_FRAGMENT_SHADER = `#version 300 es
|
||||
precision highp float;
|
||||
|
||||
in vec2 v_texCoord;
|
||||
in vec4 v_color;
|
||||
|
||||
uniform sampler2D u_texture;
|
||||
uniform vec4 u_flashColor; // Flash color
|
||||
uniform float u_flashAmount; // 0.0 = no flash, 1.0 = full flash
|
||||
|
||||
out vec4 fragColor;
|
||||
|
||||
void main() {
|
||||
vec4 texColor = texture(u_texture, v_texCoord);
|
||||
vec4 color = texColor * v_color;
|
||||
|
||||
// Mix original color with flash color
|
||||
vec3 flashedColor = mix(color.rgb, u_flashColor.rgb, u_flashAmount);
|
||||
fragColor = vec4(flashedColor, color.a);
|
||||
|
||||
if (fragColor.a < 0.01) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
/**
|
||||
* Outline fragment shader.
|
||||
* 描边片段着色器。
|
||||
*/
|
||||
export const OUTLINE_FRAGMENT_SHADER = `#version 300 es
|
||||
precision highp float;
|
||||
|
||||
in vec2 v_texCoord;
|
||||
in vec4 v_color;
|
||||
|
||||
uniform sampler2D u_texture;
|
||||
uniform vec4 u_outlineColor;
|
||||
uniform float u_outlineWidth;
|
||||
uniform vec2 u_texelSize; // 1.0 / textureSize
|
||||
|
||||
out vec4 fragColor;
|
||||
|
||||
void main() {
|
||||
vec4 texColor = texture(u_texture, v_texCoord);
|
||||
vec4 color = texColor * v_color;
|
||||
|
||||
// Check if this pixel should be outline
|
||||
if (color.a < 0.1) {
|
||||
// Sample neighbors
|
||||
float a = 0.0;
|
||||
for (float x = -1.0; x <= 1.0; x += 1.0) {
|
||||
for (float y = -1.0; y <= 1.0; y += 1.0) {
|
||||
vec2 offset = vec2(x, y) * u_texelSize * u_outlineWidth;
|
||||
a += texture(u_texture, v_texCoord + offset).a;
|
||||
}
|
||||
}
|
||||
|
||||
if (a > 0.0) {
|
||||
fragColor = u_outlineColor;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
fragColor = color;
|
||||
|
||||
if (fragColor.a < 0.01) {
|
||||
discard;
|
||||
}
|
||||
}
|
||||
`;
|
||||
Reference in New Issue
Block a user