平面设计
粒子星系着色器设计
三条朦胧的螺旋臂在深色 WebGL2 画布上、固定排版下方不断演变，并显示由源代码定义的点数、绘制调用次数和本地 FPS 读数。
粒子星系应用场景
- WebGL 实验研究由 GPU 驱动的粒子构图和以着色器为主导的运动。
- 动态视觉识别围绕一个持续演变的形态构建氛围感首屏场景。
- 创意编程展示将技术约束与克制的编辑式排版相结合。
程序化星系亮点
- 螺旋粒子场朦胧的绿色和蓝色点构成三条宽阔的螺旋臂。
- 渲染上下文信息区点数、绘制调用次数和 FPS 集中排列在紧凑的右上角区域。
- 编辑式排版大号陈述文字在粒子图案下方形成构图锚点。
- 单画布聚焦视觉场域在没有可见控件的情况下承载完整体验。
粒子星系的三个瞬间
1 / 3
三条螺旋臂，一次点绘制
Particle Galaxy 是 OpenDesign 的官方示例，以一块深色、近乎空白的画布和大范围的朦胧粒子为核心。原作标题“Fifty thousand points, one draw call.”将技术前提纳入视觉识别，而不是将其隐藏在界面装饰之后。
粒子场和固定在左下角的标题共用同一视口；大标题并非首屏下方的独立区段。朦胧的绿色、蓝色和浅色点在三条螺旋臂之间留下宽阔的深色间隙。这里的视觉取舍十分明确：克制的粒子场与明亮文字并置时显得安静，但其低对比度也要求观者仔细查看全尺寸图像。
这种设计的适用场景
这种设计适合用作创意编程落地页场景、交互技术展示或经过艺术指导的 WebGL 研究。当视觉本身就是主题，且辅助文案可以保持简短时，其价值最为突出。
没有静态控件，使注意力始终集中在不断变化的粒子场上。这种克制也限制了功能的可发现性：所提供的标记中没有原作者设计的控件，因此该设计通过运动、排版和紧凑的统计信息区进行传达，而不是依靠明确的交互提示。
创意编程展示
先用大范围粒子场引出渲染实验，再说明其技术方法。
WebGL 首屏场景
将深色画布改造为技术导向型数字体验的视觉开场。
运动优先的编辑式设计
让缓慢变化的形态吸引注意力，同时以简洁文案交代背景。
构图的工作原理
右上角信息区显示 50,000 POINTS、1 DRAW CALL 和一个变化的 FPS 估算值。顶点着色器从 gl_VertexID 派生点的位置，将它们分布到三条螺旋臂中，并改变其角速度，使内侧的点旋转得更快。固定倾角与缓慢变化的整体旋转共同塑造圆盘的透视效果。柔和的点精灵和加法混合让绿色、青色和浅色粒子呈现出光晕。
统计信息使用大号白色数字和尺寸较小、字距较宽的标签，而作品采用对比度低得多的绿色、蓝色和浅色粒子。这种区分让元数据易于扫读，又不会与星系争夺注意力。它也带来了感知上的取舍：性能信息区可以立即读懂，而粒子臂则需要更长时间观察，并要求显示设备具备适当的对比度。
截图显示了不同的 FPS 数值，同时保留相同的点数和绘制调用标签。这种变化使 FPS 字段被理解为不断变化的本地显示状态，而不是关于跨设备性能的稳定结论。
技术前提
大标题将粒子数量和绘制调用的概念与视觉相联系，而不是把它们呈现为互不相关的元数据。
视觉密度
宽阔的螺旋臂在黑色背景上依然稀疏，为标题和统计信息保留了负空间。
状态变化
截图保留 50,000 个点和一次绘制调用，同时显示不同的 FPS 数值，从而区分固定标签与变化的显示状态。
能力边界
WebGL2 源代码定义了 N = 50,000，并在每个渲染帧中使用 POINTS 调用一次 gl.drawArrays。粒子位置在顶点着色器中计算，而不是通过 CPU 位置缓冲区更新。主线程仍负责初始化、时间 uniform 参数、尺寸调整和绘制。这里没有指针、键盘、相机转向或参数控件。这是一种程序化的类星系视觉效果，而不是科学的引力模拟。
源代码注释声称可达 60fps，但隔离环境中的静态截图和本地 FPS 计数器无法证明性能得到保证。它们也无法证明生产环境部署、连接服务或历史生成过程。点数和绘制调用次数是代码事实；帧率读数则是依赖具体环境的观测结果。
计数器说明了什么
点数显示源自配置的 N 值，绘制调用标签也与渲染循环中的单次 POINTS 绘制一致。FPS 数值以约半秒为时间窗口估算 requestAnimationFrame 的执行频率。将这些含义区分开来，可以保留有用的技术背景，而不会把这件作品变成缺乏依据的基准测试。
如何在 OpenDesign 中创作粒子星系着色器设计
确立画布构图
首先设置一块占满画布的深色场域，在右上角放置紧凑的统计信息组，并在左下角固定排版。将绿色主题标签、大号陈述文字和说明段落保留在同一视口内，不要在作品下方另加第二个区段。
塑造粒子场
利用从顶点 ID 派生的点构建三条朦胧的螺旋臂，使靠近中心的角运动更快，并采用柔和的点精灵进行加法混合。保留深色间隙与固定排版。将星系视为一种视觉图案，而不是经过物理验证的天文学模型。
检查标签与能力边界
让 Points、Draw Call 和 FPS 在视觉上清晰区分，并确保变化的 FPS 数值被呈现为本地显示状态，而不是通用基准测试结论。验证运动和尺寸调整行为始终局限于渲染画布。
建议提示词创建一个自动播放动画的 WebGL2 粒子星系：使用 gl_VertexID 定位 50,000 个点，并在每帧中通过一次 POINTS 绘制完成渲染。将它们排列成三条宽阔的螺旋臂，使越靠近中心的角运动越快，同时采用固定倾角和缓慢的整体旋转。使用柔和的绿色和青色点精灵进行加法混合，在左下角固定显示“Fifty thousand points, one draw call.”排版，并在右上角显示由源代码定义的点数和绘制调用标签以及本地 FPS 估算值。不要添加用户控件、物理星系模拟、连接服务、存储功能或通用性能保证。
导出并获取分享链接
导出完成的设计稿，然后在 OpenDesign 中使用「Share」功能获取分享链接。在单独的浏览器窗口中打开链接，确认目标版本及其资源均可正常访问后，再将链接发送给他人。
