1. 程式人生 > >轉載:貝塞爾曲面

轉載:貝塞爾曲面

貝塞爾曲面



這篇教程旨在介紹貝塞爾曲面,希望有比我更懂藝術的人能用她作出一些很COOL的東東並且展示給大家。教程不能用做一個完整的貝塞爾曲面庫,而是一個展示概念的程式讓你熟悉曲面怎樣實現的。而且這不是一篇正規的文章,為了方便理解,我也許在有些地方術語不當;我希望大家能適應這個。最後,對那些已經熟悉貝塞爾曲面想看我寫的如何的,真是丟臉;-)但你要是找到任何紕漏讓我或者NeHe知道,畢竟人無完人嘛?還有,所有程式碼沒有象我一般寫程式那樣做優化,這是故意的。我想每個人都能明白寫的是什麼。好,我想介紹到此為止,繼續看下文!

數學::惡魔之音::(警告:內容有點長~)

好,如果想理解貝塞爾曲面沒有對其數學基本的認識是很難的,如果你不願意讀這一部分或者你已經知道了關於她的數學知識你可以跳過。首先我會描述貝塞爾曲線再介紹生成貝塞爾曲面。
奇怪的是,如果你用過一個圖形程式,你就已經熟悉了貝塞爾曲線,也許你接觸的是另外的名稱。它們是畫曲線的最基本的方法,而且通常被表示成一系列點,其中有兩個點與兩端點表示左右兩端的切線。下圖展示了一個例子。



這是最基礎的貝塞爾曲線(長點的由很多點在一起(多到你都沒發現))。這個曲線由4個點定義,有2個端點和2箇中間控制點。對計算機而言這些點都是一樣的,但是特意的我們通常把前後兩對點分別連線,因為他們的連線與短點相切。曲線是一個引數化曲線,畫的時候從曲線上平均找幾點連線。這樣你可以控制曲線曲面的精度(和計算量)。最通常的方法是遠距離少細分近距離多細分,對視點,看上去總是很完好的曲面而對速度的影響總是最小。
貝塞爾曲面基於一個基本方程,其他複雜的都是基於此。方程為:

t + (1 - t) = 1

看起來很簡單不是?的確是的,這是最基本的貝塞爾曲線,一個一維的曲線。你也許從術語中猜到,貝塞爾曲線是多項式形式的。從線性代數知,一個一維的多項式是一條直線,沒多大意思。好,因為基本方程對所有t都成立,我們可以平方,立方兩邊,怎麼都行,等式都是成立的,對吧?好,我們試試立方。

(t + (1-t))^3 = 1^3

t^3 + 3*t^2*(1-t) + 3*t*(1-t)^2 + (1-t)^3 = 1

這是我們最常用的計算貝塞爾曲面的方程,a)她是最低維的不需要在一個平面內的多項式(有4個控制點),而且b)兩邊的切線互相沒有聯絡(對於2維的只有3個控制點)。那麼你看到了貝塞爾曲線了嗎?呵呵,我們都沒有,因為我還要加一個東西。
好,因為方程左邊等於1,可以肯定如果你把所有項加起來還是等於1。這是否意味著在計算曲線上一點時可以以此決定該用每個控制點的多少呢?(答案是肯定的)你對了!當我們要計算曲線上一點的值我們只需要用控制點(表示為向量)乘以每部分再加起來。基本上我們要用0<=t<=1,但不是必要的。不明白了把?這裡有函式:

P1*t^3 + P2*3*t^2*(1-t) + P3*3*t*(1-t)^2 + P4*(1-t)^3 = Pnew


因為多項式是連續的,有一個很好的辦法在4個點間插值。曲線僅經過P1,P4,分別當t=1,0。
好,一切都很好,但現在我怎麼把這個用在3D裡呢?其實很簡單,為了做一個貝塞爾曲面,你需要16個控制點,(4*4),和2個變數t,v。你要做的是計算在分量v的沿4條平行曲線的點,再用這4個點計算在分量t的點。計算了足夠的這些點,我們可以用三角帶連線他們,畫出貝塞爾曲面。

   

恩,我認為現在已經有足夠的數學背景了,看程式碼把!

相關推薦

轉載曲面

貝塞爾曲面 這篇教程旨在介紹貝塞爾曲面,希望有比我更懂藝術的人能用她作出一些很COOL的東東並且展示給大家。教程不能用做一個完整的貝塞爾曲面庫,而是一個展示概念的程式讓你熟悉曲面怎樣實現的。而且這不是一篇正規的文章,為了方便理解,我也許在有些地方術語不當;我希望大家能適應這個。最後,對那些已經熟悉貝塞爾曲面想

【Qt OpenGL教程】28曲面

第28課:貝塞爾曲面 (參照NeHe) 這次教程中,我們將介紹貝塞爾曲面,因此這是關於數學運算的一課(這導致很不好講),來吧,相信你能搞定它的!這一課中,我們並不是要做一個完整的貝塞爾曲面庫(庫的話OpenGL已經完成了),而是一個展示概念的程式,來讓你熟悉曲面是怎麼計算實

安卓自定義 View 進階曲線

在上一篇文章Path之基本圖形中我們瞭解了Path的基本使用方法,本次瞭解Path中非常非常非常重要的內容-貝塞爾曲線。 一.Path常用方法表 為了相容性(偷懶) 本表格中去除了在API21(即安卓版本5.0)以上才新增的方法。忍不住吐槽一下,為啥看起來有些順手就能寫的

經過一些點,畫三維3D曲面曲面

需求:有時間T-軸,頻率F-軸,幅度A-軸。同一時間點的,F-軸上有4個頻點,35KHz,36KHz,37KHz,38KHz。這4個頻率對應的有不同的幅度A,根據List<int[]>畫出一個頻帶,表示不同時間,4個頻率的幅度值。本專案是WPF專案,使用到了Git

DX雜記之細分著色器和利用曲面平滑模型

細分著色器的構成 細分著色器是為了將一大塊的區域繼續劃分,劃分成很多的小塊 大體上由三部分構成,但也會涉及一些其它階段的內容。 這三個階段分別為 Hull Shader Stage, Tesslator Stage, Domain Shader Stage,他們需要一起

曲線原理(轉載

image cnblogs itblog gif 二次 fcc ike 轉載 依次 最近在做圖形學的實驗,關於貝塞爾曲線在網上看到一個非常好的資料: 以下內容轉載自:https://www.cnblogs.com/hnfxs/p/3148483.html 原理和簡單推導

三次曲線關於點與長度在C++中實現

三階貝塞爾曲線只能計算近似解,由於使用時對長度的精度要求不高,因此用部落格 【Unity】貝塞爾曲線關於點、長度、切線計算在 Unity中的C#實現 中提供的C#方法改寫為C++的,只是替換了一個結構體,因為並不懂原文中的Vector3類的使用而已。 定義一個POINT結構體,用

【原創】《矩陣的史詩級玩法》連載十九用基向量矩陣實現二次曲線到標準拋物線的轉換

在講解磚塊鋪貼的時候,我們先用基礎的旋轉縮放等變換組合出了45度地圖鋪貼的變換矩陣。然後發現針對性太強,換成別的角度就很不好算了。接著改成了用基向量進行推導的方法。 然後到二元二次方程,雖然我們可以通過旋轉的方法消滅掉xy項從而判斷出方程對應的曲線型別,但過程過於繁瑣,

【原創】《矩陣的史詩級玩法》連載二十一用矩陣計算直線和二次曲線的交點

搞了這麼多理論,現在是時候展現一下矩陣的魅力了。看看經過矩陣變換後的曲線求交是何等的方便! 上篇說過,矩陣簡化的效果立竿見影,如同連載二的直線橢圓相交判斷一樣。 按我的套路,我是會先給出傳統的做法,然後再用矩陣的史詩級玩法將其擊敗,不過這次為了不讓大家看暈,我選擇把順序調

Android 繪圖基礎Path(繪製三角形、曲線、正餘弦)

學習重點: 理解path的使用 理解貝塞爾曲線的繪製原理 可動正餘弦的繪製 Path的簡單介紹   在 Android 繪圖基礎:Canvas畫布——自定義View(繪製錶盤、矩形、圓形、弧、漸變) 中我們可以看到Canvas的強大功能,其實Canva

Android 高階UI解密 (四) 花式玩轉曲線(波浪、軌跡變換動畫)

講解此UI系列必然少不了一個奇妙數學曲線—–貝塞爾曲線,它目前運用於App的範圍是在太廣了,最初的QQ氣泡拖拽,到個人介面的波浪效果、Loading波浪效果,甚至於軌跡變化的動畫都可以依賴貝塞爾曲線完成,多麼完美的曲線,妙也! 此篇文章並不自己造輪子實現貝塞爾

Unity遊戲中使用曲線

str net 順序 復雜 讓我 創建 函數 高程 gin 孫廣東 2015.8.15比方在3D rpg遊戲中。我們想設置彈道,不同的軌跡類型!目的:這篇文章的主要目的是要給你關於在遊戲怎樣使用貝塞爾曲線的基本想法。 貝塞爾曲線是最主要的曲線,一般用

曲線實現的購物車添加商品動畫效果

right map 繪制 開始 enter 監聽 idg 過程 protected 效果圖如下: 1.activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xm

把商品添加到購物車的動畫效果(曲線)

param from mat 位置 hold pos 開始 onclick border 目錄(?)[+] 如圖: 參考: Android補間動畫,屬性動畫實現購物車添加動畫 思路: 確定動畫的起終點 在起終點之間使用二次貝塞爾曲線填充起終點之間的點的軌跡 設置屬

iOS 使用曲線繪制路徑

繪制直線 多邊形 ini rcc 三個點 memory images arc poi 使用貝塞爾曲線繪制路徑 大多數時候,我們在開發中使用的控件的邊框是矩形,或者做一點圓角,是使得矩形的角看起來更加的圓滑。 但是如果我們想要一個不規則的圖形怎麽辦?有人說,叫UI

曲線

線性 數值 int 優化 連續 多項式 三次 繪制 http 在數學的數值分析領域中,貝塞爾曲線(英語:Bézier curve)是電腦圖形學中相當重要的參數曲線。更高維度的廣泛化貝塞爾曲線就稱作貝塞爾曲面,其中貝塞爾三角是一種特殊的實例。 貝塞爾曲線於1

曲線與CSS3動畫、SVG和canvas的應用

document cnblogs blank otto style 函數 alt one absolut 簡介 貝塞爾曲線是可以做出很多復雜的效果來的,比如彈跳球的復雜動畫效果,首先加速下降,停止,然後彈起時逐漸減速的效果。 使用貝塞爾曲線常用的兩個網址如下: 緩動函

css曲線模仿餓了麽購物車小球動畫

viewport title output 代碼 put 動畫效果 doc int class 在線觀看貝塞爾曲線值:傳送門 在線觀看動畫效果:傳送門 代碼: <!DOCTYPE html> <html> <head> <me

canvas 繪制三次曲線

png 繪制 ges nload 代碼 idt head mage src 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

canvas 繪制二次曲線

logs text lineto quad img utf 技術分享 bsp element 代碼: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8