使用粒子效果动画组成模型[自定义shader实现]

已于 2023-03-28 21:17:14 修改
阅读量811 收藏 1
点赞数 1
分类专栏： webGL Three.js 文章标签： 着色器 前端 webgl three.js
于 2022-12-14 16:12:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/printf_hello/article/details/128317579
版权
Three.js 同时被 2 个专栏收录
96 篇文章 23 订阅
订阅专栏
webGL
23 篇文章 1 订阅
订阅专栏

文章目录


请添加图片描述

视频教程：

THREE.js粒子效果-将模型转成粒子

优点

性能卓越
上一篇使用的更改坐标实现 9万个点 页面非常卡顿 光是计算9万个点坐标更替的js就已经造成了堵塞 尝试了在顶点着色器中实现动画发现无丝毫卡顿发生,实为粒子动效正道

实现思路

实现思路
计算交给GPU而不是js线程计算 这样页面不会卡顿
交给Shader的几个数据: 当前的进度 开始坐标 终点坐标 持续时间

传递给Shader的数据
/**
* 粒子控制器
* @param {number} numberOfPoints 数量必须大于所有模型中最大的点数量 不然显示不全
*/
constructor(numberOfPoints: number) {
   this.numberOfPoints = numberOfPoints;
   this.particlesGeometry = new BufferGeometry();
   //顶点着色器的坐标
   this.positions = new Float32Array(numberOfPoints * 3);
   //顶点着色器的变更前的坐标
   this.oldPositions = new Float32Array(numberOfPoints * 3);
   //顶点着色器要前往的目标位置
   this.toPositions = new Float32Array(this.numberOfPoints * 3);
   //顶点着色器要前往的目标位置的时间
   this.toPositionsDuration = new Float32Array(this.numberOfPoints);
   this.particlesGeometry.setAttribute("position", new BufferAttribute(this.positions, 3));
   this.particlesGeometry.setAttribute("oldPositions", new BufferAttribute(this.oldPositions, 3));
   this.particlesGeometry.setAttribute("toPositions", new BufferAttribute(this.toPositions, 3));
   this.particlesGeometry.setAttribute("toPositionsDuration", new BufferAttribute(this.toPositionsDuration, 1));

   // const textureLoader = new TextureLoader();
   this.particles = new Points(this.particlesGeometry, PointsShaderMaterial);
}
根据模型数据生成数据传递给Shader
    /**
     * 向某形状变换
     * @param {ArrayLike<number>} array 数据
     * @param { min: number; max: number } duration 时间段
     */
    to(array: ArrayLike<number>, duration: { min: number; max: number }) {
        const { length } = array;
        const pointCount = length / 3;

        for (let i = 0, realCount = 0; i < this.numberOfPoints; i++, realCount++) {
            //模型的点和生成的点数量未必相等 多的则重合前面的位置
            realCount = realCount % pointCount;
            const i3 = i * 3;
            const r3 = realCount * 3;
            //设置给顶点着色器
            //保存起点
            this.oldPositions[i3] = this.positions[i3];
            this.oldPositions[i3 + 1] = this.positions[i3 + 1];
            this.oldPositions[i3 + 2] = this.positions[i3 + 2];
            //设置终点
            this.toPositions[i3] = array[r3];
            this.toPositions[i3 + 1] = array[r3 + 1];
            this.toPositions[i3 + 2] = array[r3 + 2];
            //设置运动时间
            const useDuration = duration.min + Math.random() * (duration.max - duration.min);

            this.toPositionsDuration[i] = useDuration;
        }
        console.log(this.particlesGeometry);
    }

在生成数据后 至关重要的一步是更新这些属性否则同步不到GPU中

this.particlesGeometry.attributes.position.needsUpdate = true;
this.particlesGeometry.attributes.toPositions.needsUpdate = true;
this.particlesGeometry.attributes.oldPositions.needsUpdate = true;
this.particlesGeometry.attributes.toPositionsDuration.needsUpdate = true;
自定义shader 连接cpu与gpu

然后通过uniform 传递当前的时间供shader计算应该当前应该是什么位置
通过自定义shader实现

import * as THREE from "three";
import vertexShader from "./points.vt.glsl";
import fragmentShader from "./points.fs.glsl";
import { AdditiveBlending } from "three";

export const PointsShaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        //弥补自定义shader没有PointsMaterial材质的size属性
        size: { value: 8 }
    },
    blending: AdditiveBlending,
    transparent: true,
    vertexShader,
    fragmentShader,
    alphaTest: 0.001,
    depthTest: false,
    depthWrite: false,
});

逐帧更新 uniforms 的time

 const clock = new Clock();
    let t = 0;
    td.animation(() => {
        t += clock.getDelta();
        PointsControl.update(t * 1000);
    });
顶点着色器 计算位置

最后工作就交给 顶点着色器来计算粒子的位置

uniform float time;
uniform float size;
attribute vec3 toPositions;
attribute vec3 oldPositions;
attribute float toPositionsDuration;

void main() {
    vec3 dispatchPos = position;
    //顶点位置移动
    //当前时间在点的运行时间中占比
    float percent = time / toPositionsDuration;
    vpercent = percent;
    if(percent <= 1.) {
        dispatchPos.x = oldPositions.x + percent * (toPositions.x - oldPositions.x);
        dispatchPos.y = oldPositions.y + percent * (toPositions.y - oldPositions.y);
        dispatchPos.z = oldPositions.z + percent * (toPositions.z - oldPositions.z);
    } else {
        dispatchPos = toPositions;
    }

    vec4 viewPosition = modelViewMatrix * vec4(dispatchPos, 1.0);
    gl_Position = projectionMatrix * viewPosition;
    gl_PointSize = size;

    //近大远小效果 值自己调节
    gl_PointSize *= (120. / -(modelViewMatrix * vec4(dispatchPos, 1.0)).z);
}
片元着色器

片元着色器基本不需要改动设置一个颜色即可

void main() {
    gl_FragColor = vec4(vec3(0.1, 0.5, 0.4), 0.8);
}

完成代码

粒子控制器

/*
 * @Author: hongbin
 * @Date: 2022-12-14 10:48:40
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-14 15:34:19
 * @Description:使用shader计算粒子位置 减小开销
 */
import {
    AdditiveBlending,
    BufferAttribute,
    BufferGeometry,
    Color,
    Material,
    Points,
    PointsMaterial,
    TextureLoader,
} from "three";
import TWEEN, { Tween } from "@tweenjs/tween.js";
import starMap from "../assets/img/star_09.png";
import { PointsShaderMaterial } from "./shader/points.material";

type ITween = Tween<{
    x: number;
    y: number;
    z: number;
}>;

export class PointsControlClass {
    numberOfPoints: number;
    positions: Float32Array;
    particles: Points<BufferGeometry, Material>;
    // particlesMaterial: PointsMaterial;
    particlesGeometry: BufferGeometry;
    toPositions: Float32Array;
    toPositionsDuration: Float32Array;
    oldPositions: Float32Array;

    /**
     * 粒子控制器
     * @param {number} numberOfPoints 数量必须大于所有模型中最大的点数量 不然显示不全
     */
    constructor(numberOfPoints: number) {
        this.numberOfPoints = numberOfPoints;
        this.particlesGeometry = new BufferGeometry();
        //顶点着色器的坐标
        this.positions = new Float32Array(numberOfPoints * 3);
        //顶点着色器的变更前的坐标
        this.oldPositions = new Float32Array(numberOfPoints * 3);
        //顶点着色器要前往的目标位置
        this.toPositions = new Float32Array(this.numberOfPoints * 3);
        //顶点着色器要前往的目标位置的时间
        this.toPositionsDuration = new Float32Array(this.numberOfPoints);
        this.particlesGeometry.setAttribute("position", new BufferAttribute(this.positions, 3));
        this.particlesGeometry.setAttribute("oldPositions", new BufferAttribute(this.oldPositions, 3));
        this.particlesGeometry.setAttribute("toPositions", new BufferAttribute(this.toPositions, 3));
        this.particlesGeometry.setAttribute("toPositionsDuration", new BufferAttribute(this.toPositionsDuration, 1));

        // const textureLoader = new TextureLoader();
        this.particles = new Points(this.particlesGeometry, PointsShaderMaterial);
        this.init();
    }

    /**
     * 根据初始的粒子数量生成对应的动画控制器
     */

    /**
     * 向某形状变换
     * @param {ArrayLike<number>} array 数据
     * @param { min: number; max: number } duration 时间段
     */
    to(array: ArrayLike<number>, duration: { min: number; max: number }) {
        const { length } = array;
        const pointCount = length / 3;

        for (let i = 0, realCount = 0; i < this.numberOfPoints; i++, realCount++) {
            //模型的点和生成的点数量未必相等 多的则重合前面的位置
            realCount = realCount % pointCount;
            const i3 = i * 3;
            const r3 = realCount * 3;
            //设置给顶点着色器
            //保存起点
            this.oldPositions[i3] = this.positions[i3];
            this.oldPositions[i3 + 1] = this.positions[i3 + 1];
            this.oldPositions[i3 + 2] = this.positions[i3 + 2];
            //设置终点
            this.toPositions[i3] = array[r3];
            this.toPositions[i3 + 1] = array[r3 + 1];
            this.toPositions[i3 + 2] = array[r3 + 2];
            //设置运动时间
            const useDuration = duration.min + Math.random() * (duration.max - duration.min);

            this.toPositionsDuration[i] = useDuration;
        }
        console.log(this.particlesGeometry);
        //至关重要
        this.particlesGeometry.attributes.position.needsUpdate = true;
        this.particlesGeometry.attributes.toPositions.needsUpdate = true;
        this.particlesGeometry.attributes.oldPositions.needsUpdate = true;
        this.particlesGeometry.attributes.toPositionsDuration.needsUpdate = true;
    }

    /**
     * 更新粒子系统
    //  * @param {number} progress 动画进度
     * @param {number} time 当前时间
     */
    update(time: number) {
        // PointsShaderMaterial.uniforms.progress.value = progress;
        PointsShaderMaterial.uniforms.time.value = time;
    }

    setModelData(array: ArrayLike<number>) {
        const { length } = array;
        const pointCount = length / 3;

        for (let i = 0, realCount = 0; i < this.numberOfPoints; i++, realCount++) {
            //模型的点和生成的点数量未必相等 多的则重合前面的位置
            realCount = realCount % pointCount;
            const i3 = i * 3;
            const r3 = realCount * 3;
            this.positions[i3] = array[r3];
            this.positions[i3 + 1] = array[r3 + 1];
            this.positions[i3 + 2] = array[r3 + 2];
        }

        this.particlesGeometry.attributes.position.needsUpdate = true;
    }

    /**
     * 初始化粒子系统 随机方形排布
     * @param {number} range 范围
     */
    init(range: number = 1000) {
        for (let i = 0; i < this.numberOfPoints; i++) {
            const i3 = i * 3;
            const x = (0.5 - Math.random()) * range;
            const y = (0.5 - Math.random()) * range;
            const z = (0.5 - Math.random()) * range;
            this.positions[i3] = x;
            this.positions[i3 + 1] = y;
            this.positions[i3 + 2] = z;
            this.oldPositions[i3] = x;
            this.oldPositions[i3 + 1] = y;
            this.oldPositions[i3 + 2] = z;
        }
        this.particlesGeometry.attributes.position.needsUpdate = true;
    }
}

自定义shader

/*
 * @Author: hongbin
 * @Date: 2022-11-10 10:54:21
 * @LastEditors: hongbin
 * @LastEditTime: 2022-12-14 12:39:11
 * @Description:粒子材料
 */
import * as THREE from "three";
import vertexShader from "./points.vt.glsl";
import fragmentShader from "./points.fs.glsl";
import { AdditiveBlending } from "three";

export const PointsShaderMaterial = new THREE.ShaderMaterial({
    uniforms: {
        time: { value: 0 },
        //弥补自定义shader没有PointsMaterial材质的size属性
        size: { value: 8 },
    },
    blending: AdditiveBlending,
    // side: 2,
    transparent: true,
    // blending: THREE.AdditiveBlending,
    vertexShader,
    //弥补自定义shader没有PointsMaterial材质的sizeAttenuation属性
    fragmentShader,
    alphaTest: 0.001,
    depthTest: false,
    depthWrite: false,
});

着色器代码上述已列出

调用

/**
* 生成粒子系统控制器 传入粒子数量
*/
const PointsControl = new PointsControlClass(90686);
scene.add(PointsControl.particles);
const clock = new Clock();
let t = 0;
td.animation(() => {
   t += clock.getDelta();
   PointsControl.update(t * 1000);
});


//...加载完模型后 传递模型数据
const targetMesh = g.scene.children[0] as Mesh;
if (!targetMesh) return new Error("获取目标物体失败");
const { array, count } = targetMesh.geometry.attributes.position;
PointsControl.to(array, { min: 1000, max: 4000 });
Jedi Hongbin
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
ShaderJoy —— 简单的粒子雨特效【GLSL】
ShaderJoy 的兴趣技术杂货铺
02-07 2034
效果图 粒子雨效果 完整代码和注释 #define PI 3.14159 #define TAU 6.28318 #iUniform float A = 55. in {0., 300.} #iUniform float B = 35. in {0., 300.} #iUniform float C = .25 in {0., 1.} #iUniform float D = 64. in {0., 200.} #iUniform float E = 5. in {0., 20.} #...
13种烟花粒子效果帧动画.zip
09-05
13种烟花粒子效果帧动画，包含一些烟花、漂浮物、爆炸。。。等粒子效果帧动画，开发游戏用。
WPF实现文字粒子闪烁动画效果
01-19
本文实例为大家分享了WPF实现文字粒子闪烁动画的具体代码，供大家参考，具体内容如下 实现效果如下： 思路：首先根据显示文本创建文本路径Geometry，然后在路径内随机生成圆形粒子并添加动画。 步骤： 1、粒子类Particle.cs public class Particle { /// /// 形状 /// public Ellipse Shape; /// /// 坐标 /// public Point Position; } 2、粒子系统ParticleSystem
使用canvas实现粒子流动效果.zip
07-05
使用canvas实现粒子流动效果示例的源代码，含有非常详细的代码注释。
超牛的粒子Shader专用插件-Particle Shaders Vol 1
09-20
超牛的粒子Shader专用插件-Particle Shaders Vol 1；超牛的粒子Shader专用插件-Particle Shaders Vol 1；；；；
Android粒子效果之雨自定义View.rar
07-30
Android粒子效果之雨自定义View.rar,太多无法一一验证是否可用，程序如果跑不起来需要自调，部分代码功能进行参考学习。
多相机和自定义粒子shader
木马人
12-15 528
（2） 这里重点说明 DepthOnly： Depth 这里指的是相机的深度：（实际就是只清除深度） 这时我希望，球能无论什么情况都要被渲染出来，这时就Depth only就可以了，这里深度指的摄像机深度。首先给球和立方体建立不同Layer,然后我们再新建一个摄像机，选择Depth only。摄像机Depth数值大于刚刚主摄像机，设置Culling Mask单 单是球的layer。这样球就会出现在立方体的前面。这就是Depth only的功能了。再看小效果如下图： （3）Dont Clear: 不清空..
RenderDoc[03] 还原粒子特效shader
Hello Captain
01-07 962
对于未加密的ab，可以用对应版本的unity load出来。 模型可以正常显示，但是粒子特效使用的是自制shader，所以显示为红色。 这次的目标是还原粒子特效shader。 最终还原效果如下图： 1.查找对应shader代码 选中粒子特效后，在属性面板可以看到shader名字。 例如上图粒子特效，使用shader名为 Basic Additive。 在RenderDoc中找到shader资源。 来看动图 2.创建shader 在unity中新建Unlit shader。 根据属性面板，添加对应Pro
粒子着色器
开发游戏的老王
09-01 785
原文地址:Docs » Shading » Shading reference » Particle shaders 粒子着色器(Particle shaders) 粒子着色器是一种在物体被绘制之前就执行的特殊顶点着色器。它们被用于计算材质的属性，例如颜色，位置，旋转等。它们可以使用各种(2D,3D)标准着色器进行绘制，这依赖于它们自身是2D还是3D。 粒子着色器是独一无二的，因为它们并非用于...
【Unity】Compute Shader粒子效果模拟
weixin_30487201的博客
08-18 554
在UE4引擎中，已经实现了GPU的粒子系统，可以快速计算数百万的粒子及其碰撞。在Unity中，可以简单的使用Compute Shader，来尝试实现GPU粒子的效果。 实现一个简单的立方体粒子效果，图片压缩的很厉害……粒子数量在6w+ 第一步，我们实现一个脚本，挂在在摄像机组件上，这个脚本我们用来控制粒子的渲染。 1 using System.Collections; 2 ...
OpenGL_ES之GLSL自定义粒子效果.zip
08-10
OpenGL_ES之GLSL自定义粒子效果:运用GLSL自定义着色器实现粒子的不同展示效果,自定义粒子的简单封装、粒子创建使用等
threejs(webgl)-shader入门教程-粒子入门(2)
stonerao
06-22 1810
回顾 1.shader基本使用 粒子
关于3D粒子火焰的Shader代码
最新发布
fyh1997828的博客
10-15 53
【代码】关于3D粒子火焰的Shader代码。
shader粒子衰减
Never_St0p_miss的博客
12-02 122
shader粒子衰减
Unity 标准粒子着色器
SilverFoxGame的博客
12-28 717
标准粒子着色器 Unity 标准粒子着色器是可用于渲染各种粒子系统效果的内置着色器。这些着色器提供标准着色器不具备的各种粒子特有功能。 要使用粒子着色器，请执行以下操作： 1.选择要将着色器应用到的材质。例如，可将火焰材质应用于火焰粒子系统效果。 2.在材质 (Material) 的 Inspector 中，选择Shader Particles。 3.选择要使用的粒子着色器，例如St...
【UnityShader】自定义unity粒子系统使用的shader
糕二不二的博客
07-16 7734
Unity内置的粒子shader有两种，一个Standard Surface，一个Standard Unlit，如果在material里选择这两种shader，会出现这样的字样，这就是自定义粒子shader的重点——顶点流(Vertex Streams)
ShaderJoy —— “旋转粒子”的实现【GLSL】
ShaderJoy 的兴趣技术杂货铺
09-19 6099
效果图： GLSL代码及算法解释： // 动画相关参数 float dotSize = 0.01; float iteration = 100.; float xAmp = 0.3; float yAmp = 0.1; float speed = 0.05; float rotateCanvas = 0.; float rotateParticl
使用ShaderGraph制作边缘融合粒子Shader的启示
ttod的博客
06-23 435
使用ShaderGraph制作边缘融合粒子Shader的启示
Unity ShaderLab 框架全解析3 —— Custom Shader GUI
Wind_Code的博客
03-01 1288
Unity ShaderLab 框架全解析3 Custom Shader GUI 有时shader的一些属性数据无法在编辑器面板上很好的展示出来，所有Unity允许用户自定义shader的显示面板，比如增加其他的控制方式。 在ShaderLab的Subshader外写下如下语句： CustomEditor "name" Unity会自动寻找名为“name”的类，该类需要继承自ShaderGUI ...
使用threejs 实现粒子动画
04-14
Three.js 是一个用于在浏览器中创建 3D 图形的 JavaScript 库。使用 Three.js 创建粒子动画有以下几个步骤： 1. 创建一个场景：首先，你需要创建一个场景，用于存储和显示你的粒子动画。 2. 创建粒子：你可以使用 Three.js 中的对象，如点、线、平面来创建粒子。你可以设置每个粒子的颜色、形状、大小等属性。 3. 创建粒子系统：你可以使用粒子的系统来统一管理粒子，这样你就可以使用相同的方式来控制粒子的运动。 4. 创建动画：你可以使用 requestAnimationFrame 函数或者 Tween.js 等工具来创建动画。你可以设置粒子的运动轨迹、速度等属性来控制粒子的运动。 5. 渲染场景：最后，你需要使用 Three.js 中的渲染器将场景渲染到浏览器中。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值