1. 程式人生 > >Bresenham畫線演算法(Three.js實現)

Bresenham畫線演算法(Three.js實現)

Bresenham演算法是一種精確而有效的光柵線生成演算法,該演算法僅僅使用增量計算。

為了說明該演算法,我們先考慮斜率小於1的直線的繪製過程。沿線路徑的畫素為止由以單位x間隔的取樣來確定。從給定線段的左端點(x0,y0)(x_0,y_0)開始,逐步處理每個後繼列(xx位置),並在其掃描線y值最接近線段的畫素上繪出一點。

假如已經決定要顯示的畫素在(xk,yk)(x_k,y_k),那麼下一步需要確定在列xk+1=xk+1x_{k+1}=x_k+1上繪製哪個畫素,是位置(xk+1,yk)(x_k+1,y_k)還是(xk+1,y

k+1)(x_k+1, y_k+1)

為了確定下一個點的位置,我們需要分別計算出yky_kyk+1y_{k+1}與y(就是xk+1x_k+1對應的y值)的距離。我們分別使用dlowerd_{lower}dupperd_{upper}
來表示這兩個距離。

xk+1x_k+1處y的座標可計算為:
y=m(xk+1)+b y=m(x_k+1)+b

所以dlower=d_{lower}=
yyk=m(x+k+1)+byk y-y_k =m(x+k+1)+b-y_k


dupper=d_{upper}=
(y+k+1)y=yk+1m(xk+1)b (y+k+1)-y =y_k+1-m(x_k+1)-b

若要確定兩個畫素哪一個離直線更近,我們需要測試dlowerd_lowerdupperd_upper的差:

dlowerdupper=(yk+1)y=yk+1m(xk+1)b d_{lower}-d_{upper}=(y_k+1)-y=y_k+1-m(x_k+1)-b

+1)y=yk+1m(xk+1)b

設線的兩端點的豎直和水平偏移量分別為ΔyΔyΔxΔx,將上面的距離差兩邊同時乘於ΔxΔx,我們便可以得到畫線演算法第k步的決策引數p

pk=Δx(dlowerdupper)=2ΔyΔx2Δxyk+c p_k=Δx(d_{lower}-d_{upper})=2Δy·Δx-2Δx·y_k+c

經過推導後:
pk+1=pk+2Δy2Δx(yk+1yk) p_{k+1}=p_k+2Δy-2Δx(y_{k+1}-y_k)

p0=2ΔyΔx p_0=2Δy-Δx

總結:

  1. 輸入線段兩個端點,並將左端點儲存在(x0,y0)(x_0,y_0)中。
  2. 將左端點畫出
  3. 計算常量ΔxΔxΔyΔy2Δy2Δx2Δy-2Δx,並得到決策引數的第一個值p0p_0
    p0=2ΔyΔx p_0=2Δy-Δx
  4. 從k=0開始,在沿線段路徑的每個x處,進行如下檢測
    如果pk<0p_k<0,下一個要繪製的點是(xk+1,yk)(x_k+1,y_k),並且
    pk+1=pk+2Δy p_{k+1}=p_k+2Δy
    否則,下一個要繪製的點是(xk+1,yk+1)(x_k+1,y_k+1),並且
    pk+1=pk+2Δy2Δx p_{k+1}=p_k+2Δy-2Δx
  5. 重複步驟4,共Δx1Δx-1次。

最終實現結果:
在這裡插入圖片描述

截圖中效果實現程式碼放在Github

相關推薦

Bresenham演算法(Three.js實現)

Bresenham演算法是一種精確而有效的光柵線生成演算法,該演算法僅僅使用增量計算。 為了說明該演算法,我們先考慮斜率小於1的直線的繪製過程。沿線路徑的畫素為止由以單位x間隔的取樣來確定。從給定線段的左端點(x0,y0)(x_0,y_0)(x0​,y0​)開始

Bresenham演算法詳解及其OpenGL程式設計實現

Bresenham是由Bresenham提出的一種精確而有效地光柵線生成演算法,該演算法僅使用增量整數計算。另外,它還可以用於顯示其它曲線。 我們以斜率大於0小於1的線段來進行考慮。以單位x間隔進行取樣。每次繪製了當前畫素點(xk,yk)之後,需要確定下一個要

圖形學--(中點畫法+Bresenham演算法

圖形學--(中點畫線法+Bresenham畫線演算法)    原文地址:https://www.cnblogs.com/llsq/p/7506597.html      程式設計環境:codeblocks+EGE庫

演算法——DDA和Bresenham

通過學習《Hearn&Backer.Computer Graphics with OpenGL》 實現畫線演算法 一、直線方程 直線的笛卡爾斜率截距方程: y=m∗x+by=m∗x+b 斜率為m,截距為b 在

使用three.js實現機器人手臂的運動效果

rotation 讓我 mes 特殊性 骨骼 都是 包括 跟著 實現圖   Three.js 是一款運行在瀏覽器中的 3D 引擎,你可以用它創建各種三維場景,包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精彩的演示。不過,這款引擎目前還處在比較不成熟的開發

圖形學--(中點畫法+Bresenham算法)

麻煩 .com etc 線上 += 相減 -s 像素點 ima 編程環境:codeblocks+EGE庫 用到的函數:putpixel(int x1,int y1,int color) 用某種顏色打亮一個坐標點。 這倆種算法都是用來在計算機上

three.js實現螢幕座標轉化為模型的世界座標

three.js實現螢幕座標轉化為模型的世界座標 基礎:three.js中座標系統.doc   方法.project    通過Vector3物件的方法project,方法的引數是相機物件,語句worldVector.project(camera)

使用canvas,在Js中動態設定高和寬

1.定義div   <div style="height:240px;" >                            &

Three.js 實現merge後顯示相應的材質

之前,我使用merge實現過將多個網格合併成一個網格,當時只是簡單的實現了一下幾何體的merge,證明merge後的能夠提高很大的效能。merge的幾何體有弊端就是,merge以後,只是一個整體,無法再分開,也沒辦法判斷點選的哪個物體,這隻適合合併一些場景內不再修改的模型。geometry.merg

二叉樹的遍歷演算法js實現

之前我的部落格中講到了如何通過js去實現一顆二叉樹,有興趣的可以去我的部落格中看下。今天我們來一起實現下二叉樹的遍歷演算法。歡迎大家幫忙指出不當之處,或者進行深入的挖掘。大家一起進步。二叉樹吶,有三種遍歷演算法,1:中序遍歷,2:先序遍歷,3:後序遍歷。在我們看具體實現之前,我們想下為什麼要這樣做?二叉樹廣泛

LeetCode加一演算法JS實現

給定一個由整陣列成的非空陣列所表示的非負整數,在該數的基礎上加一。 最高位數字存放在陣列的首位, 陣列中每個元素只儲存一個數字。 你可以假設除了整數 0 之外,這個整數不會以零開頭。 示例 1: 輸入: [1,2,3] 輸出: [1,2,4] 解釋: 輸入陣列表示數字 1

計算機視覺:演算法

在影象中畫線是非常困難的,因為畫素點並不連續,所以看起來不像直線。可以採用演算法來畫線。 演算法1 考慮這條線是由連續的畫素點組成,模擬畫線的過程,即從一端出發向另一端畫畫素點,若當前斜率較小,則往平行

DDA演算法

void DrawLine_DDA(HDC hdc, int x1, int y1, int x2, int y2, COLORREF crLine) { if (x1 == x2) { if (y1 <= y2) { while (y1 <= y2)

計算機圖形學筆記-三種演算法

1.DDA:在一個座標軸上以單位間隔對線段取樣,從而確定另一個座標軸上最靠近路線的整數點。 如果斜率m<=1,則以單位X間隔取樣,逐步計算y值 y(k+1)=y(k)+m 如果斜率m>1,則以單位Y間隔取樣,逐步計算X值 x(k+1)=x(k)+

幾種經典排序演算法JS實現方法+隨機洗牌演算法

一.氣泡排序functionBubbleSort(array) { var length = array.length; for(var i = length - 1; i > 0; i--) { //用於縮小範圍 for(var j = 0; j

演算法JS實現氣泡排序的3種方式

今天跟同學探討了排序演算法中的氣泡排序,很早之前其實就寫過這個程式碼,但是一直沒有正式的寫到部落格中來,其實氣泡排序是九大排序中最簡單的一個,也是最容易理解的一個排序,好了,廢話不多說,我們先來談一下氣泡排序的思想。 氣泡排序的思想:我們以從小到大排列為例,所

最小生成樹演算法——Prim演算法和Kruskal演算法JS實現

之前都是看書,大部分也是c++的實現,但是搞前端不能忘了JS啊,所以JS實現一遍這兩個經典的最小生成樹演算法。 一、權重圖和最小生成樹 權重圖:圖的邊帶權重 最小生成樹:在連通圖的所有生成樹中,所有邊的權重和最小的生成樹 本文使用的圖如下: 它的最小生成樹如下:

計算機圖形學(一)DDA演算法講解與原始碼

很早之前就想寫一個計算機圖形學系列的講解,可是隻寫了2篇,然後就擱置了很長一段時間,現在也算是有時間來繼續之前的想法了。 首先介紹一下演算法: 已知直線過端點P0(x0,y0),P1(x1,y1)的直線段的斜率K=(y1-y0)/(x1-x0),畫線的過程為:從x的

最短路徑演算法——Dijkstra演算法JS實現

一、Dijkstra演算法的思路 Dijkstra演算法是針對單源點求最短路徑的演算法。 其主要思路如下: 1. 將頂點分為兩部分:已經知道當前最短路徑的頂點集合Q和無法到達頂點集合R。 2. 定義一個距離陣列(distance)記錄源點到各頂點的距離,下標表示頂點,

一些經典演算法js實現方案

題目描述 在一個二維陣列中,每一行都按照從左到右遞增的順序排序,每一列都按照從上到下遞增的順序排序。請完成一個函式,輸入這樣的一個二維陣列和一個整數,判斷陣列中是否含有該整數。 function Find(target,array){ //程式碼