【Shader特效1】关键帧实现的动画效果顶点着色器的开发

最新推荐文章于 2023-08-15 14:00:48 发布
原创 最新推荐文章于 2023-08-15 14:00:48 发布 · 1k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#关键帧 #动画 #Shader #着色器 #着色器特效

本文介绍了使用顶点着色器开发的关键帧动画效果，通过融合不同模型的顶点数据来实现翅膀上下摆动的动画。开发者尹豆分享了基本原理和代码实现，引用了《OpenGL ES 3.X 游戏开发 下卷》作为参考，并提供了代码链接。

关键帧实现的动画效果顶点着色器的开发

说在开始

最近使用顶点着色器开发了一个根据三个关键帧动画的例子，在这里进行总结一些算法和开发过程。

作者：尹豆（憨豆酒），联系我yindou97@163.com，熟悉图形学，图像处理领域，本章代码： https://github.com/douysu/computer-graphics-notes

参考内容：
  • 《OpenGL ES 3.X 游戏开发 下卷》

运行效果

这里写图片描述

基本原理

其原理为加载三个不同的obj模型中的顶点数据，一个为翅膀扬起的模型，一个为翅膀平行的模型，一个为翅膀下降的模型。然后将顶点数据传到顶点着色器，在通过融合比例进行融合。

代码部分

#version 400
#extension GL_ARB_separate_shader_objects : enable
#extension GL_ARB_shading_language_420pack : enable
layout (push_constant)
最低0.47元/天 解锁文章
顶点动画和UV动画Shader资源.unitypackage
09-20
顶点动画和UV动画Shader资源，资源包形式，导入项目即可。
Unity shader实现顶点动画波动效果
08-19
主要为大家详细介绍了Unity shader实现顶点动画波动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vulkan_顶点着色器特效5(关键帧动画)
qq_35312463的博客
08-05 644
前两节分别给出了两个单一的用顶点着色器实现软体的案例，本节将给出一个综合性的软体案例
UnityShader 顶点动画
awsl_tsl的博客
02-22 675
顶点动画是在顶点着色器中对顶点先进行偏移，然后做MVP变化，来模拟动画效果。 Shader "Custom/WaterMat" { Properties { _MainTex ("Texture", 2D) = "white" {} _WaveSpeed("WaveSpeed", float) = 1 _WaveScale("WaveScale", float) = 10 } SubShader ...
表面着色器的顶点动画
u012941657的博客
08-11 458
Shader "Custom/7.3" { Properties { _MainTex ("Base (RGB)", 2D) = "white" {} _tintAmount("Tint Amount",Range(0,1))=0.5 _ColorA("Color A",Color) = (1,1,1,1) _ColorB("Color B",Color) = (1,1,1,1)
Vulkan_顶点着色器特效3(膨胀/缩小/爆炸特效)
qq_35312463的博客
07-31 714
本部分给出通过使用顶点着色器实时改变 3D 模型中顶点的位置，以实现物体吹气膨胀、萎缩、爆炸效果的案例。 一、特效基本原理 介绍本案例的具体开发之前，首先需要了解本节案例实现吹气膨胀特效的基本原理，如下图所示： 从图中可以看出，实现膨胀特效时，由顶点着色器根据收到的参数将当前处理的顶点位置沿当前顶点的法向量方向移动一定的距离。每次处理时移动距离的大小由传入的参数控制，这样就可以非常方便地实现膨胀的效果了。 二、实现 了解了本案例的运行效果后，接下来简单介绍本案例的具体开发过程。由于本案例中的大部分代码与
Shader顶点动画+像素动画
fchewqeqweqw的博客
09-18 280
原理简单，就是写起来容易懵，而且网上看了一些文章都没有提到关键代码的实现原理，先上代码，再说原理 fixed4 frag (v2f i) : SV_Target { float angel=_RSpeed *_Time.x; float2 uv = i.uv.xy - float2(0.5, 0.5);//UV原点移动到UV中心点 uv = float2(uv.x *cos(angel) + uv.y * sin
Vulkan_顶点着色器特效1(流动的水面或飘扬的红旗)
qq_35312463的博客
07-29 892
顶点着色器妙用系列—流动的水面或飘扬的红旗 本部分主要介绍顶点着色器来实现流动的水面或飘扬的红旗的基本原理。 基础模型框架主要是参照之前章节的Vulkan_动态地形细分(Tessellation Shader) 一、基本原理 介绍本案例的具体开发步骤之前首先需要了解实现旗帜飘扬的基本原理，如下图所示： 从上图中可以看出，矩形的网格体由大量的小三角形组成的。这样只要在绘制一帧画面时由顶点着色器根据一定的 规则变换各个顶点的位置，即可得到流动或者迎风飘动的效果。 为了使流动或飘动过程比较平滑，本案例采用的是
Vulkan_顶点着色器特效4(风吹树木等植被效果)
qq_35312463的博客
08-02 795
本案例实现在风力作用下树木植被的弯曲旋转等效果。 一、基本原理 本案例中在上一小节间接绘制的场景基础上实现植被树干会随着风力的大小、方向产生对应的弯曲，下图给出了如何计算某一帧中树干上指定顶点弯曲后位置的策略。 从图中可以看出，为了简化计算，本案例中采用的风向是与 XOZ 平面平行的。设当前风向与 z 轴正方向的夹角为 α，树干原始状态下与 y 轴重合。点 A 为树干模型中的任一顶点，在风的吹动下偏转到 A’点。 顶点着色器需要计算的问题为：已知 A 点坐标（X0,Y0,Z0）、当前风向与 z 轴正方向
Vulkan_顶点着色器特效6(二维扭曲)
qq_35312463的博客
08-07 583
前面几个案例都是在 3D 空间中对顶点位置进行的变换，但本次将给出一个在 2D 空间中基于顶点位置变换进行二维扭曲的案例。 一、基本原理 介绍本节案例的具体开发之前，首先需要了解二维扭曲的基本情况，如图所示。 从图中可以看出，左侧的原始三角形经过扭曲处理后产生了右侧奇异的形状，犹如一个风车。同时从图中可以看出，要想对原始三角形实现扭曲处理，必须将大三角形切分为很多小三角形。下面简单介绍扭曲的计算思路，具体步骤如下。 （1） 设扭动的中心点为点 O，其坐标为（X0,Y0）；绕中心点被扭动的点为 D，其
UnityShader---顶点动画（序列帧、滚动的背景、顶点动画、广告牌）（内置渲染管线）---12
weixin_41155760的博客
12-28 560
序列帧： Shader "Unlit/22" { Properties { _Color("Color",Color)=(1,1,1,1) _MainTex ("Texture", 2D) = "white" {} _HorizontalNum("HorizontalNum",Float)= 4 _VerticalNum("VerticalNum",Float)=4 _Speed("Speed",Range(0,
UnityShader23：顶点动画
加载中...
02-21 2209
前置：UnityShader22：序列帧动画 一、顶点动画 如果说序列帧动画（uv 动画）是通过改变 uv 坐标来实现的，那么顶点动画就是通过改变 Mesh 每个顶点的位置，直接让这个物体“扭曲变形”来实现动态效果 SCP783-扭曲的人只需要在 Shader 中修改顶点着色器中的 pos 值就可以实现简单的顶点动画，顶点动画的特点： 想要实现复杂的动画可能较为困难，如有错误的计算可能会得到非常鬼畜的效果 由于是顶点动画，所以动画的精细程度和物体 Mesh 顶点数目成正比，必然是顶点越细密，...
用顶点着色器实现渐变动画
痞子龙3D编程
04-07 2247
日志分享给好友复制网址隐藏签名档小字体 上一篇 下一篇 返回日志列表  用顶点着色器实现渐变动画2.3.1渐变动画（Morphing）       Morphing渐变是20世纪90年代出现的一种革命性的计算机图形技术，该技术使得动画序列平滑且易于处理，即使在低档配置
Shader 简单的波浪顶点动画效果
三林博客
07-20 1664
动画和造型中，有许多函数必须要知道 最简单的莫过于sin的波浪形。这是根据sin函数按照时间改变顶点坐标和颜色。 Properties { _MainTex("Base ( RGB) ", 2D) = "white" {} _tintAmount("Tint Amount", Range(0, 1)) = 0.5 _ColorA("Color A"
Unity Shaders and Effects Cookbook (7-2) Surface Shader 中实现 顶点动画
热门推荐
Hello Captain
05-12 1万+
使用顶点函数，我们可以访问网格中的每个顶点位置。这使我们在着色器运行的过程中可以动态的改变顶点位置。创造出丰富的效果。
UnityShader入门精要——顶点动画
weixin_51327051的博客
02-15 2362
流动的河流 Shader "Unity Shaders Book/Chapter 11/Water" { Properties { _MainTex ("Main Tex", 2D) = "white" {} //河流纹理 _Color ("Color Tint", Color) = (1, 1, 1, 1) //整体颜色 _Magnitude ("Distortion Magnitude", Float) = 1 //水流波动幅度 _Frequency ("Dist
【Unity Shader】摇摆的小草——顶点动画
Garsonlab
03-23 1万+
Shader 动画的主要点在坐标变换，代码： Shader "Custom/Grass" { Properties { _MainTex ("Grass Texture", 2D) = "white" {} _TimeScale ("Time Scale", float) = 1 } SubShader{ Tags{"Queue"="Transparent" "Rende
Unity Shader入门精要 第十一章——纹理动画、顶点动画
buzhengli的博客
08-15 960
动画效果往往都是把时间添加到一些变量的计算中，随着时间变换画面也可以随之变换。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值