php中文网 | cnphp.com

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
查看: 828|回复: 0

如何用OpenGL的点精灵(point sprite)绘制雪花?

[复制链接]

2871

主题

2881

帖子

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

UID
1
威望
0
积分
7283
贡献
0
注册时间
2021-4-14
最后登录
2024-9-19
在线时间
715 小时
QQ
发表于 2022-2-7 21:25:36 | 显示全部楼层 |阅读模式
看冬奥才知道,阿勒泰不但是中国的“雪都”,还是“人类滑雪起源地”。这个说法是否成立,姑且不论,阿勒泰的雪的确很漂亮。冬奥会有一个宣传片,就是借用一朵阿勒泰雪花的视角来讲述冬奥会的故事,既有历史的厚重,又有艺术的浪漫,极具视觉冲击感。
image.png
那么问题来了:如何用OpenGL绘制雪花呢?通常,点精灵(point sprite)技术被用于描述大量粒子在屏幕上的运动,自然也可以用于绘制雪花。点精灵可以理解为贴了纹理图片的点——仅用一个vertex就可以把一个2D纹理图片绘制到屏幕的任何位置。

在OpenGL中开启和使用点精灵有一点点复杂,好在WxGL对此做了封装,用起来非常简单。在给出演示代码前,先贴两张雪花的纹理图片。
snow_1.png

image.png
snow_2.png

image.png
熟悉GLSL语言的同学,很容易读懂着色器源码。将着色器源码、纹理图片装进模型之后,只需要show一下,雪花就显示出来了。如果想实现雪花飘飘的效果,请参考我的另一篇博文《用OpenGL导演一场烟花盛会,迎接即将到来的新年》。
[mw_shl_code=applescript,true]import numpy as np
import wxgl
from wxgl import wxplot as plt

vshader_src = """
    #version 330 core
    in vec4 a_Position;
    uniform mat4 u_MVPMatrix;
    void main() {
        gl_Position = u_MVPMatrix * a_Position;
        gl_PointSize = (a_Position.z + 1) * 30;
    }
"""

fshader_src = """
    #version 330 core
    uniform sampler2D u_Snow_1;
    in float idx;
    void main() {
        gl_FragColor = texture2D(u_Snow_1, gl_PointCoord);
    }
"""

m = wxgl.Model(wxgl.POINTS, vshader_src, fshader_src, sprite=True) # 通过sprite=Treue开启点精灵
m.set_vertex('a_Position', np.random.random((300, 3))*2-1) # 随机生成300个点
m.add_texture('u_Snow_1', 'res/image/snow_1.png', wxgl.TEXTURE_2D) # 添加雪花纹理
m.set_mvp_matrix('u_MVPMatrix') # 设置模型矩阵、视点矩阵和投影矩阵

plt.model(m)
plt.show()
[/mw_shl_code]
下面是使用snow_1.png做纹理的效果。
image.png
下面是使用snow_2.png做纹理的效果。

image.png
不过,这样的雪花略显单调,毕竟,世界上没有两片完全相同的雪花。怎样让雪花看起来更逼真一点呢?下面的代码尝试在片元着色器中混用两种纹理
[mw_shl_code=applescript,true]import numpy as np
import wxgl
from wxgl import wxplot as plt

vshader_src = """
    #version 330 core
    in vec4 a_Position;
    uniform mat4 u_MVPMatrix;
    void main() {
        gl_Position = u_MVPMatrix * a_Position;
        gl_PointSize = (a_Position.z + 1) * 30;
    }
"""

fshader_src = """
    #version 330 core
    uniform sampler2D u_Snow_1;
    uniform sampler2D u_Snow_2;
    in float idx;
    void main() {
        if (fract(sin(dot(gl_PointCoord ,vec2(12.9898,78.233))) * 43758.5453) < 0.5) {
            gl_FragColor = texture2D(u_Snow_1, gl_PointCoord);
        } else {
            gl_FragColor = texture2D(u_Snow_2, gl_PointCoord);
        }
    }
"""

m = wxgl.Model(wxgl.POINTS, vshader_src, fshader_src, sprite=True) # 通过sprite=Treue开启点精灵
m.set_vertex('a_Position', np.random.random((300, 3))*2-1) # 随机生成300个点
m.add_texture('u_Snow_1', 'res/image/snow_1.png', wxgl.TEXTURE_2D) # 添加雪花纹理1
m.add_texture('u_Snow_2', 'res/image/snow_2.png', wxgl.TEXTURE_2D) # 添加雪花纹理2
m.set_mvp_matrix('u_MVPMatrix') # 设置模型矩阵、视点矩阵和投影矩阵

plt.model(m)
plt.show()
[/mw_shl_code]
这个雪花有点独特吧?
image.png

回复

使用道具 举报

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

本版积分规则

QQ|php中文网 | cnphp.com ( 赣ICP备2021002321号-2 )

GMT+8, 2024-9-20 06:12 , Processed in 0.186553 second(s), 34 queries , Gzip On.

Powered by Discuz! X3.4 Licensed

Copyright © 2001-2020, Tencent Cloud.

申明:本站所有资源皆搜集自网络,相关版权归版权持有人所有,如有侵权,请电邮(fiorkn@foxmail.com)告之,本站会尽快删除。

快速回复 返回顶部 返回列表