Shadplay 源码拆解Bevy Material trait、AsBindGroup 着色器数据绑定与插件注册完整指南【免费下载链接】shadplayReal-time wgsl visualisation tooling for educating oneself in the art of shader programming项目地址: https://gitcode.com/gh_mirrors/sh/shadplayShadplay 是一个基于 Bevy 的实时 WGSL 着色器可视化工具帮你零摩擦地学习 Rust 生态中的着色器编程在外部编辑器里改一行.wgsl保存即可在窗口里立刻看到效果。本文从源码拆解它的三大核心机制——AsBindGroup数据绑定、Materialtrait 实现与插件注册讲清楚颜色、纹理、鼠标坐标这三个数据是如何从 Rust 程序一路送到 GPU 着色器里的读完你就能独立写出自己的 Bevy 自定义材质。一图看懂数据流Rust → AsBindGroup → WGSL在 Shadplay 里所有传给着色器的数据都走同一条流水线Rust 结构体deriveAsBindGroup→ Bevy 自动打包成 BindGroup → WGSL 里用group binding按编号读取理解编号对齐是理解整个项目的钥匙。看 src/shader_utils/mod.rs 中的 3D 材质结构体#[derive(Asset, AsBindGroup, TypePath, Debug, Clone)] pub struct YourShader { #[uniform(100)] pub color: LinearRgba, #[texture(101, dimension 2d)] #[sampler(102)] pub img: HandleImage, }再看它对应的着色器assets/shaders/myshader.wgslgroup(3) binding(100) varuniform color: vec4f; group(3) binding(101) var texture: texture_2df32; group(3) binding(102) var texture_sampler: sampler;三组数字一一对应Rust 侧属性WGSL 侧声明数据内容#[uniform(100)]binding(100)材质颜色#[texture(101)]binding(101)纹理图#[sampler(102)]binding(102)采样器新手最容易踩的坑Rust 侧改绑定位忘了同步改 WGSL 里的binding编号结果就是画面错乱或黑屏。group(3)是 Bevy 为自定义材质预留的固定 group你不用自己分配。此外鼠标坐标MousePos是一个只 derive 了ShaderType的普通结构体作为字段嵌入YourShader2D的#[uniform(0)]这样每个像素着色器都能读到当前鼠标位置——这正是 Shadplay 支持鼠标交互着色器的底层机制。Material trait 实现一行代码指定着色器文件AsBindGroup只解决数据怎么送用哪个.wgsl文件渲染则由Materialtrait 决定。Shadplay 的实现干净到只有一行src/shader_utils/mod.rsimpl Material for YourShader { fn fragment_shader() - ShaderRef { shaders/myshader.wgsl.into() } }2D 模式则实现Material2d指向shaders/myshader_2d.wgsl即assets/shaders/myshader_2d.wgsl也就是打开应用时看到的 ShaderToy 风格默认画面。按T键切 2D、H键切 3D切换的就是这两套材质。插件注册两行代码接入 Bevy 渲染管线数据定义好了、着色器选好了最后一步是让 Bevy 认识这套材质。打开src/plugin.rs核心是ShadPlayPlugin::build里的两行.add_plugins(MaterialPlugin::YourShader::default()) .add_plugins(Material2dPlugin::YourShader2D::default())Bevy 的MaterialPlugin::T是泛型插件一旦注册Bevy 会自动为该类型生成渲染通道、处理AssetsYourShader资源池和 bind group 上传——你不需要写任何底层 GPU 代码。同一处还注册了ShadplayShaderLibrary定义在src/shader_utils/common.rs它用load_internal_asset!宏把src/shader_utils/common.wgsl打包进应用。这份公共函数库里有sd_sphere、hextile六边形平铺、fbm_fireball分形噪声等几十个函数2D 着色器可以直接#import shadplay::shader_utils::common::...使用这也是 Shadplay 教学价值的体现让你直接抄 Bevy 生态的现成工具函数。最终入口在src/main.rsApp::new()后.add_plugins((DefaultPlugins..., ShadPlayPlugin))一行完成全部装配普通模式和屏保模式共用同一个插件。数据回路鼠标坐标如何实时喂给着色器前面讲的都是静态绑定Shadplay 最直观的体验是鼠标移动画面跟着变。回路在src/utils.rs的update_mouse_pos系统里每帧从主窗口读取物理光标坐标通过ShadplayWindowDims换算成 0~1 的 UV 坐标直接写入AssetsYourShader2D中材质实例的mouse_pos字段。由于YourShader2Dderive 了AsBindGroupBevy 会在下一帧自动把这 8 个字节重新上传到 GPU着色器里读到的是最新值——整个回路没有你写一行同步代码。上手自检清单照着这份清单检查你的自定义材质基本可以排除 90% 的问题derive 齐全吗材质结构体需要Asset AsBindGroup TypePath纯数据子结构体如MousePos只需ShaderType。编号对齐吗逐个核对#[uniform(n)]/#[texture(n)]/#[sampler(n)]与 WGSL 的binding(n)。trait 实现了吗Material或Material2d必须提供fragment_shader()返回正确路径。插件注册了吗对应类型的MaterialPlugin/Material2dPlugin出现在add_plugins里。.wgsl编译通过吗Shadplay 对保存的文件实时重编译naga 报错信息会直接标出问题行。总结Shadplay 的源码是一份绝佳的 Bevy 自定义材质活文档AsBindGroup负责数据按编号对齐Materialtrait 一行指定着色器两行插件注册把一切接入渲染管线。关键文件一览——材质与绑定src/shader_utils/mod.rs插件装配src/plugin.rs入口与屏保src/main.rs公共 WGSL 函数库src/shader_utils/common.wgsl默认着色器assets/shaders/myshader_2d.wgsl。把这条Rust 结构体 → 绑定编号 → WGSL 读取的主线记牢你就可以在这个工具里开始写出自己的第一个 WGSL 效果了。【免费下载链接】shadplayReal-time wgsl visualisation tooling for educating oneself in the art of shader programming项目地址: https://gitcode.com/gh_mirrors/sh/shadplay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Shadplay 源码拆解Bevy Material trait、AsBindGroup 着色器数据绑定与插件注册完整指南【免费下载链接】shadplayReal-time wgsl visualisation tooling for educating oneself in the art of shader programming项目地址: https://gitcode.com/gh_mirrors/sh/shadplayShadplay 是一个基于 Bevy 的实时 WGSL 着色器可视化工具帮你零摩擦地学习 Rust 生态中的着色器编程在外部编辑器里改一行.wgsl保存即可在窗口里立刻看到效果。本文从源码拆解它的三大核心机制——AsBindGroup数据绑定、Materialtrait 实现与插件注册讲清楚颜色、纹理、鼠标坐标这三个数据是如何从 Rust 程序一路送到 GPU 着色器里的读完你就能独立写出自己的 Bevy 自定义材质。一图看懂数据流Rust → AsBindGroup → WGSL在 Shadplay 里所有传给着色器的数据都走同一条流水线Rust 结构体deriveAsBindGroup→ Bevy 自动打包成 BindGroup → WGSL 里用group binding按编号读取理解编号对齐是理解整个项目的钥匙。看 src/shader_utils/mod.rs 中的 3D 材质结构体#[derive(Asset, AsBindGroup, TypePath, Debug, Clone)] pub struct YourShader { #[uniform(100)] pub color: LinearRgba, #[texture(101, dimension 2d)] #[sampler(102)] pub img: HandleImage, }再看它对应的着色器assets/shaders/myshader.wgslgroup(3) binding(100) varuniform color: vec4f; group(3) binding(101) var texture: texture_2df32; group(3) binding(102) var texture_sampler: sampler;三组数字一一对应Rust 侧属性WGSL 侧声明数据内容#[uniform(100)]binding(100)材质颜色#[texture(101)]binding(101)纹理图#[sampler(102)]binding(102)采样器新手最容易踩的坑Rust 侧改绑定位忘了同步改 WGSL 里的binding编号结果就是画面错乱或黑屏。group(3)是 Bevy 为自定义材质预留的固定 group你不用自己分配。此外鼠标坐标MousePos是一个只 derive 了ShaderType的普通结构体作为字段嵌入YourShader2D的#[uniform(0)]这样每个像素着色器都能读到当前鼠标位置——这正是 Shadplay 支持鼠标交互着色器的底层机制。Material trait 实现一行代码指定着色器文件AsBindGroup只解决数据怎么送用哪个.wgsl文件渲染则由Materialtrait 决定。Shadplay 的实现干净到只有一行src/shader_utils/mod.rsimpl Material for YourShader { fn fragment_shader() - ShaderRef { shaders/myshader.wgsl.into() } }2D 模式则实现Material2d指向shaders/myshader_2d.wgsl即assets/shaders/myshader_2d.wgsl也就是打开应用时看到的 ShaderToy 风格默认画面。按T键切 2D、H键切 3D切换的就是这两套材质。插件注册两行代码接入 Bevy 渲染管线数据定义好了、着色器选好了最后一步是让 Bevy 认识这套材质。打开src/plugin.rs核心是ShadPlayPlugin::build里的两行.add_plugins(MaterialPlugin::YourShader::default()) .add_plugins(Material2dPlugin::YourShader2D::default())Bevy 的MaterialPlugin::T是泛型插件一旦注册Bevy 会自动为该类型生成渲染通道、处理AssetsYourShader资源池和 bind group 上传——你不需要写任何底层 GPU 代码。同一处还注册了ShadplayShaderLibrary定义在src/shader_utils/common.rs它用load_internal_asset!宏把src/shader_utils/common.wgsl打包进应用。这份公共函数库里有sd_sphere、hextile六边形平铺、fbm_fireball分形噪声等几十个函数2D 着色器可以直接#import shadplay::shader_utils::common::...使用这也是 Shadplay 教学价值的体现让你直接抄 Bevy 生态的现成工具函数。最终入口在src/main.rsApp::new()后.add_plugins((DefaultPlugins..., ShadPlayPlugin))一行完成全部装配普通模式和屏保模式共用同一个插件。数据回路鼠标坐标如何实时喂给着色器前面讲的都是静态绑定Shadplay 最直观的体验是鼠标移动画面跟着变。回路在src/utils.rs的update_mouse_pos系统里每帧从主窗口读取物理光标坐标通过ShadplayWindowDims换算成 0~1 的 UV 坐标直接写入AssetsYourShader2D中材质实例的mouse_pos字段。由于YourShader2Dderive 了AsBindGroupBevy 会在下一帧自动把这 8 个字节重新上传到 GPU着色器里读到的是最新值——整个回路没有你写一行同步代码。上手自检清单照着这份清单检查你的自定义材质基本可以排除 90% 的问题derive 齐全吗材质结构体需要Asset AsBindGroup TypePath纯数据子结构体如MousePos只需ShaderType。编号对齐吗逐个核对#[uniform(n)]/#[texture(n)]/#[sampler(n)]与 WGSL 的binding(n)。trait 实现了吗Material或Material2d必须提供fragment_shader()返回正确路径。插件注册了吗对应类型的MaterialPlugin/Material2dPlugin出现在add_plugins里。.wgsl编译通过吗Shadplay 对保存的文件实时重编译naga 报错信息会直接标出问题行。总结Shadplay 的源码是一份绝佳的 Bevy 自定义材质活文档AsBindGroup负责数据按编号对齐Materialtrait 一行指定着色器两行插件注册把一切接入渲染管线。关键文件一览——材质与绑定src/shader_utils/mod.rs插件装配src/plugin.rs入口与屏保src/main.rs公共 WGSL 函数库src/shader_utils/common.wgsl默认着色器assets/shaders/myshader_2d.wgsl。把这条Rust 结构体 → 绑定编号 → WGSL 读取的主线记牢你就可以在这个工具里开始写出自己的第一个 WGSL 效果了。【免费下载链接】shadplayReal-time wgsl visualisation tooling for educating oneself in the art of shader programming项目地址: https://gitcode.com/gh_mirrors/sh/shadplay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 
