着色器可以调整形状顶点的位置,从而实现对 3D 模型的扭曲和动画处理。
用着色器调整位置 (p5.strands): Created by Dave Pagurek. Remixed by Dorine Tipo. From 2026 onwards, edited and maintained by p5.js Contributors and Processing Foundation. Licensed under CC BY-NC-SA 4.0.
You can find the code history of these examples here: 2023 code, 2026 p5.strands translation. You can suggest improvements by contributing to the current website!
相关示例

无替代文本
滤镜着色器 (p5.strands)
用着色器处理图像。

无替代文本
滤镜着色器 (GLSL)
用着色器处理图像。

无替代文本
用着色器调整位置 (p5.strands)
使用着色器调整形状顶点。

无替代文本
用着色器调整位置 (GLSL)
使用着色器调整形状顶点。

无替代文本
帧缓冲区模糊
模拟相机的景深效果。

A gradient from red to blue.
Gradient (p5.strands)
Draw a radial gradient between two points in p5.strands.

A dithered gradient from red to blue.
Dithered Gradient (p5.strands)
Draw a dithered radial gradient between two points in p5.strands.

A row of five orange spheres. The closest and farthest spheres from the camera appear blurred.
Depth Blur (p5.strands)
Simulate a camera's depth of field, with a shader written in p5.strands.

A city scene blurred around the edges of the frame
Variable Blur (p5.strands)
Create a blur shader with a different amount of blur at different parts of the canvas.