教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载本技术指南围绕 Coding Train 第 63 号挑战的第二部分展开在基于 toxiclibs Verlet 物理引擎搭建的 3D 布料网格之上把 Unikitty 图像作为纹理贴到一面迎风飘动的旗帜上。阅读本文后你将掌握 Processing 中beginShape()/endShape()/texture()的完整贴图渲染流程、TRIANGLE_STRIP 三角形带与 UV 坐标映射原理以及用柏林噪声驱动粒子受力实现布料飘动效果的完整可运行方案。挑战背景两集联动的纹理旗帜本挑战63.2是对 63.1 的延续两集共享同一仓库 CodingChallenges/CC_063_unikitty_flag063.1-unikitty-flag.md讲解如何用beginShape()、endShape()、texture()渲染带图像纹理的几何体讨论TRIANGLE_STRIP、QUAD_STRIP等不同形状模式的选择本文对应的 063.2把 Unikitty 图片作为纹理贴到由 toxiclibs Verlet 物理创建的飘动旗帜上。因此本文既包含 63.1 的贴图渲染核心概念也完整展开 63.2 中物理网格 纹理的整合实现。仓库中的完整源码位于 CC_063_unikitty_flag.pde配套的 Particle.pde 与 Spring.pde 分别定义了粒子与弹簧类。第一步用 toxiclibs 搭建 3D 布料网格旗帜的本质是一张由粒子VerletParticle3D与弹簧VerletSpring3D交织而成的 40×40 网格。主程序开头引入 toxiclibs 的三维物理与几何包import toxi.physics3d.*; import toxi.physics3d.behaviors.*; import toxi.physics3d.constraints.*; import toxi.geom.*;粒子网格初始化int res 1; int cols 40 / res; // 列数 int rows 40 / res; // 行数 Particle[][] particles new Particle[cols][rows]; float w 10 * res; // 相邻粒子的间距网格以屏幕中心为原点对称铺开每个粒子沿 x、y 方向间隔wfloat x -cols*w/2 - 100; // x 起点左移 100为旗杆留出空间 for (int i 0; i cols; i) { float y -rows*w/2; for (int j 0; j rows; j) { Particle p new Particle(x, y, 0); particles[i][j] p; physics.addParticle(p); y y w; } x x w; }Particle.pde 中的粒子类极简直接继承 toxiclibs 的VerletParticle3D仅在调试时用display()绘制 2 像素小圆点class Particle extends VerletParticle3D { Particle(float x, float y, float z) { super(x, y, z); } void display() { pushMatrix(); translate(x, y, z); noStroke(); fill(255); ellipse(0, 0, 2, 2); popMatrix(); } }弹簧连接右邻与下邻遍历每个粒子若存在右邻i1或下邻j1就创建弹簧并注册到物理世界for (int i 0; i cols; i) { for (int j 0; j rows; j) { Particle a particles[i][j]; if (i ! cols-1) { Particle b1 particles[i1][j]; Spring s1 new Spring(a, b1); springs.add(s1); physics.addSpring(s1); } if (j ! rows-1) { Particle b2 particles[i][j1]; Spring s2 new Spring(a, b2); springs.add(s2); physics.addSpring(s2); } } }Spring.pde 中弹簧的静止长度直接取全局间距w强度为 1该值越大布料越硬class Spring extends VerletSpring3D { Spring(Particle a, Particle b) { super(a, b, w, 1); } void display() { stroke(255); strokeWeight(1); line(a.x, a.y, a.z, b.x, b.y, b.z); } }横向对比第 20 号挑战 CC_020_ClothSimulation 中的 2D 版本 P5/spring.js 使用同样的super(a, b, w, 1)构造方式而 3D 版本 CC_020_Cloth3D.pde 通过particles[0][0].lock()与particles[cols-1][0].lock()锁定左上、右上两个角。本挑战则锁定整条左边缘见下文。固定左边缘与重力旗帜需要挂在旗杆上因此锁定第一列全部粒子for(int i 0; i particles[0].length; i 1){ particles[0][i].lock(); }物理世界初始化时注册重力行为Vec3D(0, 0.5, 0)表示 y 轴方向的轻微重力数值比第 20 号挑战的Vec3D(0, 1, 0)更小让旗帜更松弛physics new VerletPhysics3D(); Vec3D gravity new Vec3D(0, 0.5, 0); GravityBehavior3D gb new GravityBehavior3D(gravity); physics.addBehavior(gb);第二步柏林噪声驱动的三维风力布料的飘动并非真实流体模拟而是每一帧对每个粒子施加一个由noise()计算的风力向量。核心技巧是给噪声输入叠加不同的偏移量5000、3000让 x、y、z 三个方向的风力互不相关float xoff 0; for (int i 0; i cols; i) { float yoff 0; for (int j 0; j rows; j) { float windx map(noise(xoff, yoff, zoff), 0, 1, 0, 3); // 主导风向向右 float windy map(noise(xoff5000, yoff5000, zoff), 0, 1, -0.5, 0); // 轻微向上 float windz map(noise(xoff3000, yoff3000, zoff), 0, 1, -1, 1); // 前后摆动 Vec3D wind new Vec3D(windx, windy, windz); particles[i][j].addForce(wind); yoff 0.1; } xoff 0.1; } zoff 0.1; // 每帧推进第三个噪声维度形成随时间变化的流动参数要点map(noise(...), 0, 1, 0, 3)将噪声输出从 [0,1] 映射到风力区间x 方向取 0~3 是主风力y 方向取 -0.5~0 让旗帜略微上飘z 方向取 -1~1 提供纵深摆动xoff/yoff每次递增 0.1 控制风力在网格上的空间变化频率值越小风越平滑zoff每帧递增 0.1是风随时间演化周期性飘动的关键。随后调用physics.update()让 Verlet 积分器推进所有粒子位置。主循环还预留了rotateY(a)的旋转演示代码默认注释可取消注释观察旗帜的 3D 形态。第三步TRIANGLE_STRIP 与 UV 贴图渲染这是本挑战也是 63.1的核心如何把 Unikitty 图像贴到随粒子位置变形的网格上。加载纹理PImage unikitty; // ...setup 末尾... unikitty loadImage(unikitty.jpg);纹理图像存放在仓库的 CodingChallenges/CC_063_unikitty_flag/Processing/CC_063_unikitty_flag/data/unikitty.jpg2448×2448 的方形图片Processing 会从 sketch 的data目录加载它。渲染循环三角形带 纹理坐标noFill(); noStroke(); textureMode(NORMAL); // 纹理坐标使用归一化 [0,1] for (int j 0; j rows-1; j) { beginShape(TRIANGLE_STRIP); texture(unikitty); for (int i 0; i cols; i) { // 上一行顶点 float x1 particles[i][j].x; float y1 particles[i][j].y; float z1 particles[i][j].z; float u map(i, 0, cols-1, 0, 1); float v1 map(j, 0, rows-1, 0, 1); vertex(x1, y1, z1, u, v1); // 下一行顶点 float x2 particles[i][j1].x; float y2 particles[i][j1].y; float z2 particles[i][j1].z; float v2 map(j1, 0, rows-1, 0, 1); vertex(x2, y2, z2, u, v2); } endShape(); }实现要点逐条拆解textureMode(NORMAL)声明后续vertex(x, y, z, u, v)中的纹理坐标是 0~1 的归一化值而非像素值TRIANGLE_STRIP模式每行两两顶点第 j 行与第 j1 行交替写入构成一条连续的三角形带。这种方式相比逐个绘制独立三角形顶点数量几乎减半是 GPU 渲染布料/地形的标准做法。63.1 中讨论的QUAD_STRIP是另一种选择但三角形带在纹理插值上更通用UV 坐标映射u map(i, 0, cols-1, 0, 1)、v map(j, 0, rows-1, 0, 1)把网格行列索引线性映射到纹理坐标。由于顶点坐标取自粒子的实时物理位置而 UV 坐标由固定行列索引算出旗帜飘动时图像就会随之扭曲——这正是飘动的 Unikitty 旗帜的视觉效果来源noFill()与noStroke()渲染纯纹理表面避免出现线框干扰。最后绘制旗杆把旗帜左边缘与一条竖线对齐stroke(255); strokeWeight(4); line(-cols*w/2 - 100, -rows*w/2, -cols*w/2 - 100, height);调试时可取消注释//for (Spring s : springs) s.display();与粒子display()直接看到物理网格结构。完整可运行代码将 CC_063_unikitty_flag.pde、Particle.pde、Spring.pde 三个文件放入同一 sketch 目录并把unikitty.jpg放入data子目录即可在 Processing需安装 toxiclibs 库中运行。渲染窗口为size(800, 600, P3D)启用 3D 渲染器。p5.js 移植参考仓库中同一系列的 2D 布料CC_020_ClothSimulation/P5提供了 p5.js 移植的完整参照页面按顺序引入 p5.js、toxiclibs.js 与 toxichelper.js见 index.htmlJS 侧同样遵循粒子入物理世界 → 弹簧连接 → 锁定锚点 → 每帧 update的结构。若要把本挑战移植到 p5.js仅需将三维类替换为VerletPhysics3D对应接口、loadImage改为异步加载并保持beginShape(TRIANGLE_STRIP)texture() 归一化 UV 的渲染管线不变。参数调节指南参数位置效果与建议cols/rows40主程序顶部网格密度。增大可让旗帜更细腻但粒子与弹簧数量平方级增长注意性能w10主程序顶部粒子间距同时决定弹簧静止长度与旗帜整体尺寸弹簧强度super(a, b, w, 1)的第三参Spring.pde越大布料越硬挺越小越柔软、摆动幅度越大重力Vec3D(0, 0.5, 0)setup增大使旗帜下垂更明显减小则更轻盈风力区间0~3/-0.5~0/-1~1draw控制三个方向的风力强度主导飘动幅度与方向xoff/yoff步长 0.1draw风力在网格上的空间变化频率zoff步长 0.1draw风随时间演化的速度越大飘动越急促常见问题纹理未显示确认调用了textureMode(NORMAL)、beginShape()后立即texture(unikitty)且vertex()传入 5 个参数x, y, z, u, v纹理坐标必须落在 [0,1] 区间归一化模式下。旗帜完全不飘检查physics.update()是否在每帧draw()中调用以及是否在draw()中为每个粒子执行了addForce(wind)。旗帜脱离旗杆确认左边缘粒子已通过particles[0][i].lock()锁定若只锁两端边缘中部会下垂。画面只有线框确认渲染循环中已设置noFill(); noStroke();或检查是否误把调试用的弹簧/粒子display()保留在纹理绘制之后。延伸阅读本挑战第一部分063.1-unikitty-flag.md深入讲解beginShape()/endShape()/texture()与TRIANGLE_STRIP、QUAD_STRIP的取舍布料物理基础020-cloth3d.md 与 CC_020_ClothSimulation展示无纹理的 2D/3D 布料网格搭建自定义形状9.22-custom-shapes.md 与 18.8-custom-shapes-in-webgl-with-p5js.md介绍 p5.js 中beginShape()、vertex()的通用用法。赞分享教程文档示例工程【免费下载链接】website-archiveArchive of the Coding Train website (first version)项目地址https://gitcode.com/gh_mirrors/we/website-archive点击查看免费下载相关推荐用 Processing 为 3D 布料模拟贴上旗帜纹理Unikitty Flag 挑战CC 063.1源码全解析用 Processing 为 3D 布料模拟贴上旗帜纹理Unikitty Flag 挑战CC 063.1源码全解析 导读 本文以 Coding Train教程文档示例工程旗帜数据提供者Essentials中的旗帜元数据处理方案旗帜数据提供者Essentials中的旗帜元数据处理方案 在Minecraft服务器开发中旗帜Banner作为一种具有丰富自定义能力的物品其元数据处理游戏开发Hindsight API网关统一管理和保护记忆API的终极指南Hindsight API网关统一管理和保护记忆API的终极指南 Hindsight作为一款专注于AI智能体记忆管理的开源项目其API网关是实现记忆统一管理人工智能AI AgentAgent 记忆MCP 服务上一篇跨越Android固件格式鸿沟一站式智能提取工具的完整指南下一篇Android固件提取终极解决方案一站式工具集Firmware_extractor深度解析创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考