请选择 进入手机版 | 继续访问电脑版

开源计算机图形学社区(Open Source Computer Graphics Community) |OpenGPU Forum (2007-2013)| OpenGPU Project

 找回密码
 注册
搜索
查看: 1519|回复: 11

求OpenGL ES动画实现算法 [复制链接]

Rank: 5Rank: 5

注册时间
2016-12-6
积分
93
发表于 2016-12-7 17:27:57 |显示全部楼层


如附件图片,现在希望通过opengl es编程实现图片效果,汉字周围的红色射线需要能绕着汉字左右旋转,而且两个汉字周围的红色射线旋转是独立的,而射线旋转过程中射线与与汉字交界(就是汉字边界)是固定的那种旋转方式。

现在的想法是:
方法一:使用两张纹理:汉字纹理 + 汉字周围的射线纹理
两张纹理叠加实现
这种方式,需要逐条射线做运算,感觉很复杂

方法二:直接设置两个红色光源,分别照射两个汉字产生红色射线效果
这种方法,不知道怎么让红色光源产生红色射线,我看过光照,但是那些都是针对物体表面的而不是空间中的线


Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28Rank: 28

注册时间
2007-6-11
积分
28916
发表于 2016-12-8 10:33:27 |显示全部楼层
这个不是常见的AE文字特效么,一定得实时?

使用道具 举报

Rank: 5Rank: 5

注册时间
2016-12-6
积分
93
发表于 2016-12-8 11:09:59 |显示全部楼层
Jedimaster 发表于 2016-12-8 10:33
这个不是常见的AE文字特效么,一定得实时?

问题是我们要嵌入式linux系统的开机动画啊,上面的附件只是一帧而已,实际动画里面,红色光线是动态转动的,希望用opengl es来实现。

使用道具 举报

Rank: 16Rank: 16Rank: 16Rank: 16

注册时间
2010-9-17
积分
2636
发表于 2016-12-8 19:35:18 |显示全部楼层
本帖最后由 QSlash 于 2016-12-8 19:42 编辑

按你描述,这红色是体积光?
左右旋转的意思是俩字背后的红光灯左右平移吗?反正就开机那两下也不追求通用解法,一道光用一块半透明平面行不?像素shader慢慢微调应该能凑出来

使用道具 举报

Rank: 5Rank: 5

注册时间
2016-12-6
积分
93
发表于 2016-12-8 20:04:00 |显示全部楼层
QSlash 发表于 2016-12-8 19:35
按你描述,这红色是体积光?
左右旋转的意思是俩字背后的红光灯左右平移吗?反正就开机那两下也不追求通用 ...

光束不是左右平移,是围绕汉字左右摆动,仿佛有一个红色聚光灯在汉字后面运动的效果。

你说的用半透明的平面?那得多少块平面啊,要有汉字边界的曲面效果啊。。。

使用道具 举报

Rank: 16Rank: 16Rank: 16Rank: 16

注册时间
2010-9-17
积分
2636
发表于 2016-12-8 23:09:28 |显示全部楼层
8086 发表于 2016-12-8 20:04
光束不是左右平移,是围绕汉字左右摆动,仿佛有一个红色聚光灯在汉字后面运动的效果。

你说的用半透明的 ...

灯只要是在你汉字后边动就行
我数了下体积光的数量,10片左右应该就够了,一束光是一片。你在片上通过shader模拟出一束光的效果,光柱的参数很少,肯定能塞进顶点,光束的像素shader里读一下文字的纹理,别遮住字就是。
汉字边界曲面效果我从图里看不明白,有没有动画看看

使用道具 举报

Rank: 13Rank: 13Rank: 13Rank: 13

注册时间
2014-4-25
积分
1768
发表于 2016-12-9 11:05:41 |显示全部楼层
首先检测字体边缘,检测以后作为egde图层,egde图层里由若干个像素点构成文字边缘,设该图层像素点列表Pix_egde[]
设定一个虚拟光源O,连接虚拟光源到egde图层上的每一个像素点做若干射线 line(n)=(O, Pix_egde[n])
对任意射线line(n),知道Pix_egde[n]的坐标和射线的方向,那么就从Pix_egde[n]的位置开始朝着line[n]的方向画红色,
画的过程中用一个衰减模型对颜色亮度进行衰减,得到一个射线图层
射线图层通过亮度颜色叠加到字体图层上...

这是2d的一个想法,如果不旋转相机视角,最好在2d内用几何的方法做,速度快。如果文字固定甚至为文字边缘建一个模型,以这个模型作为周围投射光的轮廓参考。

还有一种办法就是把文字边缘着色,然后朝着背向虚拟光源的方向逐像素复制移动,放大,亮度衰减。

使用道具 举报

Rank: 9Rank: 9Rank: 9

注册时间
2016-5-6
积分
239
发表于 2016-12-9 16:19:02 |显示全部楼层
这里我给出一个实现步骤:

1.把这个二维文字作为纹理贴在一张3D的面片上,不过渲染这个面片需要几点要求:摄像机要正对着面片
(camera的视点方向要垂直面片),2.使用正交投影(平行投影)矩阵对面片 进行3D空间到屏幕空间的变换,毕竟这种渲染本质上与3渲2很接近。

2.要对这张文字纹理里的alpha通道做处理,文字区域像素的alpha值设置为1.0,纹理的其他无效区域alpha
设置为0.0(这个工作直接在photoshop里做,很容易的一个步骤),之所以需处理alpha是因为,实际在渲染3D面片的时候,要根据alpha值把除去文字以外的像素剔除掉(所以绘制面片要用blend方式)。

3.关于第三个步骤其实就是实现体积光散射的原理,关于体积光散射这里我给出两个方案,
用径向模糊的方案:第一遍先渲染文字面片,第二遍对之前渲染的图像做径向模糊,并进行叠加,至于要对模糊像素的一个要点是:最好对高亮的像素做径向模糊,另外除了射线效果外,为了表现文字背后的光源效果,可以在文字面片背后再加一个 贴上光源纹理的面片(当然这个并不是真的光源,只是相当于一个背景层),然后再对整个屏幕高于一定亮度(这个亮度值可以自己根据效果需要设置调整)的像素做径向模糊,显然这不是一个真正的基于光学正确的实现算法,但效果也不错,而且可以模拟光源的运动散射出来的射线效果,应该可以满足楼主的要求,这里附上 代码和DEMO:https://www.shadertoy.com/view/MdG3RD (要翻墙才能打开)

第二个方案就是 一个真正的模拟空间和光学正确的体积光散射方案:
直接在屏幕空间里对每个像素生成一条射线,并迭代求出每个像素对应的空间里的微粒所散射出来的颜色,至于光线的遮挡和阴影信息可以根据的光源的shadowmap和深度值来检测,实现过程略复杂,而且比较耗费性能,但效果也是最好的,代码和DEMO可以看这里https://www.shadertoy.com/view/XlBSRz (要翻墙)

使用道具 举报

Rank: 9Rank: 9Rank: 9

注册时间
2016-5-6
积分
239
发表于 2016-12-9 16:31:17 |显示全部楼层
gon3d 发表于 2016-12-9 11:05
首先检测字体边缘,检测以后作为egde图层,egde图层里由若干个像素点构成文字边缘,设该图层像素点列表Pix_ ...

纯2D的做法其实速度很慢,这是一个需要逐像素计算的过程,从内存读取用CPU来采样的做法只适合放在离线里,与GPU来做图像后期处理的性能相比是没有可比性的。

另外基于空间的变换,光源射线的运动变换远没有3D管线里来的方便。

使用道具 举报

Rank: 5Rank: 5

注册时间
2016-12-6
积分
93
发表于 2016-12-12 09:02:53 |显示全部楼层
升级君 发表于 2016-12-9 16:31
纯2D的做法其实速度很慢,这是一个需要逐像素计算的过程,从内存读取用CPU来采样的做法只适合放在离线里 ...

多谢“升级君”大牛的热心相助啊,我得好好消化一下。
附件是动画效果图

使用道具 举报

Rank: 17Rank: 17Rank: 17Rank: 17Rank: 17

注册时间
2010-3-27
积分
5788
发表于 2016-12-12 12:37:46 |显示全部楼层
楼主说的应该是这个意思

使用道具 举报

Rank: 9Rank: 9Rank: 9

注册时间
2016-5-6
积分
239
发表于 2016-12-12 20:22:15 |显示全部楼层
8086 发表于 2016-12-12 09:02
多谢“升级君”大牛的热心相助啊,我得好好消化一下。
附件是动画效果图
...

效果图我看了,这个应该是直接拿类似AE的软件做的。
用AE做好效果,然后输出为29帧左右的视频,在实际程序运行的时候再逐帧绘制视频就行了。

如果楼主非得要求实时绘制出这个效果的话啊,上面我提的方案也是可以的,关于体积光散射的第二个方案楼主其实可以忽略,第一个放射性模糊的方法应该就能很好的实现这个效果,不过当然没有AE做出的那样平滑。

使用道具 举报

最近看过此主题的会员

您需要登录后才可以回帖 登录 | 注册

‹‹
我的工具栏

关于我们|手机版|Archiver|开源计算机图形学社区(Open Source Computer Graphics Community) | OpenGPU Project | OpenGPU Forum (2007-2013)

GMT+8, 2017-3-28 21:57 , Processed in 0.055192 second(s), 12 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部