OpenGL ES 名詞解釋(二)

来源:https://www.cnblogs.com/shuopython/archive/2022/10/27/16834187.html
-Advertisement-
Play Games

目錄 一.前言 二.坐標系 1.屏幕坐標系 2.紋理坐標系 3.頂點坐標系 4.圖像坐標系 三.混合 四.變換矩陣 1.平移 2.旋轉 3.縮放 4.矩陣組合順序 五.投影矩陣 1.正交投影 2.透視投影 3.總結 六.幀緩衝區幀 七.VAO 八.VBO 九.PBO 十.FBO 十一.UBO 十二. ...


目錄

零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 基礎

零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 特效

零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 轉場

零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES 函數

零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES GPUImage 使用

零基礎 OpenGL ES 學習路線推薦 : OpenGL ES 學習目錄 >> OpenGL ES GLSL 編程

一.前言

在《OpenGL ES 名詞解釋一》中已經講解了著色器渲染等相關知識，本篇文章著重講解坐標系和矩陣相關內容；

二.坐標系

1.屏幕坐標系

屏幕坐標系 的 左下點（0， 1），右下角（1，1） ， 左上角（0， 0） ， 右上角（1 ， 0）

2.紋理坐標系

紋理坐標系 的 左下點 （0， 0），右下角（1 ， 0） ， 左上角（0， 1 ）， 右上角（1， 1）

3.頂點坐標系

頂點坐標系 的 左下點（-1， -1），右下角（1，-1） ， 左上角（-1， 1） ， 右上角（1 ， 1）

4.圖像坐標系

屏幕坐標系 的 左下點（0， 1），右下角（1，1） ， 左上角（0， 0） ， 右上角（1 ， 0）

很多人有一個誤解：認為 OpenGL ES 紋理原點在左上角，因為如果繪製時紋理坐標設在左下角，繪製的圖像就是上下倒立；而紋理坐標設制在左上角顯示正常；

原因：圖像預設的原點在左上角，而 OpenGL ES 紋理讀取數據或者 FBO 讀取數據時都是以左下角開始，所以圖像才會出現上下倒立的現象；

解決辦法：

  • 方案一：繪製時將紋理坐標上下鏡像
  • 方案二：繪製時將頂點坐標上下鏡像
  • 方案三：繪製時將圖像上下鏡像後在填充到 OpenGL ES 紋理

關於方案三：將圖片上下顛倒可以使用 stb_image 完成

stbi_set_flip_vertically_on_load(true);//開起上下鏡像

三.混合

假設一種不透明東西的顏色是 A，另一種透明的東西的顏色是 B ，那麼透過 B 去看 A ，看上去的顏色 C 就是 B 和 A 的混合顏色，可以用這個式子來近似，設 B 物體的透明度為 alpha (取值為 0 – 1 ，0 為完全透明，1 為完全不透明)

R(C)=alpha*R(B)+(1-alpha)*R(A)
G(C)=alpha*G(B)+(1-alpha)*G(A)
B(C)=alpha*B(B)+(1-alpha)*B(A)

R(x)、G(x)、B(x)分別指顏色 x 的 RGB 分量。看起來這個東西這麼簡單，可是用它實現的效果絕對不簡單，應用 alpha 混合技術，可以實現出最眩目的火光、煙霧、陰影、動態光源等等一切你可以想象的出來的半透明效果。

四.變換矩陣

1.平移

為向量(x,y,z)定義一個平移矩陣

2.旋轉

旋轉過程涉及到弧度與角度的轉化：

弧度轉角度：角度 = 弧度 * (180.0f / PI)

角度轉弧度：弧度 = 角度 * (PI / 180.0f)

3.縮放

為向量(x,y,z)定義一個縮放矩陣

4.矩陣組合順序

矩陣組合順序 1：先平移，再旋轉，最後縮放——— OK

矩陣組合順序 2：先平移，再縮放，最後旋轉——— ERROR

矩陣組合順序 3：先縮放，再旋轉，最後平移——— ERROR

（除了第一種，其他組合順序都是錯誤的）

矩陣組合順序可以參考 glm 官方 demo 案例：

#include <glm/vec3.hpp> // glm::vec3
#include <glm/vec4.hpp> // glm::vec4
#include <glm/mat4x4.hpp> // glm::mat4
#include <glm/ext/matrix_transform.hpp> // glm::translate, glm::rotate, glm::scale
#include <glm/ext/matrix_clip_space.hpp> // glm::perspective
#include <glm/ext/scalar_constants.hpp> // glm::pi

glm::mat4 camera(float Translate, glm::vec2 const& Rotate)
{
	glm::mat4 Projection = glm::perspective(glm::pi<float>() * 0.25f, 4.0f / 3.0f, 0.1f, 100.f);
	glm::mat4 View = glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, -Translate));
	View = glm::rotate(View, Rotate.y, glm::vec3(-1.0f, 0.0f, 0.0f));
	View = glm::rotate(View, Rotate.x, glm::vec3(0.0f, 1.0f, 0.0f));
	glm::mat4 Model = glm::scale(glm::mat4(1.0f), glm::vec3(0.5f));
	return Projection * View * Model;
}

至於矩陣組合順序為什麼是先平移，再旋轉，最後縮放，後面將專門留一篇文章做詳細講解！可以關註學習目錄《OpenGL ES 基礎》

五.投影矩陣

由觀察空間到裁剪空間在公式上左乘一個投影矩陣，投影矩陣的產生分為兩種：正交投影和透視投影;

不管是正交投影還是透視投影，最終都是將視景體內的物體投影在近平面上，這也是 3D 坐標轉換到 2D 坐標的關鍵一步。

正投影就是沒有 3D 效果的投影方式，用於顯示 2D 效果；

透視投影就是有 3D 效果的投影方式，用於顯示 3D 效果.

1.正交投影

正交投影產生的效果無論你離物體多遠多近，都不會產生近大遠小的效果，大致如下圖，視點作為觀察點，視椎體由前後左右上下 6 個麵包裹而成，物體在視椎體內部，最後投影到 near 近平面，視椎體範圍之外將無法顯示到屏幕上來

正投影就是沒有 3D 效果的投影方式，用於顯示 2D 效果；

透視投影就是有 3D 效果的投影方式，用於顯示 3D 效果.

正交投影矩陣，由 Matrix.ortho 這個方法產生

void orthoM(float[] m, int mOffset,
        float left, float right, float bottom, float top,
        float near, float far)

可以把近平面看作屏幕，left、right、top、bottom 都是以近平面中心相對的距離，由於手機屏幕的長寬一般不相等，以短邊為基準 1 ，長邊取值為長/寬，所以如果一個豎屏的手機使用這個正交投影產生的矩陣應該是：

float ratio = (float)height / width;
Matrix.ortho(projectMatrix,0,-1, 1, -ratio, ratio, 1, 6);

2.透視投影

透視投影會產生近大遠小的效果，正投影就是沒有 3D 效果的投影方式，用於顯示 2D 效果；透視投影就是有 3D 效果的投影方式，用於顯示 3D 效果.產生的視椎體如下圖：

透視投影也有響應的函數產生投影矩陣：

Matrix.frustumM(float[] m, int offset, float left,
          float right, float bottom, float top,
          float near, float far);

3.總結

經過上述的講解，我們要完成 4 個空間轉換，需要用到了 3 個轉換矩陣：

從局部空間轉換到世界空間，我們需要用到模型矩陣 ModeMatrix ，這個矩陣就是我們通常對物體進行 translate 、rorate 換後產生的矩陣

從世界空間到觀察空間，我們需要用到觀察矩陣 ViewMatrix ，這個矩陣可以 setLookAt 方法幫我們生成

從觀察空間到裁剪空間，我們可以用到投影矩陣 ProjectMatrix，使用 ortho 、frustuM 還有 perspectiveM 方法產生投影矩陣

最後以上幾個坐標依次左乘我們的定義的坐標 Position 就可以得到歸一化坐標了

所以，總結出來的公式

//註意順序
gl_Position = ProjectMatrix * ViewMatrix * ModeMatrix * g_Position ;

六.幀緩衝區幀

緩衝區就是顯存，也被叫做幀緩存，它的作用是用來存儲顯卡晶元處理過或者即將提取的渲染數據。如同電腦的記憶體一樣，顯存是用來存儲要處理的圖形信息的部件。

最終”存活”下來的像素需要被顯示到屏幕上，但是顯示屏幕之前，這些像素是會被先提交在幀緩衝區的。幀緩存區的每一存儲單元對應屏幕上的一個像素，整個幀緩存區對應一幀圖像。

在下一個刷新頻率到來時，視頻控制器會把幀緩衝區內的內容映射到屏幕上。一般採用雙緩衝機制，存在兩個幀緩衝區。

七.VAO

VAO (頂點數組對象：Vertex Array Object)是指頂點數組對象，主要用於管理 VBO 或 EBO ，減少 glBindBuffer 、glEnableVertexAttribArray、 glVertexAttribPointer 這些調用操作，高效地實現在頂點數組配置之間切換。

OpenGL 2.0 有 VBO，沒有 VAO，VAO 是 OpenGL 3.0 才開始支持的，並且在 OpenGL 3.0 中，強制要求綁定一個 VAO 才能開始繪製。

八.VBO

VBO（頂點緩衝區對象:Vertex Buffer Object）是指把頂點數據保存在顯存中，繪製時直接從顯存中取數據，減少了數據傳輸的開銷，因為頂點數據多了，就是坐標的數據多了很多的很多組，切換的時候很麻煩，就出現了這個 VAO，綁定對應的頂點數據

OpenGL 2.0 有 VBO，沒有 VAO，VAO 是 OpenGL 3.0 才開始支持的，並且在 OpenGL 3.0 中，強制要求綁定一個 VAO 才能開始繪製。

九.PBO

**PBO （Pixel Buffer Object）是 OpenGL ES 3.0 的概念(OpenGL 2.0 不支持 PBO ，3.0 支持 PBO)，稱為像素緩衝區對象，**主要被用於非同步像素傳輸操作。PBO 僅用於執行像素傳輸，不連接到紋理，且與 FBO （幀緩衝區對象）無關。PBO 設計的目的就是快速地向顯卡傳輸數據，或者從顯卡讀取數據，我們可以使用它更加高效的讀取屏幕數據。

  1. PBO 類似於 VBO（頂點緩衝區對象），PBO 開闢的也是 GPU 緩存，而存儲的是圖像數據。
  2. PBO 可以在 GPU 的緩存間快速傳遞像素數據，不影響 CPU 時鐘周期，除此之外，PBO 還支持非同步傳輸。
  3. PBO 類似於“以空間換時間”策略，在使用一個 PBO 的情況下，性能無法有效地提升，通常需要多個 PBO 交替配合使用。

十.FBO

FBO(Frame Buffer Object) 即幀緩衝對象。FBO 有什麼作用呢？通常使用 OpenGL ES 經過頂點著色器、片元著色器處理之後就通過使用 OpenGL ES 使用的視窗系統提供的幀緩衝區，這樣繪製的結果是顯示到視窗(屏幕)上。

但是對於有些複雜的渲染處理，通過多個濾鏡處理，這時中間流程的渲染採樣的結果就不應該直接輸出顯示屏幕，而應該等所有處理完成之後再顯示到視窗上。這個時候 FBO 就派上用場了。

FBO 是一個容器，自身不能用於渲染，需要與一些可渲染的緩衝區綁定在一起，像紋理或者渲染緩衝區。，它僅且提供了 3 個附著（Attachment），分別是顏色附著、深度附著和模板附著。

十一.UBO

**UBO，Uniform Buffer Object 顧名思義，就是一個裝載 uniform 變數數據的緩衝區對象，**本質上跟 OpenGL ES 的其他緩衝區對象沒有區別，創建方式也大致一致，都是顯存上一塊用於儲存特定數據的區域。

當數據載入到 UBO ，那麼這些數據將存儲在 UBO 上，而不再交給著色器程式，所以它們不會占用著色器程式自身的 uniform 存儲空間，UBO 是一種新的從記憶體到顯存的數據傳遞方式，另外 UBO 一般需要與 uniform 塊配合使用。

本例將 MVP 變換矩陣設置為一個 uniform 塊，即我們後面創建的 UBO 中將保存 3 個矩陣。

#version 310 es
layout(location = 0) in vec4 a_position;
layout(location = 1) in vec2 a_texCoord;
layout (std140) uniform MVPMatrix
{
    mat4 projection;
    mat4 view;
    mat4 model;
};
out vec2 v_texCoord;
void main()
{
    gl_Position = projection * view * model * a_position;
    v_texCoord = a_texCoord;
}

設置 uniform 塊的綁定點為 0 ，生成一個 UBO 。

GLuint uniformBlockIndex = glGetUniformBlockIndex(m_ProgramObj, "MVPMatrix");
glUniformBlockBinding(m_ProgramObj, uniformBlockIndex, 0);
glGenBuffers(1, &m_UboId);
glBindBuffer(GL_UNIFORM_BUFFER, m_UboId);
glBufferData(GL_UNIFORM_BUFFER, 3 * sizeof(glm::mat4), nullptr, GL_STATIC_DRAW);

繪製的時候更新 Uniform Buffer 的數據，更新三個矩陣的數據，註意偏移量。

glBindBuffer(GL_UNIFORM_BUFFER, m_UboId);
glBufferSubData(GL_UNIFORM_BUFFER, 0, sizeof(glm::mat4), &m_ProjectionMatrix[0][0]);
glBufferSubData(GL_UNIFORM_BUFFER, sizeof(glm::mat4), sizeof(glm::mat4), &m_ViewMatrix[0][0]);
glBufferSubData(GL_UNIFORM_BUFFER, 2 *sizeof(glm::mat4), sizeof(glm::mat4), &m_ModelMatrix[0][0]);
glBindBuffer(GL_UNIFORM_BUFFER, 0);

十二.TBO

紋理緩衝區對象，即 TBO（Texture Buffer Object），是 OpenGL ES 3.2 引入的概念，因此在使用時首先要檢查 OpenGL ES 的版本，Android 方面需要保證 API >= 24 。

TBO 需要配合緩衝區紋理（Buffer Texture）一起使用，Buffer Texture 是一種一維紋理，其存儲數據來自紋理緩衝區對象（TBO），用於允許著色器訪問由緩衝區對象管理的大型記憶體表。

在 GLSL 中，只能使用 texelFetch 函數訪問緩衝區紋理，緩衝區紋理的採樣器類型為 samplerBuffer 。

生成一個 TBO 的方式跟 VBO 類似，只需要綁定到 GL_TEXTURE_BUFFER ，而生成緩衝區紋理的方式與普通的 2D 紋理一樣。

//生成一個 Buffer Texture
glGenTextures(1, &m_TboTexId);

float *bigData = new float[BIG_DATA_SIZE];
for (int i = 0; i < BIG_DATA_SIZE; ++i) {
    bigData[i] = i * 1.0f;
}

//生成一個 TBO ，並將一個大的數組上傳至 TBO
glGenBuffers(1, &m_TboId);
glBindBuffer(GL_TEXTURE_BUFFER, m_TboId);
glBufferData(GL_TEXTURE_BUFFER, sizeof(float) * BIG_DATA_SIZE,       bigData, GL_STATIC_DRAW);
delete [] bigData;

使用紋理緩衝區的片段著色器，需要引入擴展 texture buffer ，註意版本聲明為 #version 320 es

#version 320 es
#extension GL_EXT_texture_buffer : require

in mediump vec2 v_texCoord;
layout(location = 0) out mediump  vec4 outColor;
uniform mediump samplerBuffer u_buffer_tex;
uniform mediump sampler2D u_2d_texture;
uniform mediump int u_BufferSize;

void main()
{
    mediump int index = int((v_texCoord.x +v_texCoord.y) /2.0 * float(u_BufferSize - 1));
    mediump float value = texelFetch(u_buffer_tex, index).x;
    mediump vec4 lightColor = vec4(vec3(vec2(value / float(u_BufferSize - 1)), 0.0), 1.0);
    outColor = texture(u_2d_texture, v_texCoord) * lightColor;
}

繪製時如何使用緩衝區紋理和 TBO

glActiveTexture(GL_TEXTURE0);
glBindTexture(GL_TEXTURE_BUFFER, m_TboTexId);
glTexBuffer(GL_TEXTURE_BUFFER, GL_R32F, m_TboId);
GLUtils::setInt(m_ProgramObj, "u_buffer_tex", 0);

十三.猜你喜歡

  1. OpenGL ES 簡介
  2. OpenGL ES 版本介紹
  3. OpenGL ES 2.0 和 3.0 區別
  4. OpenGL ES 名詞解釋(一)
  5. OpenGL ES 名詞解釋(二)

本文由博客 - 猿說編程 猿說編程 發佈！


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 瀏覽器本地存儲
    一、瀏覽器本地存儲方式及使用場景 1.Cookie 概念：Cookie是最早被提出來的本地存儲方式，在此之前，服務端是無法判斷網路中的兩個請求是否是同一用戶發起的，為解決這個問題，Cookie就出現了。Cookie的大小隻有4kb，它是一種純文本文件，每次發起HTTP請求都會攜帶Cookie。 特性 ...
  • 表格，表單（單選框，覆選框，下拉菜單）
    表格基本不使用了，用列表來代替，表格緩存太慢，列表是一列一列緩衝的 密碼里將預設的type類型test換成password（密碼），可以隱藏輸入的密碼 單選框 type更改後，預設的框發生變化，radio是小圓圈，如上圖，兩個radio之間如果沒有聯繫的話不能實現單選，就是可以同時選，為了滿足單選需 ...
  • 京東雲開發者｜探尋軟體架構的本質，到底什麼是架構？
    不論是開發人員還是架構師，我們都一直在跟軟體系統打交道，架構是在工作中出現最頻繁的術語之一。那麼，到底什麼是架構？你可能有自己的答案，也有可能沒有答案。對“架構”的理解需要我們不斷在實踐中思考、歸納、演繹，形成自己的認知。 1 到底什麼是軟體架構 ？ 定義 ”架構是什麼“ 是件非常困難的事情，不同的 ...
  • Java多線程（5）：CAS
    您好，我是湘王，這是我的博客園，歡迎您來，歡迎您再來～ 在JDK1.5之前，Java的多線程都是靠synchronized來保證同步的，這會引起很多性能問題，例如死鎖。但隨著Java的不斷完善，JNI（Java Native Interface）使得Java能越過JVM直接調用本地方法，例如CAS。 ...
  • day01-HTML01
    day01-HTML 1.JavaWeb技術體系 2.B/S軟體開發架構簡述 B/S架構 B/S框架，意思是前端（Browser瀏覽器，小程式，APP，或者自己寫的）和服務端（Server）組成的系統的框架結構 B/S架構也可以理解為web架構，包含前端，後端，資料庫三大組成部分 前端 前端開發技術 ...
  • golang中的鎖競爭問題
    簡述 提取演算法中不變的部分封裝成方法，變化的部分延遲到子類。 延遲到子類 這個說法在學習設計模式的時候經常出現，實際就是利用多態在子類中重寫方法，使得實行時根據實例的類型調用不同的方法。 話不多說，看個案例。 優化案例 最初版v0 連接資料庫我們有很多種方式，JDBC、JNDI、ODBC等等。下麵是 ...
  • 泛化之美 —— C++11 可變參數模板的妙用
    概述 首先這篇文章出自博客園作者：[ 🔗 qicosmos ]，我對本文的實例代碼進行了學習、思考和整理糾正，理清了文章的全部細節，覺得這是一篇讓我受益匪淺的文章。之所以會接觸「可變參數模板」這部分的內容，是因為我當下剛好在學C++11 function機制，其內部實現需要接收不定長度的參數，因此 ...
  • JAVA常見基礎知識點
    Docker簡介 【1】Docker是一個開源的容器引擎，它有助於更快地交付應用。 Docker可將應用程式和基礎設施層隔離，並且能將基礎設施當作程式一樣進行管理。使用 Docker可更快地打包、測試以及部署應用程式，並可以縮短從編寫到部署運行代碼的周期。 【2】Docker的優點： 1、簡化程式 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類