如何用 OpenGL 繪制雪花？

作者 | 許向武       

責(zé)編 | 張紅月

出品 | CSDN博客

看冬奧才知道，阿勒泰不但是中國(guó)的“雪都”，還是“人類滑雪起源地”。這個(gè)說(shuō)法是否成立，姑且不論，阿勒泰的雪的確很漂亮。冬奧會(huì)有一個(gè)宣傳片，就是借用一朵阿勒泰雪花的視角來(lái)講述冬奧會(huì)的故事，既有歷史的厚重，又有藝術(shù)的浪漫，極具視覺(jué)沖擊感。

那么問(wèn)題來(lái)了：如何用OpenGL繪制雪花呢？通常，點(diǎn)精靈（point sprite）技術(shù)被用于描述大量粒子在屏幕上的運(yùn)動(dòng)，自然也可以用于繪制雪花。點(diǎn)精靈可以理解為貼了紋理圖片的點(diǎn)——僅用一個(gè)vertex就可以把一個(gè)2D紋理圖片繪制到屏幕的任何位置。

在OpenGL中開(kāi)啟和使用點(diǎn)精靈有一點(diǎn)點(diǎn)復(fù)雜，好在WxGL對(duì)此做了封裝，用起來(lái)非常簡(jiǎn)單。在給出演示代碼前，先貼兩張雪花的紋理圖片。

熟悉GLSL語(yǔ)言的同學(xué)，很容易讀懂著色器源碼。將著色器源碼、紋理圖片裝進(jìn)模型之后，只需要show一下，雪花就顯示出來(lái)了。如果想實(shí)現(xiàn)雪花飄飄的效果，請(qǐng)參考我的另一篇博文《用OpenGL導(dǎo)演一場(chǎng)煙花盛會(huì)，迎接即將到來(lái)的新年》（https://xufive.blog.csdn.net/article/details/122743824）。

好了，話不多說(shuō)，直接上繪制雪花的代碼：

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) # 通過(guò)sprite=Treue開(kāi)啟點(diǎn)精靈
m.set_vertex('a_Position', np.random.random((300, 3))*2-1) # 隨機(jī)生成300個(gè)點(diǎn)
m.add_texture('u_Snow_1', 'res/image/snow_1.png', wxgl.TEXTURE_2D) # 添加雪花紋理
m.set_mvp_matrix('u_MVPMatrix') # 設(shè)置模型矩陣、視點(diǎn)矩陣和投影矩陣
plt.model(m)
plt.show()

下面是使用snow_1.png做紋理的效果。

下面是使用snow_2.png做紋理的效果。

不過(guò)，這樣的雪花略顯單調(diào)，畢竟，世界上沒(méi)有兩片完全相同的雪花。怎樣讓雪花看起來(lái)更逼真一點(diǎn)呢？下面的代碼嘗試在片元著色器中混用兩種紋理。

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) # 通過(guò)sprite=Treue開(kāi)啟點(diǎn)精靈
m.set_vertex('a_Position', np.random.random((300, 3))*2-1) # 隨機(jī)生成300個(gè)點(diǎn)
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') # 設(shè)置模型矩陣、視點(diǎn)矩陣和投影矩陣
plt.model(m)
plt.show()

這個(gè)雪花有點(diǎn)獨(dú)特吧？