【Shader特效3】旋转扭动效果顶点着色器实现

最新推荐文章于 2023-09-27 21:50:16 发布
原创 最新推荐文章于 2023-09-27 21:50:16 发布 · 2.3k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Shader #GLSL #扭动特效 #着色器

这篇博客详细介绍了如何使用顶点着色器创建旋转扭动效果，基于OpenGL ES 3.X，通过动态改变顶点位置并计算旋转角度来实现。文章提供了代码示例，并解释了基本原理和关键公式。

旋转扭动效果顶点着色器实现

说在开头：

此小节基于顶点着色器开发一个旋转扭动的效果

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

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

运行效果

首先看一下这个案例的运行效果。
这里写图片描述

基本原理

前提：立方体摆放在XOY平面内，摄像机位置在Z轴正方向。

首先看一下基本的原理的图片。
这里写图片描述
1、首先需要构建一个类似图中所示的几何体，几何体中的顶点用于在顶点着色器中动态改变顶点的位置。
2、根据当前顶点的Y值-起始Y值，得到Y坐标的偏移量，在通过偏移量计算当前的旋

最低0.47元/天 解锁文章
GameMaker Studio开发：Shader开发_顶点着色器和片段着色器的概念
chenlz2007的博客
12-09 1021
在GameMaker Studio中，着色器（Shader）是实现高级图形效果的关键技术。着色器程序运行在GPU（图形处理单元）上，可以对游戏中的每个顶点和每个像素进行自定义处理，从而实现各种复杂的视觉效果。着色器主要分为两种类型：顶点着色器（Vertex Shader）和片段着色器（Fragment Shader）。本节将详细介绍这两种着色器的概念、工作原理以及如何在GameMaker Studio中使用它们。
shader之——扭曲
baicaishisan的博客
12-25 2946
1. 分析： 让一个图片扭曲起来需要对他的uv做改变，正在扭曲的是uv 思路： 1，让一张贴图A 做一个uv动画 或者多张贴图，做不同方向的uv动画 2.主贴图采样的时候，uv加上A的某个通道值，因为A在移动的时候，他的值会由0到1不停的变化 然后就可以扭曲起来了 0到1的数值太大了，所以可以乘上一个系数，让它的幅度变小。这种情况有个缺点，0到1会让它的uv扭曲的同时会往一边 偏移，...
【Shader特效5】扭曲效果顶点着色器的实现
尹豆的博客
10-12 3248
扭曲效果的实现 说在开始： 最近使用顶点着色器开发了一个扭曲的例子，在这里进行总结一些算法和开发过程。我都将我的代码放到了我的github上https://github.com/ModestBean/ShaderSample。本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。 参考内容： 《OpenGL ES 3.X 游戏开发 下卷》
【Shader特效4】波动效果顶点着色器的实现
尹豆的博客
10-12 3665
着色器实现水面波动和和旗帜飘扬效果 本节案例是基于顶点着色器开发的水面波动和旗帜飘扬的效果，其原理非常简单，只需要一个正弦函数就可以实现此种效果了。此顶点着色器的代码都在我的github上，https://github.com/ModestBean/ShaderSample。本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。 参考内容： 本节的内容
菜鸡shader:L11 UV动画之平移、旋转、缩放及混合应用
weixin_43789369的博客
07-20 1041
Tags {//算出要增加的角度 float theta = _RotateRange * sin(frac(_Time . z * _RotateSpeed) * TWO_PI);//转化为弧度 float radY = radians(theta);//算出该弧度的sin和cos值 sincos(radY , sinY , cosY);
Cg入门14：Vertex Shader - 几何变换 —顶点扭曲
Potter：I am not for learning and learning, but for study and work
03-23 1926
mul (UNITY_MATRIX_MVP,upPos)：参数说明由第一个参数UNITY_MATRIX_MVP 矩阵去影响第二个参数upPos向量(或者矩阵)Shader "Sbin/vf35" { SubShader { pass{ CGPROGRAM #pragma vertex vert #pragma fragment frag #include "U
2.转动的地球shader
yinfourever的专栏
06-30 1149
原理很简单，根据时间对uv中的x轴进行位移，对于地面和云层，取不同的移动速度，分别计算对应的uv坐标，再根据uv坐标从地面和云层的纹理中分别取出对应的值，最后把两者用lerp函数进行混合作为最终结果。 下边的代码包含两个版本，一个是vertex fragment shader，是不带光照的，一个是surface shader版本，带Lambert光照，运行时场景里加上光照才会显得很明亮 Sha
【Shader特效2】树干弯曲顶点着色器实现
尹豆的博客
10-12 1938
树干弯曲顶点着色器实现 说在开始： 最近使用顶点着色器开发了一个树干弯曲的例子，在这里进行总结一些算法和开发过程。我都将我的代码放到了我的github上https://github.com/ModestBean/ShaderSample。本人的知识有限，如果本节内容有错误和不合理之处，还请朋友们多多指出，我会虚心接受每一个建议。 参考内容： 《OpenGL ES 3.X 游戏开发 下
Vulkan_顶点着色器特效1(流动的水面或飘扬的红旗)
qq_35312463的博客
07-29 892
顶点着色器妙用系列—流动的水面或飘扬的红旗 本部分主要介绍顶点着色器来实现流动的水面或飘扬的红旗的基本原理。 基础模型框架主要是参照之前章节的Vulkan_动态地形细分(Tessellation Shader) 一、基本原理 介绍本案例的具体开发步骤之前首先需要了解实现旗帜飘扬的基本原理，如下图所示： 从上图中可以看出，矩形的网格体由大量的小三角形组成的。这样只要在绘制一帧画面时由顶点着色器根据一定的 规则变换各个顶点的位置，即可得到流动或者迎风飘动的效果。 为了使流动或飘动过程比较平滑，本案例采用的是
庄懂着色器_L13_特效篇
精密时空设计局
04-10 298
庄懂-BoyanTata的个人空间_哔哩哔哩_Bilibili 特效类Shader 透明剪切_AlphaCutout_AC AC_AlphaTest经常用于卡通风格,一般卡通项目是后处理+抗锯齿+Bloom 硬边缘比较符合卡通美术风格,后处理可以缓解锯齿,Bloom可以溢出辉光效果 AC没有排序问题,边缘太硬是优点也是缺点(边缘不是0就是1),移动端性能较差 Cutoff 透贴可能是一个从白到黑的过渡,从哪个灰度算它是透的,从哪个灰度算它不是透的,你就要有一个标...
Unity3D Shader 空气扭动效果
weixin_30394251的博客
10-26 482
//预览图 //原理 一个摄像机CullingMask设置只可见"Distortion"的Layer（需要自己手动加），输入到一张RenderTexture，其实就是用于确定哪里要扭曲。 另外一个摄像机CullingMask设置成对除了"Distortion"的Layer可见，并挂上后期效果脚本。 //Shader代码 Shader "Hidden/Distortio...
OpenGL 着色器基础 - 旋转平移调试
04-18
本资源是本人相关博客内容的相关代码，包含了全部的VS2015 工程文件、环境配置、OpenGL工具库、源码及注释。博客地址： https://blog.youkuaiyun.com/xiongyuanxy/article/details/89356061 因为博客比较长，偏重相机原理介绍，所以特地上传代码给学习OpenGL的同学使用。代码已经编译调试通过。Debug模式和Release模式的依赖库都配置好了，可以作为其他OpenGL开发的起始程序。 操作说明： 程序开始后，可以拖动鼠标左键和右键进行视角旋转。中键负责平移，滚轮负责缩放。 着色器部分，只包含最简单的顶点着色器和片元着色器。 本例中使用OpenGL传统管线渲染了坐标轴和屏幕文字，用于输出参考信息，确认着色器的正确性，方便初学者学习着色器。每行代码都有注释，请认真理解。
UnityShader中的旋转平移和缩放
07-25
在Unity中对模型的顶点和贴图进行旋转平移和缩放的操作
SFML2.6 图形模块--使用着色器添加特效
m0_60352504的博客
09-27 477
着色器是在图形卡上执行的小程序。
UnityShader 顶点动画
awsl_tsl的博客
02-22 675
顶点动画是在顶点着色器中对顶点先进行偏移，然后做MVP变化，来模拟动画效果。 Shader "Custom/WaterMat" { Properties { _MainTex ("Texture", 2D) = "white" {} _WaveSpeed("WaveSpeed", float) = 1 _WaveScale("WaveScale", float) = 10 } SubShader ...
Vertex Shader几何变换---扭曲
nicolelili1的专栏
01-05 988
1、顶点的旋转 // Upgrade NOTE: replaced 'mul(UNITY_MATRIX_MVP,*)' with 'UnityObjectToClipPos(*)' Shader "Custom/ls_ten" { SubShader{ pass { CGPROGRAM #pragma vertex vert #pragma fragment frag #in
图形学应用_着色器实例—马赛克效果
qq_39025293的博客
05-24 416
马赛克效果的实现 最终效果： 将材质付给物体： 左侧是表面着色器，右侧是顶点和片元着色器。 将材质球用来处理屏幕特效： 上图是顶点和片元着色器来处理屏幕特效的效果。表面着色器不能用来处理屏幕特效。（不知道为什么，只显示一片黑）。 表面着色器代码： Shader "Custom/Mosaic_SurfaceShader" { Properties{ _MainTex(...
shader学习笔记（一）- 利用矩阵对模型顶点进行缩放、旋转、平移
qq_39515892的博客
03-30 1280
资料参考：《Unity Shader入门精要》—— 冯乐乐 4.5矩阵的几何意义：变换。
unityshader自己学习笔记--vertex shader--顶点转换
m0_69722751的博客
04-18 205
将顶点转为视口需要注意的是，unity的矩阵顺序是反的，也就是：视口–相机—世界验证猜想，脚本中模型可以着色。
Direct3D Shader X1：顶点与像素着色器技巧
1. **顶点着色器**：讲解如何在图形管线的早期阶段操作顶点数据，包括坐标变换、光照计算、动画处理等，以创建更逼真的动态效果。 2. **像素着色器**：讨论如何在每个像素级别上进行色彩和光照的计算，实现细腻的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值