GSS：用写 CSS 的方式写 3D 场景 GSS: write 3D scenes the way you write CSS

详细介绍Details

GSS（GPU Style Sheets）给会写 CSS、但不想先学着色器语言的人用。你在 @scene 里列出球、环、方块这些形状，再用选择器给它们上颜色、材质和 @keyframes 动画；编译器把整张样式表变成一个着色器，在 WebGL2 或 WebGPU 上渲染，不用 Three.js，也不用模型文件。官网有在线 Playground，边改边出图；也能用 npm、Vite 插件或一行 CDN 脚本加一个 <gss-scene> 标签放进自己的页面。作者特意提到：大模型本来就会写 CSS，所以让 AI 来写场景很顺手。 GSS (GPU Style Sheets) is for people who know CSS and do not want to learn a shader language first. You list shapes like spheres, tori, and cubes in an @scene, then style them with selectors, materials, and @keyframes; the compiler turns the whole stylesheet into one shader rendered in WebGL2 or WebGPU, with no Three.js and no meshes. The site has a live playground that re-renders as you type, and you can drop it into a page via npm, a Vite plugin, or one CDN script plus a <gss-scene> tag. The author points out that language models already write CSS well, so it pairs naturally with AI.

适合学什么What to learn

• 工具页 Tool

  在浏览器里生成 CSS/HTML 的小工具。 In-browser tools that generate CSS or HTML.

• 游戏/互动 Game / interactive

  可直接玩或操作的教学游戏与 WebGL 演示。 Teaching games and WebGL demos you can play in the browser.

• 文档站 Docs

  带可运行示例的文档站与示例索引。 Doc sites and example indexes with runnable samples.

为什么推荐Why we recommend it 本库只打开了官网首页，没有自己写场景。 This library only opened the homepage and did not write a scene.