[aru_3]这次给三个 AI 同一份作业:做一个能玩的“冰山果冻”。它不是画一块蓝色方块就结束,里面要有冰川、企鹅、破冰船,还得能崩解、投鱼、拖冰块,手机上也要能操作。
三份网页都放到了博客上。我没有只看首屏截图,分别进去点了按钮、改口味、调坚固度、拖动画布,又切到窄屏展开控制面板。下面把截图、我看到的差别和分数一起记下来。
先交代结果:按这份复杂场景作业的完成度,我排 Opus 第一、Sol 第二、Flash 第三,分数分别是 89、88、82。前两份我觉得在同一档:Opus 更擅长把场景做满,Sol 更擅长把页面收拾得舒服。
同一题,先把作业链接摆出来
| 作业 | 模型标注(由站长提供) | 实际体验 |
|---|---|---|
| Flash | DeepSeek-V4.1-Flash-1017 | https://x4v.cn/example/Iceberg/flash.html |
| Opus | Claude Code Opus5.5 | https://x4v.cn/example/Iceberg/opus.html |
| Sol | Chatgpt 6.1sol | https://x4v.cn/example/Iceberg/sol.html |
这里只评价眼前这三个 HTML 文件。模型名称沿用提供作业时的标注,我没有核验后台实际调用记录,也没有生成耗时、费用或修改轮数,因此不拿这一次作业推成模型能力总榜。
原题来自小红书 @penny的异常生活。题目很长,我把这次收到的中文译文和英文原版完整放在文末。核心要求是:单文件、自包含、WebGPU / WGSL、无外部库,一个有真实交互和生命活动的极地果冻场景。
我具体怎么验收
测试日期是 2026 年 10 月 23 日,使用同一内置浏览器。桌面截图统一为 1280 × 720;移动布局用 390 × 844 CSS 像素的窄视口检查,不等同于真实手机的 GPU、触摸和双指缩放测试。截图都是本轮实际页面,没有用生成图替代。
- 首屏:等加载结束,看场景、材质、遮挡和文字布局。三份都正常渲染。
- 崩解:重置后点击 Calve,观察冰块和 Calved / Capsized 计数。三份都有反应,倾覆计数在后续运行中也都出现变化。
- 出航:点击 Cast off,观察离岸、航行状态和进度,后续再看是否回到 Alongside。三份都观察到了航行及重新靠岸的状态。
- 投鱼:点击 Throw fish,再等一会儿检查 Fed,必要时回看源码,区分“投出去”和“被吃掉”。这里出现了实质差别。
- 设置与操作:切到 Blackberry,把 Firmness 调到 30%,测试视角、暂停/恢复、声音开关和空格键,并拖动画布。三份设置都有反馈;Sol 抓取冰块时还明确提示了“A little lift. Release to throw.”。
- 窄屏:实际展开、收起三份底部控制面板,检查画面是否能重新露出来。三份都能切换。
- 基本实现:检查当前页面捕获的控制台消息和下载的 HTML。三份本轮都没有捕获到 warning / error,也都能找到 WebGPU、WGSL、168 网格相关实现及减少动态效果的处理代码。
最后一项只是基本检查。我没有完成题目要求的长时间无 NaN 浸泡测试、全物理正确性验证、无 WebGPU 的回退实测、完整无障碍审计,也没有独立做帧率基准。页面写着“60 FPS”,我不会直接当作所有笔记本都能达到的结果。源码里有处理分支,也不等于对应场景已经全部测过。
第一眼:三个方向都成立,但重点不一样
Flash:我最先注意到的是外面那一整块透明的果冻壳。圆润边缘、薄荷色透光和柔软地面阴影放在一起,确实很像一件材质小摆件。切成黑莓色以后,外壳的颜色变化也最直接。

不过,淡色水体和透光效果叠在一起,内部的岩石、企鹅、科考站相对不够醒目。近看能找到不少东西,缩成首屏时却容易先看到一大块发亮的容器。这不是没有细节,而是细节的可读性吃了亏。
Opus:它的山体、冰川和海湾更有压迫感。深色岩壁上留着零散雪块,冰舌的裂纹、蓝色冰崖、右侧小屋和企鹅聚落都比较容易分辨。水面的细碎纹理也更丰富,场景这一项我给它最高分。

代价是画面塞得比较满。1280 × 720 的首屏里,山体贴近标题说明,左下角玩法提示覆盖了部分场景,方块前下方也顶着视口边缘。我想仔细看场景时,会希望它默认再退一点镜头。
Sol:它没有把场景铺满屏幕,而是把作品、衬线标题、标注和面板排成一张展览页。我最喜欢底部直接露出的 Diorama / Waterline / Above 视角切换,想看水下部分,不需要猜哪个图标是镜头。

它的不足也很直观:山体、水面和漂浮冰块更偏清爽的低多边形积木,水面的复杂纹理与岩壁的层次不如 Opus 抢眼。浅色背景上的细小标注也偏淡。若只挑一张网页封面,我偏爱它的布局;按题目那一长串地貌与材质要求验收,Opus 稍占上风。
点下去以后:我最在意 Fed 到底算了什么
三份都不是只有按钮的静态壳。崩解后能看到计数变化,出航会进入 Casting off,再继续航行;Blackberry 也会真正改变场景配色。下面是分别操作后的截图,时间点并不完全相同,不能拿某一张图里暂时为 0 的计数判断功能失效。



Flash 有一个我会扣分的地方:点击一次 Throw fish,Fed 立刻从 0 变成 4。我回看了这次下载的源码,投鱼函数默认投 4 条,接着直接执行 state.fed += count。这个数表示投出了几条,并不等待企鹅吃到。
Opus 在投鱼后没有立即加数,稍后我看到 Fed 变成 1。源码里的加数位置在企鹅追到鱼、将鱼移除的分支里。Sol 也是在企鹅靠近食物并满足吃鱼条件后加数;截图时还是 0,后面运行时到了 5。三份投鱼的数量和时机不同,所以我比较的是计数的含义是否与画面一致,不比谁的数字大。
这也是我觉得这种作业值得实际点一遍的原因。一个写着 Fed 的数字能动,和“喂食过程真的接上了”,是两件需要分别确认的事。
拖动画布时,我也区分了“做过这个动作”和“已经验证所有拾取物理”。Sol 给了明确的抓取提示;Flash 和 Opus 本轮也进行了画布拖动,但我没有把每一类冰块的拿起、抛出、碰撞都逐一验完,因此这部分没有给满分。声音只核对了开关与快捷键反馈,没有录音或做音色比较。
缩到手机宽度,抽屉都能用
三份都把右侧面板改成底部面板,并且能展开和收起。下面三张图的口味、视角和暂停状态保留了各自测试现场,具体写在图注里;这一组看的是布局与控制入口,不用它比较默认配色或取景大小。



Flash 收起后会留下提示条,展开时动作按钮很明显,但玻璃效果叠在场景上,浅色小字仍然有点费眼。Opus 的 CONTROLS 入口直接,主要按钮横着排,功能容易找;上方的说明文字与场景之间则留了比较大的一段空白。
Sol 的收起状态最安静,底部“The control room / EXPLORE”交代得清楚,视角切换也留在场景下方。它在桌面端的问题是面板较长,1280 × 720 下需要内部滚动才能看到最下面的工具;做得细,但信息密度还可以再压一压。三份的小字号、低对比提示,以及画布主要依赖拖拽的操作,都还有继续做可访问性测试的空间。
我的评分:Opus 89,Sol 88,Flash 82
这张表是我的编辑评分,依据是本轮截图、操作记录和有限的源码核对。整数是为了把取舍写清楚,不代表统计精度;尤其前两份只有 1 分,我把它们看成同档、偏好不同。
| 维度 | 满分 | Opus | Sol | Flash |
|---|---|---|---|---|
| 材质、光照与视觉表现 | 25 | 23 | 22 | 22 |
| 场景元素与空间可读性 | 25 | 23 | 22 | 20 |
| 已测试交互与状态一致性 | 30 | 27 | 26 | 24 |
| 界面组织与窄屏体验 | 15 | 12 | 14 | 12 |
| 基本实现与本轮运行检查 | 5 | 4 | 4 | 4 |
| 合计 | 100 | 89 | 88 | 82 |
第一名 Opus:我把更多分给了场景这一块。山脉、冰川、水体和聚落放在一起比较有“一个极地海湾”的感觉,喂食计数也与吃鱼逻辑相连。想继续改它,我会先缩一点默认镜头,把标题、玩法提示和场景之间的遮挡理顺。
第二名 Sol:页面组织是这次我最喜欢的,视角入口直观,移动抽屉也顺手。要往第一名靠,我会先增加岩石、冰和水的材质层次,再处理面板过长和细字对比度,不急着继续加装饰。
第三名 Flash:透明果冻的主题抓得很准,实际动作也能跑起来。它的改进方向是让内部场景更容易看清,并把 Fed 这类计数改成真正对应事件的结果。若题目只考“做一块好看的透明果冻”,它的名次会更靠前。
以后再做这种对比,我会保留两张验收单
一张看画面:构图、材质、细节和层次;另一张看行为:按钮之后到底发生了什么、计数何时改变、船有没有回港、手机上能不能把面板收起来。前者适合看第一眼,后者决定我愿不愿意继续玩。
这次的三份都值得点开试试。我自己的结论是:按这道题的场景完成度选 Opus,按作品页的整体编排选 Sol,想研究通透果冻的外壳表现可以先看 Flash。你也可以用上面的同一组操作复查,看看排序会不会和我一样。
附:本次使用的完整提示词
提示词来源:小红书 @penny的异常生活。以下保留本次收到的文本,包含中文译文和英文原版;这是三份作业的任务说明,不是对它们已完成功能的声明。截图及评分则来自本文这次实际体验。
================================================================================ 中文翻译 ================================================================================ 提示词 构建“冰山果冻”(Iceberg Jelly)——这是你的“材质研究”(Material Studies)果冻立体模型系列中的最新作品:一个单文件自包含的 HTML 文件,使用 WebGPU (WGSL),不依赖外部库,全英文用户界面。 场景 一个方形的果冻块(5.2 × 5.2 单位),立在带有柔和地面阴影的浅色冷灰色纸质工作室背景上。里面是一个极地海湾: - 左后方,一条冰川沿着群山之间的山谷流下,并在深水中终止于一道冰崖。冰崖有垂直的冲沟和蓝色冰条。冰川表面在其边缘有契形冰隙(chevron crevasses),靠近前端有横向冰隙和冰塔(seracs),并带有灰色侧碛(lateral moraines)。其冰舌两侧有冰碛堤,因此只有冰川前端浸入水中。 - 山脉:冰川左侧有参差不齐的山峰,右侧有支脉,背面有雪脊。深色火山岩上长着橙色地衣,较平坦和较高地区零星覆盖着残雪(并非到处都是)。 - 右后方,一个低矮的半岛,上面有阿德利企鹅(Adélie penguin)的栖息地:一个有机的不规则斑块,布满了被磷虾染成粉红色的圆形卵石以及卵石环形巢穴。其后方是一个小型科研站(高脚红黄小屋、油桶、带拉索的无线电桅杆、一面旗帜、转动的风速计、一辆雪地摩托)和一个木质码头。 - 前右方有两块低矮岩石构成的参差不齐的礁石(skerry),威德尔海豹(Weddell seals)在那里上岸休憩。 - 海底是灰色的碎石,带有贝壳、海绵、海星和摇曳的海葵,透过透明的果冻前脸清晰可见。 - 果冻块的切割面展示了糖果色的地层、陆地下的深色玄武岩柱,以及冰川下带有脏基底层的层状蓝色冰川冰。 物理学 - 用于海湾的约 168² 网格的浅水模拟:波浪、航迹、泡沫、折射、海底焦散、光柱,以及取决于风味的吸收效果。 - 冰块中的每一块冰都是一个刚体:平板状、穹顶状、尖顶状和楔形冰山、碎冰块(growlers)、煎饼冰(pancake floes)和冰川厚板。每一块都是一个星形多面网格(超椭圆加突变体加上两倍频噪声),一个用于浮力和阻力的质点晶格,以及用于地面、墙壁、彼此和船只的接触球。在加载时结算稳定的姿势,以便开始时没有任何冰山倾覆。 - 崩解(Calving):崖边立着三块冰板。大约每分钟一次(或按需触发),其中一块会伴随着裂纹、一团冰尘、水花、飞溅和海浪破裂脱落,然后倾覆,直到找到稳定向上的姿态。冰川缓慢地将一块新冰板推出。旧冰板逐渐融化。 - 置换出的水会回传给波浪且没有反馈:只有在冰块快速移动时产生航迹,冲入水中时产生水花。缓慢漂移不会产生波浪。 - 果冻块本身会晃动、剪切和挤压,并且可以通过拖动其侧面来倾斜。 生命 - 一艘破冰船“北极星号”(Polaris,红色的船体配勺形船首、白色上层建筑、带烟囱的黄烟囱、转动的雷达、直升机甲板)停靠在码头。不时地(或按需触发)她会起航,在浮冰和冰山中绕过海湾,推开浮冰和冰山,然后重新靠岸。状态行显示:靠岸中 / 正在起航 / 航行中 / 破冰中 / 正在靠岸,并带有倒计时或进度。 - 22 只阿德利企鹅:蓝黑色背部、白色衬衫胸膛、白色眼圈、粉红色脚。它们站在巢穴上四处张望,偶尔会有狂喜的展示,摇摇摆摆地走着或腹部着地滑行(toboggan)到海滩,潜入水中,用拍打的鳍状肢在水下“飞行”,海豚式跃出水面,跳到浮冰和冰山上,当浮冰倾斜时滑落。它们会追逐银鱼和投掷的鱼。 - 3 只威德尔海豹(带斑点的灰色)在礁石和浮冰上休憩、抬头,然后下水游泳。 - 一头虎鲸(orca,带有清晰的眼斑和灰色马鞍斑)在深水中巡逻,浮出水面呼吸然后潜水。企鹅会避开它。 - 银鱼群;温和的降雪。 用户界面(与系列其余部分布局相同) 主标题“Material Studies / Iceberg Jelly.”,附带一行描述。一个“WebGPU · Live”状态药丸。右侧有一个玻璃控制面板,在移动端会变成底部抽屉: - 按钮:崩解(Calving,当没有准备好冰板时显示“请稍候...”)、起航 / 全速前进、投掷鱼、鸣笛(空格键)。 - 水能计量器;崩解、倾覆、喂食的计数器;船只状态行。 - 风味:薄荷冰川(Glacier mint)、蓝色覆盆子(Blue raspberry)、黑莓(Blackberry)。每种都会改变水的吸收率、色调和地层。 - 滑块:坚固度(Firmness)、波浪阻尼(Wave damping)、降雪(Snowfall)。 - 重置、暂停、声音开/关、视图。 - “如何游玩”页脚。 交互:拿起并投掷浮冰和冰山;在水面上拖动以制造波浪;拖动地面或果冻块的侧面来倾斜它;拖动空白处或右键拖动来环绕视角;滚动或双指捏合来缩放。 Web Audio 声音:崩解的裂纹和轰鸣声、水花声、倾覆的呻吟声、冰块撞击船体的声音、低沉的双簧船笛声、企鹅扑通入水声,以及随着降雪而增强的风声。 当 WebGPU 不可用时显示回退屏幕。遵循减少动态效果(prefers-reduced-motion)设置。无网络请求。 质量标准 具有粉白雪顶、玻璃般蓝色水下部分、蓝色条纹、闪光和半透明感的低多边形(low-poly)多面冰。柔和阴影。冷冽的极地光线。在笔记本电脑上保持 60 fps 左右的性能。无头测试(Headless test):长时间浸泡无 NaN、平静的开始、崩解加倾覆、完整的船只往返、喂食、捡起冰块、移动端抽屉,以及无控制台错误。交付 HTML 文件并将其发布为构件。 ================================================================================ 英文原版 ================================================================================ PROMPT Build "Iceberg Jelly" — the next piece in my "Material Studies" series of jelly dioramas: a single self-contained HTML file using WebGPU (WGSL), no external libraries, English UI. THE SCENE A square block of jelly (5.2 × 5.2 units) standing on a pale, cool-grey paper studio backdrop with a soft floor shadow. Inside it, a polar bay: - At the back left, a glacier flows down a valley between jagged mountains and ends in an ice cliff standing in deep water. The cliff has vertical runnels and blue bands. The glacier surface has chevron crevasses along its margins, transverse crevasses and seracs near the front, and grey lateral moraines. Its tongue is flanked by moraine banks, so only its front stands in the water. - Mountains: a peaky left range and a spur on the right of the glacier, with a snowy ridge along the back. Dark volcanic rock with orange lichen, and snow in ragged patches on flatter and higher ground (not everywhere). - At the back right, a low peninsula with an Adélie penguin rookery: an organic, irregular patch of round pebbles stained pink with krill, with pebble-ring nests. Behind it, a small research station (red and yellow huts on stilts, fuel drums, a radio mast with guy wires, a flag, a turning anemometer, a snowmobile) and a timber quay. - A ragged skerry of two low rocks off to the front right, where Weddell seals haul out. - The sea floor is grey gravel with shells, sponges, sea stars and swaying anemones, visible through the clear jelly front face. - The cut faces of the block show candy-coloured strata, dark basalt columns under the land, and layered blue glacier ice with a dirty basal layer under the glacier. PHYSICS - Shallow-water simulation on a ~168² grid for the bay: waves, wakes, foam, refraction, caustics on the floor, light shafts, and absorption that depends on the flavour. - Every piece of ice is a rigid body: tabular, dome, pinnacle and wedge bergs, growlers, pancake floes, and glacier slabs. Each is a star-shaped faceted mesh (superellipsoid plus lobes plus two octaves of noise), a lattice of mass points for buoyancy and drag, and contact spheres for ground, walls, each other and the ship. Settle stable poses at load so nothing capsizes at the start. - Calving: three slabs stand along the cliff. About once a minute (or on demand) one breaks off with a crack, a puff of ice dust, a splash, spray and a wave, then capsizes until it finds a stable way up. The glacier slowly pushes a new slab out. Old slabs melt away. - The displaced water is handed back to the waves without feedback: wakes only when a piece moves fast, splashes when it plunges in. Slow drift makes no waves. - The jelly block itself wobbles, shears and squashes, and can be tipped by dragging its side. LIFE - An icebreaker, "Polaris" (red hull with a spoon bow, white superstructure, yellow funnel with smoke, a turning radar, a helideck), lies at the quay. Now and then (or on demand) she casts off, shoulders round the bay through the pack, pushing floes and bergs aside, and comes back alongside. A status line shows Alongside / Casting off / Under way / Breaking ice / Coming alongside, with a countdown or progress. - 22 Adélie penguins: blue-black backs, white shirt fronts, white eye rings, pink feet. They stand on nests and look about, have the odd ecstatic display, waddle or toboggan to the beach, dive in, "fly" underwater with beating flippers, porpoise, leap out onto floes and bergs, and slide off when a floe tips. They chase silverfish and thrown fish. - 3 Weddell seals (spotted grey) haul out on the skerry and floes, lift their heads, and go for swims. - An orca (proper eye patch and grey saddle) patrols deep water, surfaces to blow and dives. Penguins keep clear of it. - Schools of silverfish; gentle snowfall. UI (same layout as the rest of the series) Masthead "Material Studies / Iceberg Jelly." with a one-line description. A "WebGPU · Live" status pill. A glass control panel on the right that turns into a bottom sheet on mobile: - Buttons: Calve (shows "Wait…" while no slab is ready), Cast off / Full ahead, Throw fish, Horn (Space). - A water-energy meter; tallies for Calved, Capsized, Fed; the ship status line. - Flavours: Glacier mint, Blue raspberry, Blackberry. Each changes the water's absorption, its tint and the strata. - Sliders: Firmness, Wave damping, Snowfall. - Reset, Pause, Sound on/off, View. - A "How to play" footer. Interaction: pick up and throw floes and bergs; drag across the water to make waves; drag the ground or the side of the block to tip it; drag empty space or right-drag to orbit; scroll or pinch to zoom. Web Audio sounds: calving crack and rumble, splashes, a capsizing groan, ice knocking on the hull, a deep two-reed ship's horn, penguin plops, and wind that rises with the snowfall. Show a fallback screen when WebGPU is unavailable. Respect prefers-reduced-motion. No network requests. QUALITY BAR Low-poly faceted ice with chalky snowy tops, glassy blue underwater parts, blue bands, sparkles and translucency. Soft shadows. Cool polar light. Performance around 60 fps on a laptop. Test headlessly: no NaNs over long soaks, a calm start, calving plus capsize, a full ship round trip, feeding, picking up ice, the mobile sheet, and no console errors. Deliver the HTML file and publish it as an artifact.
🎨 原创不易,支持请点赞、转载请注明本文作者为老K