webgl入門實例-向量在圖形學中的核心作用

在圖形學中,向量是描述幾何、光照、運動等核心概念的基礎工具。以下是向量在圖形學中的關鍵應用和深入解析:


1. 向量的核心作用

  • 幾何表示:描述點、方向、法線、切線等。
  • 空間變換:平移、旋轉、縮放等操作依賴向量運算。
  • 光照計算:光線方向、反射向量、點積用于漫反射和鏡面高光。
  • 物理模擬:速度、加速度、力的合成與分解。

2. 圖形學中的向量運算

(1) 點積(Dot Product)的應用
  • 光照模型:計算光線與表面法線的夾角(Lambert漫反射):
    I = max ? ( 0 , L ? N ) ? I light I = \max(0, \mathbf{L} \cdot \mathbf{N}) \cdot I_{\text{light}} I=max(0,L?N)?Ilight?
    L 為光線方向 \ {L}為光線方向 ?L為光線方向 N 為法線 \ {N}為法線 ?N為法線 I light 為光強 I_{\text{light}}為光強 Ilight?為光強
  • 背面剔除:若視線向量(\mathbf{V})與法線(\mathbf{N})的點積(\mathbf{V} \cdot \mathbf{N} > 0),則表面不可見。
  • 投影計算:將向量投影到另一向量(如陰影生成)。
(2) 叉積(Cross Product)的應用
  • 法向量計算:通過三角形兩邊的叉積求法線:
    N = ( v 1 ? v 0 ) × ( v 2 ? v 0 ) \mathbf{N} = (\mathbf{v}_1 - \mathbf{v}_0) \times (\mathbf{v}_2 - \mathbf{v}_0) N=(v1??v0?)×(v2??v0?)
  • 坐標系構建:生成切線空間(TBN矩陣)用于法線貼圖:
    T = 切線 , B = N × T \mathbf{T} = \text{切線}, \quad \mathbf{B} = \mathbf{N} \times \mathbf{T} T=切線,B=N×T
(3) 歸一化(Normalization)
  • 將向量轉換為單位向量,確保方向計算不受長度影響:
    v ^ = v ∣ v ∣ \hat{\mathbf{v}} = \frac{\mathbf{v}}{|\mathbf{v}|} v^=vv?
    (關鍵用于光線方向、法線等)

3. 向量在圖形流水線中的角色

(1) 頂點處理
  • 模型變換:通過矩陣乘法(如MVP矩陣)將頂點從模型空間轉換到裁剪空間:
    v clip = M V P ? v model \mathbf{v}_{\text{clip}} = \mathbf{MVP} \cdot \mathbf{v}_{\text{model}} vclip?=MVP?vmodel?
  • 法線變換:法線需用模型矩陣的逆轉置矩陣變換,以保持垂直性:
    N world = ( M ? 1 ) ? ? N model \mathbf{N}_{\text{world}} = (\mathbf{M}^{-1})^\top \cdot \mathbf{N}_{\text{model}} Nworld?=(M?1)??Nmodel?
(2) 光照與著色
  • Phong模型:結合環境光、漫反射(點積)、鏡面反射(反射向量計算):
    R = 2 ( L ? N ) N ? L \mathbf{R} = 2(\mathbf{L} \cdot \mathbf{N})\mathbf{N} - \mathbf{L} R=2(L?N)N?L
  • 半程向量(Blinn-Phong):優化鏡面高光計算:
    H = L + V ∣ L + V ∣ \mathbf{H} = \frac{\mathbf{L} + \mathbf{V}}{|\mathbf{L} + \mathbf{V}|} H=L+VL+V?
(3) 屏幕空間操作
  • 視口變換:將NDC坐標映射到屏幕像素坐標:
    { x screen = ( x ndc + 1 ) ? width 2 y screen = ( 1 ? y ndc ) ? height 2 \begin{cases} x_{\text{screen}} = (x_{\text{ndc}} + 1) \cdot \frac{\text{width}}{2} \\ y_{\text{screen}} = (1 - y_{\text{ndc}}) \cdot \frac{\text{height}}{2} \end{cases} {xscreen?=(xndc?+1)?2width?yscreen?=(1?yndc?)?2height??

4. 圖形學特有問題與優化

(1) 精度問題
  • 浮點誤差:使用高精度浮點(如double)或誤差容忍比較(如glm::epsilonEqual)。
  • 歸一化失效:零向量或極小向量的保護性處理:
    if (length(v) < 1e-6) discard;
    
(2) 向量插值
  • 重心坐標插值:在三角形內插值頂點屬性(顏色、UV、法線):
    p = α v 0 + β v 1 + γ v 2 \mathbf{p} = \alpha \mathbf{v}_0 + \beta \mathbf{v}_1 + \gamma \mathbf{v}_2 p=αv0?+βv1?+γv2?
  • 透視校正插值:在投影空間中需除以深度(w分量)保證正確性。
(3) 性能優化
  • SIMD指令:使用SSE/AVX加速向量運算(如Unity的Burst編譯器)。
  • 預計算向量:如預生成環境貼圖的輻照度向量。

5. 實際代碼示例(GLSL/HLSL)

(1) 法線貼圖解碼
vec3 normal = texture(normalMap, uv).xyz * 2.0 - 1.0; // 從[0,1]映射到[-1,1]
normal = normalize(TBN * normal); // TBN為切線空間矩陣
(2) 反射光線計算
vec3 reflectDir = reflect(-lightDir, normal);
float specular = pow(max(dot(viewDir, reflectDir), 0.0), 32.0);
(3) 屏幕空間UV計算
vec2 screenUV = gl_FragCoord.xy / resolution;

6. 擴展:向量在高級圖形技術中的應用

  • 光線追蹤:光線方向向量與場景求交(如rayDir = normalize(target - origin))。
  • SDF(符號距離場):利用向量計算點到表面的最短距離。
  • 流體模擬:速度場(向量場)的平流與擴散。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/902176.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/902176.shtml
英文地址,請注明出處:http://en.pswp.cn/news/902176.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Redis 是如何保證線程安全的?

Redis 是如何保證線程安全的&#xff1f; Redis 是一個高性能的鍵值數據庫&#xff0c;廣泛應用于緩存、消息隊列、實時分析等場景。由于其性能優勢&#xff0c;Redis 已經成為許多系統的核心組件之一。然而&#xff0c;很多開發者在使用 Redis 時&#xff0c;常常會問&#x…

Img2img-turbo 在2080Ti上的測試筆記

1. 介紹 [img2img-turbo]是[pytorch-CycleGAN-and-pix2pix]推薦的更新的圖像變換的代碼實現&#xff1b; 2. 配置信息 Conda環境名稱&#xff1a;img2img-turbo 3. 問題描述 當前在我們嘗試使用了官方推薦的訓練命令在2080Ti上進行訓練&#xff0c; 3.1 出現了 CUDA out …

代碼隨想錄算法訓練營第三十五天|416. 分割等和子集、698.劃分為k個相等的子集、473.火柴拼正方形

今日題目 416. 分割等和子集 題目鏈接&#xff1a;416. 分割等和子集 - 力扣&#xff08;LeetCode&#xff09; 思考&#xff1a;本題要將數組分為兩個子數組&#xff0c;且兩個子數組和相等&#xff0c;因此首先可以想到的條件就是數組可分為兩個&#xff0c;這要求數組元素數…

純CSS實現自動滾動到底部

<!DOCTYPE html> <html lang"zh-CN"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>自動滾動到底部</title><style>*…

【新人系列】Golang 入門(十五):類型斷言

? 個人博客&#xff1a;https://blog.csdn.net/Newin2020?typeblog &#x1f4dd; 專欄地址&#xff1a;https://blog.csdn.net/newin2020/category_12898955.html &#x1f4e3; 專欄定位&#xff1a;為 0 基礎剛入門 Golang 的小伙伴提供詳細的講解&#xff0c;也歡迎大佬們…

AI大模型發展現狀與MCP協議誕生的技術演進

1. 大模型能力邊界與用戶痛點&#xff08;2023年&#xff09; 代表模型&#xff1a;GPT-4&#xff08;OpenAI&#xff09;、Claude 3&#xff08;Anthropic&#xff09;、通義千問&#xff08;阿里云&#xff09;等展現出強大的生成能力&#xff0c;但存在明顯局限&#xff1a…

深入理解Linux中的線程控制:多線程編程的實戰技巧

個人主頁&#xff1a;chian-ocean 文章專欄-Linux 前言&#xff1a; POSIX線程&#xff08;Pthreads&#xff09; 是一種在 POSIX 標準下定義的線程庫&#xff0c;它為多線程編程提供了統一的接口&#xff0c;主要用于 UNIX 和類 UNIX 系統&#xff08;如 Linux、MacOS 和 BS…

(mac)Grafana監控系統之監控Linux的Redis

Grafana安裝-CSDN博客 普羅米修斯Prometheus監控安裝&#xff08;mac&#xff09;-CSDN博客 1.Redis_exporter安裝 直接下載 wget https://github.com/oliver006/redis_exporter/releases/download/v1.0.3/redis_exporter-v1.0.3.linux-amd64.tar.gz 解壓 tar -xvf redis_…

鴻蒙應用元服務開發-Account Kit未成年人模式訂閱和處理用戶信息變更

一、概述 通過訂閱用戶信息變更&#xff0c;您可以接收有關用戶及其賬戶的重要更新。當用戶取消元服務的授權信息、注銷華為賬號時&#xff0c;華為賬號服務器會發送通知到元服務&#xff0c;元服務可以根據通知消息進行自身業務處理。 二、用戶信息變更事件介紹 三、訂閱用…

buildroot構建根文件系統報錯(已解決大部分問題)

title: buildroot構建根文件系統報錯(set FORCE_UNSAFE_CONFIGURE1) author: cbus categories: 小知識 tags:小知識 abbrlink: 53691 date: 2025-04-20 08:03:00 錯誤1 set FORCE_UNSAFE_CONFIGURE1 在使用buildroot構建根文件系統時&#xff0c;一切按照文檔的配置&#xff0…

7.QT-常用控件-QWidget|font|toolTip|focusPolicy|styleSheet(C++)

font API說明font()獲取當前widget的字體信息.返回QFont對象.setFont(const QFont& font)設置當前widget的字體信息. 屬性說明family字體家族.?如"楷體",“宋體”,"微軟雅?"等.pointSize字體??weight字體粗細.以數值?式表?粗細程度取值范圍為[…

通過面向目標的獎勵彌合人與機器人的靈活性差距

24年10月來自紐約大學的論文“Bridging the Human to Robot Dexterity Gap through Object-Oriented Rewards”。 直接通過人類視頻訓練機器人是機器人技術和計算機視覺領域的一個新興領域。盡管雙指機械手在雙指夾持器方面取得了顯著進展&#xff0c;但以這種方式讓多指機械手…

C++入門篇(下)

目錄 1、引用 1.1 引用概念 1.2 引用特性 1.3 常引用 1.4 使用場景 1.4.1 引用做參數 1.4.2 引用做返回值 1.5 引用和指針的區別 2、內聯函數 2.1 概念 2.2 特性 3、auto關鍵字 4、基于范圍的for循環 5、指針空值nullptr 5.1 C98 中的指針空值處理 5.2 C11 …

Multi-Query Attention (MQA) PyTorch 實現

和多頭注意力機制的唯一區別&#xff1a;K、V在不同的head之間實現了復用&#xff0c;而對于不同的頭&#xff0c;Q依然不同。 因此這里的代碼和標準多頭注意力的實現也是幾乎完全一樣&#xff1a; import torch import torch.nn as nn import torch.nn.functional as Fclass…

visual studio無法跳轉到函數定義、變量定義、跳轉函數位置不準問題解決

參考&#xff1a;https://blog.csdn.net/snakehacker/article/details/135438353 程序有時會出現大部分函數都不能準確的從頭文件中正確定位到函數定位,這是因為數據庫錯亂造成的,可以通過重構數據庫來解決,操作方法如下&#xff1a; 菜單欄&#xff1a;工具——選項 文本編輯…

Java優雅實現判空方法

在 Java 開發中&#xff0c;頻繁的 if (obj ! null) 判空代碼會導致代碼冗余、可讀性差&#xff0c;且容易遺漏判空導致 NullPointerException。以下從 語言特性、設計模式、工具類 和 編碼規范 四個維度&#xff0c;結合實際案例&#xff0c;詳解如何優雅處理空值問題。 一、…

京東百億補貼殺入外賣市場:一場關乎即時零售未來的攻防戰

當美團和餓了么在外賣市場雙雄爭霸十余年之際&#xff0c;京東突然以"百億補貼免傭金"的組合拳高調入場。這場看似跨界的外賣大戰&#xff0c;實則是互聯網巨頭對萬億級即時零售市場的生死爭奪。 外賣只是表象&#xff0c;即時零售才是終極戰場 京東黑板報4月10日官…

UNION和UNION ALL的主要區別

UNION和UNION ALL的主要區別在于處理重復數據和排序的方式。 UNION和UNION ALL都是SQL語言中用于合并兩個或多個SELECT語句結果集的關鍵字。它們的主要區別如下&#xff1a; 1、對重復結果的處理&#xff1a;UNION在進行表鏈接后會篩選掉重復的記錄&#xff0c;而UNION ALL不會…

七段碼 路徑壓縮 并查集 dfs

12.七段碼 - 藍橋云課 將七個二極管映射為 1-7 開一個二維矩陣 為 相鄰的邊連上線 edge[1][2] edge[1][6] 1;edge[2][1] edge[2][3] edge[2][7] 1;edge[3][2] edge[3][4] edge[3][7] 1;edge[4][3] edge[4][5] 1;edge[5][4] edge[5][6] edge[5][7] 1;edge[6][1…

科技如何改變世界?

技術是我們日常生活中不可或缺的一部分&#xff0c;以至于我們常常忘記了它的重要性。如果你正在科技領域工作&#xff0c;或者希望進入該領域&#xff0c;你可能是眾多有使命感的人之一&#xff0c;希望知道自己的日常工作能為社會或地球的長遠利益做出貢獻。 別再四處尋找了…