Chango的数学Shader世界(二十三)漩涡Shader-复数分析(深渊)「建议收藏」

Chango的数学Shader世界(二十三)漩涡Shader-复数分析(深渊)「建议收藏」目的:我的2D游戏,需要一个有特定感觉的“漩涡shader”。上一节里,我简单实现了这个:但转动有些乏味,它的转动动作是类似这样的:(网图)接下来想让它动起来更加深邃,恐怖。本文先搞了2种效果:(图3,扩散瞳孔)(图4,深渊)抽象分析:前篇的Shader效果之所以看起来乏味,是因为在旋转的时候,像素点的极长(以方块中心为原点极坐标系)并没有改变,只是越接近中心,点的旋转量越小而已。(旋转前后点都在同心圆上)如果我想要深渊有“吃人”的感觉,那么内部的

大家好,又见面了,我是你们的朋友全栈君。

目的:

我的2D游戏,需要一个有特定感觉的“漩涡shader”。

上一节里,我简单实现了这个:

Chango的数学Shader世界(二十三)漩涡Shader-复数分析(深渊)「建议收藏」

但转动有些乏味,它的转动动作是类似这样的:

Chango的数学Shader世界(二十三)漩涡Shader-复数分析(深渊)「建议收藏」

(网图)

接下来想让它动起来更加深邃,恐怖。本文先搞了2种效果:

Chango的数学Shader世界(二十三)漩涡Shader-复数分析(深渊)「建议收藏」Chango的数学Shader世界(二十三)漩涡Shader-复数分析(深渊)「建议收藏」

(图3,扩散瞳孔)(图4,深渊)

抽象分析:

前篇的Shader效果之所以看起来乏味,是因为在旋转的时候,像素点的极长(以方块中心为原点极坐标系)并没有改变,只是越接近中心,

点的旋转量越小而已。

Chango的数学Shader世界(二十三)漩涡Shader-复数分析(深渊)「建议收藏」

(旋转前后点都在同心圆上)

如果我想要深渊有“吃人”的感觉,那么内部的点就要往外转,有种瞳孔扩大的感觉

Chango的数学Shader世界(二十三)漩涡Shader-复数分析(深渊)「建议收藏」

(图6,期望效果)

数学分析:

之前说过,涉及旋转,极坐标/复数往往比线代好,下面用复数推导。

设原先点在(u0,v0),复数为s_{0}e^{\theta _{0}},程序旋转缩放的变幻为s_{1}e^{-\theta _{1}}(顺时针转),当前点位置se^{\theta }

s_{0}e^{\theta _{0}} \cdot s_{1}e^{-\theta _{1}} = se^{\theta _}

可得:

s_{0} = \frac{s}{s1}=\frac{\sqrt{u^{2}+v^{2}}}{s1}

\theta _{0} = \theta +\theta _{1}

由于我们写到shader,输入是u,v,s1,theta1,输出是u0,v0。所以比较方便的是theta0就推导到这步,然后代入:

u_{0} =s_{0}\cdot cos(\theta_{0} )=s_{0}\cdot cos(\theta +\theta_{1} )=s_{0}\cdot (u/s\cdot cos(\theta _{1})-v/s\cdot sin(\theta _{1}))

v_{0} =s_{0}\cdot sin(\theta_{0} )=s_{0}\cdot sin(\theta +\theta_{1} )=s_{0}\cdot (v/s\cdot cos(\theta _{1})+u/s\cdot sin(\theta _{1}))

其中s = \sqrt{u^{2}+v^{2}}

Shader代码:

uniform sampler2D tex; 
uniform float maxScale;
varying vec2 texCoord2D;
void main() 
{ 
	float pi = 3.1415926f; 
	float u = texCoord2D.x-0.5f; 
	float v = texCoord2D.y-0.5f; 
	float s = sqrt(u*u+v*v);
	float scale = mix(1.0f,maxScale,s/0.707f);
	//float scale = mix(maxScale,1.0f,s/0.707f);
	float s0=s/scale;
	float a = pi;
	float u0 = s0*(u/s*cos(a)-v/s*sin(a));
	float v0 = s0*(v/s*cos(a)+u/s*sin(a));
	if(abs(u0)>0.5||abs(v0)>0.5)
	{
		discard;
	}
	vec2 uv0 = vec2(u0+0.5,v0+0.5); 
	gl_FragColor = texture(tex, uv0);
}

计算scale的时候,被注释的那行是图3,也就是上述“瞳孔方法”效果的算法,即越接近中心的点,越被发散到外面去。

我尝试互换了一下mix中的x,y值,让越远的点放得越大,出现了图4″深渊”的效果,可惜的是这种算法最后深渊底部总是会变黑,因为图片中心部分的像素有限。

 

结语

下次看看能否调整图片大小,或其他办法,让整个临场恐怖感加深。

使用复数在本篇里仅仅是符号简洁,易于推导,完全可以用极坐标。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/151188.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • pycharm和idle语法区别_python文件无法用idle打开

    pycharm和idle语法区别_python文件无法用idle打开  最近在熟悉Python的class类的时候,无意中发现同样的代码,在pycharm和IDLE中结果不同,闲话少说先上代码:1classaa():2def__init__(self,name):3print(“mynameis%s”%name)4def__del__(self):5…

  • 通讯协议与即时通讯[通俗易懂]

    通讯协议与即时通讯[通俗易懂]通讯协议与即时通讯

  • vue toast提示_vue弹出页面

    vue toast提示_vue弹出页面创建一个message.vue组件<template><divclass=”wrap”v-if=”showWrap”:class=”showContent?’fadein’:’fadeout'”><i:class=”iconState?’success’:’wrong'”></i>…

  • oracle优化器统计信息相关

    优化器使用统计信息来生成每个sql语句最优的执行计划。准确的统计信息对于数据库的效率至关重要。dba和程序开发人员都应该了解一些统计信息相关知识,这可以使你更好的理解为什么会生成一个你看到的执行计划,知其然且知其所以然。

  • webstorm激活码【中文破解版】

    (webstorm激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlMLZPB5EL5Q-eyJsaWNlbnNlSW…

  • 数学四大思想八大方法_四种思想方法,让你轻松掌握高中数学

    学习一门知识,究其核心,主要是学其思想和方法,这是学习的精髓。学数学亦如此,分学数学思想和数学方法。数学思想是指客观世界的空间形式和数量关系反映到人们的意识之中,经过思维活动而产生的结果。数学思想是对数学事实与理论经过概括后产生的本质认识。数学方法是指用数学语言表述事物的状态、关系和过程,并加以推导、演算和分析,以形成对问题的解释、判断和预言的方法。高中数学的四种思想方法:1.函数与方程思想1.1…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号