Cocos使用一张贴图实现3D感星空

最新推荐文章于 2025-10-07 20:35:20 发布

原创

最新推荐文章于 2025-10-07 20:35:20 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#shader

这篇博客介绍了如何利用一张星空贴图，在2D平面上通过Shader实现具有3D感的动态星空效果。通过应用sin和cos函数的偏移采样，并结合TIME函数驱动，创造出明显的动态立体感。

有段时间没码博客了。

今天分享一个使用一张贴图在一个2D平面上实现3D感星空的Shader。

意图：前段时间游戏登录界面背景图片需要临时更换，美术同学没办法快速提供，于是我临时想到做一个动态星空来当登录背景。

贴图：
这是在网上找的星空的图片在这里插入图片描述
没找到特别合适的，勉强符合要求。主要看中有黑色块较多，适合做加法叠加。

效果：
在这里插入图片描述

效果还是相当的明显的。

思路：做多次的不同速的sin cos 偏移采样，最终再做叠加。使用TIME函数做驱动，让其动起来。

代码：

#ifdef GL_ES
....
void main()
{
	vec2 cp = vec2(v_texCoord.x,v_texCoord.y);
	//v的sin偏转 叠加到u上 ，变化速度为CC_SinTime.r*3.0
	cp.x += 0.1*sin(cp.y*3.0+CC_SinTime.r*3.0);
	float v1 = sin(CC_SinTime.r*1.2)*0.3+0.9;
	//第一次采样
	vec4 t1 = texture2D(CC_Texture0, (cp*v1+vec2(0.1,0.1))*1.0);
	cp = vec2(v_texCoord.x*0.9,v_texCoord.y*1.2);
	//v的cos偏转 叠加到u上
	cp.x += 0.1*cos(cp.y*4.0+CC_SinTime.r*3.5);
	cp.y -= 0.1;
	float v2 = cos(CC_SinTime.r)*0.2+1.0;
	//第二次采样
	vec4 t2 = texture2D(CC_Texture