คอมพิวเตอร์กราฟิกส์ใช้ OpenGL (Computer Graphics using OpenGL)

คอมพิวเตอร์กราฟิกส์ใช้ OpenGL(Computer Graphics using OpenGL) น.ท.ไพศาล โมลิสกุลมงคล

บทที่ 4ภาพกราฟิกส์พื้นฐาน(Graphics Output Primitives)

การวาดและแสดงผลได้ทั้งออปเจ็กต์ 2 และ3 มิติ จะต้องระบุตำแหน่งและขนาดของออปเจ็กต์บนวินโดว์แสดงผลให้ได้ก่อน ใน OpenGL และ API อื่น ๆ เมื่อทำการสร้างวินโดว์แสดงผลขึ้นใหม่ นอกจากการกำหนดขนาดของวินโดว์แสดงผลสำหรับการวาดและแสดงผลแล้ว ยังต้องกำหนดระบบโคออร์ดิเนตด้วย ระบบโคออร์ดิเนต (Coordinate system)

ระบบโคออร์ดิเนตที่เราคุ้นเคยที่สุดและเป็นมาตรฐานที่สุดก็คือระบบโคออร์ดิเนตคาร์ทีเชียน (Cartesian) ซึ่งระบุโดยคู่พิกัด (x, y) ตามแนวนอนและแนวตั้งตามลำดับ โดยมีจุดกำเนิด (origin) ที่ (0, 0) ค่าของแกน x จะเพิ่มขึ้นจากซ้ายไปขวา ส่วนค่าของแกน y จะเพิ่มขึ้นจากล่างขึ้นบน แกนทั้งสอง (x และ y) จะตั้งฉากซึ่งกันและกันและรวมกันเรียกว่า xy-plane หรือระนาบ xy ระบบโคออร์ดิเนตคาร์ทีเซียน2 มิติ

ระบบโคออร์ดิเนตคาร์ทีเซียน 2 มิติ

ตำแหน่งบนจอภาพเป็นการอ้างอิงโคออร์ดิเนตที่สัมพันธ์กับตำแหน่งพิกเซลในเฟรมบัฟเฟอร์ ค่าของโคออร์ดิเนตพิกเซลให้ค่าจำนวนเส้น (ค่า y) จำนวนคอลัมน์ (ค่า x) การทำงานของฮาร์ดแวร์ การรีเฟรชจอภาพจะมีการกำหนดแอ็ดเดรสของพิกเซลจากมุมบนซ้ายของจอภาพโดยเริ่มจาก 0 ซึ่งเริ่มที่เส้นบนสุด ไปจนถึงเส้น ymax ที่เส้นล่างสุดของจอภาพ ตำแหน่งพิกเซลแต่ละเส้นเริ่มที่ 0 ที่อยู่ซ้ายสุดของเส้นไปจนถึง xmax ที่อยู่ขวาสุดของเส้น โคออร์ดิเนตของจอภาพ (Screen Coordinate)

การอ้างอิงด้วยคู่ลำดับ (x, y) บนจอภาพจะกำหนดจุดเริ่มต้นคือจุด (0, 0) อยู่ที่มุมบนซ้ายของจอภาพ ค่าของแกน x จะเพิ่มขึ้นจากซ้ายไปขวา จุดที่อยู่ขวาสุดจะมีค่ามากที่สุด ถ้ามีการกำหนดค่าพิกเซลของจอภาพไว้ที่ 640x480 จุดที่อยู่ขวาสุดของบรรทัดบนสุดคือ (639, 0) ค่าของแกน y จะเพิ่มขึ้นจากบนลงล่าง ทำให้จุดที่อยู่ล่างสุดมีค่ามากที่สุด จากการกำหนดพิกเซลของจอภาพดังกล่าว ทำให้จุดล่างสุดซ้ายสุดคือ (0, 479) มุมล่างขวามือจะเป็น (639, 479) โคออร์ดิเนตของจอภาพ (Screen Coordinate)

การกำหนดด้วยคู่ลำดับดังกล่าวทำให้เกิดความแตกต่างระหว่างโคออร์ดิเนตของจอภาพกับโคออร์ดิเนตที่ใช้ในการเขียนกราฟการกำหนดด้วยคู่ลำดับดังกล่าวทำให้เกิดความแตกต่างระหว่างโคออร์ดิเนตของจอภาพกับโคออร์ดิเนตที่ใช้ในการเขียนกราฟ ในการใช้งานจะต้องมีการแมปค่าจุดโคออร์ดิเนตไปใช้งานให้ถูกต้อง ใน OpenGL จะใช้ฟังก์ชันในการกำหนดคู่ลำดับ (x, y) ในลักษณะการสร้างกราฟซึ่งเป็นการแมปค่าไปใช้งานกับคู่ลำดับบนจอภาพได้สะดวกและง่ายดาย โคออร์ดิเนตของจอภาพ (Screen Coordinate)

ก) ข) ก) จอภาพปกติที่อ้างอิงเริ่มจากมุมบนซ้ายมือของพื้นที่จอภาพ ข) OpenGL ที่สามารถแมปค่าโคออร์ดิเนตให้ใช้งานได้ในรูปแบบการเขียนกราฟ

ก่อนจะพล็อตจุด หรือวาดรูปทรงใด ๆ ลงไปในวินโดว์ได้ ต้องทำการบอก OpenGL ก่อนว่าจะ ทำการ "แปลง" คู่โคออร์ดิเนตของสิ่งที่ต้องการวาด ไปเป็นคู่โคออร์ดิเนตของจอ (screen coordinate) ได้อย่างไร ทำได้โดยการระบุขอบเขตในระนาบคาร์ทีเชียนที่ใช้วินโดว์แสดงผล ซึ่งเรียกว่าพื้นที่ขริบภาพ(clipping region) ในระนาบ 2 มิตินั้น พื้นที่ขริบภาพก็คือค่า x, y ต่ำสุดและสูงสุดที่อยู่ภายในวินโดว์นั้นนั่นเอง อีกวิธีหนึ่งที่ทำได้ก็คือ การระบุตำแหน่งของจุดกำเนิดในเชิงสัมพัทธ์กับวินโดว์นั่นเอง โคออร์ดิเนตของพื้นที่ขริบภาพ

พื้นทีการขริบภาพในระนาบคาร์ทีเชียน 2 มิติที่มีจุดกลางจอที่ตำแหน่ง (75, 50)

พื้นที่การขริบภาพในระนาบคาร์ทีเชียน 2 มิติ ซึ่งมีจุดกลางจอที่ตำแหน่ง (0, 0)

มีความเป็นไปได้ยากที่เราจะกำหนดให้พื้นที่ขริบภาพมีค่าความกว้างและความสูงเท่ากับความกว้างและความสูงเป็นพิกเซลของวินโดว์ เช่น ในวินโดว์ขนาด 640x480 เราอาจจะต้องการกำหนดพื้นที่ขริบภาพเริ่มค่า x จาก -75 ถึง 75 และค่า y จาก -50 ถึง 50 ก็ได้ ค่าของจุดในพื้นที่ขริบภาพที่เราต้องการวาดนั้น ต้องได้รับการแมปไปยังค่าโคออร์ดิเนตจริงของวินโดว์แสดงผล และไปยังค่าจริงของอุปกรณ์แสดงผลต่อไป ซึ่งเราเรียกการแมปเช่นนี้ว่า Viewport วิวพอร์ต (Viewport) คือพื้นที่ในส่วนของวินโดว์โปรแกรมที่ใช้ในการวาด พื้นที่ขริบภาพเป็นเพียงการแมปของพื้นที่ขริบภาพไปยังโคออร์ดิเนตของวินโดว์อย่างง่าย ๆ เท่านั้น วิวพอร์ตไม่จำเป็นต้องมีค่าเป็นพื้นที่ทั้งหมดของวินโดว์ก็ได้ อาจจะกำหนดที่มุมล่างซ้ายของพื้นที่ขริบภาพก็ได้ วิวพอร์ต (Viewports)

ตัวอย่างวิวพอร์ตที่มีการแมปค่าโคออร์ดิเนตในพื้นที่ขริบภาพมีขนาดเป็น 2 เท่า

วิวพอร์ตที่มีการแมปค่าโคออร์ดิเนตในพื้นที่ขริบภาพมีขนาดเท่ากันวิวพอร์ตที่มีการแมปค่าโคออร์ดิเนตในพื้นที่ขริบภาพมีขนาดเท่ากัน

ระบบโคออร์ดิเนต 3 มิติก็เหมือนกับ 2 มิติ เพียงแต่เพิ่มแกน z ที่ตั้งฉากกับระนาบ xy เข้ามาอีกแกนหนึ่ง ซึ่งในระบบการแสดงผลของภาพนั้น ก็คือระยะใกล้ไกลหรือระยะความลึกของวัตถุ (+z ใช้ออกจากจอภาพมาหาผู้ใช้) ระบบโคออร์ดิเนต 3 มิติ (3D Coordinate System)

ระบบโคออร์ดิเนต 3 มิติของจุด (-4, 6,5)(แกน z ชี้ออกจากจอภาพเข้าหาตัวผู้มอง)

ถึงแม้จะสามารถกำหนดและวาดสิ่งที่ต้องการได้โดยใช้โคออร์ดิเนต 3 มิติ แต่ว่าจอภาพก็ยังคงเป็น 2 มิติอยู่ การแสดงผลออกให้เห็นทางวินโดว์ของโปรแกรมได้นั้น ต้องทำการแปลงโคออร์ดิเนตเป็น 2 มิติเสียก่อนจึงจะระบุตำแหน่งของพิกเซลได้ การแปลงทำได้โดยใช้วิธีการทางคณิตศาสตร์ (ตรีโกณมิติและวิธีการทางเมตริกซ์) โปรเจ็กต์ชัน (projection) เป็นการนำเอาโคออร์ดิเนต3 มิติที่ระบุตอนที่วาดไปแล้วนั้นแปลง (project) ลงบนระนาบ 2 มิติ เสมือนการฉายแสงกระทบวัตถุที่ทำให้เห็นโครงร่างของวัตถุนั้น โปรเจ็กต์ชัน (Projections) : จาก 3 มิติสู่ 2 มิติ

การโปรเจ็กต์ภาพ 3 มิติไปสู่ภาพ2 มิติ

ใน OpenGL นั้น จะมีโปรเจ็กต์ชันอยู่สองแบบคือแบบขนาน (Parallel) และแบบเพอร์สเปกทีพ (Perspective) เมื่อทำการระบุโปรเจ็กต์ชัน หมายความว่าได้ทำการระบุปริมาตรการมอง(viewing volume) และกำหนดว่าปริมาตรการมองนี้จะถูกแปลงอย่างไรลงในระนาบ 2 มิติ โปรเจ็กต์ชันแบบขนานใช้เมื่อทำการระบุปริมาตรการมองให้เป็นรูปสี่เหลี่ยมจัตุรัส (square) หรือสี่เหลี่ยมผืนผ้า (rectangular) วัตถุทุกอย่างที่มีขนาดเท่ากันจะถูกวาดด้วยขนาดเท่ากัน ไม่ว่าจะอยู่ใกล้หรือไกลต่างกันนิยมใช้ในงานจำพวกงานเขียนแบบหรือกราฟ 2 มิติ การโปรเจ็กต์แบบนี้จะระบุระนาบสำหรับการขริบภาพเป็น far, near, left, right, top และ bottom โปรเจ็กต์ชัน (Projections) : จาก 3 มิติสู่ 2 มิติ

โปรเจ็กต์ชันแบบขนาน (Parallel Projection)

โปรเจ็กต์ชันแบบเพอร์สเปกทีพนี้เป็นแบบที่คุ้นเคยกันมากกว่า ซึ่งจะเพิ่มระยะใกล้ไกลของออปเจ็กต์ในรูปเข้าไปด้วย ซึ่งเหมือนกับการคิดว่าขริบภาพปริมาตร มีลักษณะเป็นปิรามิดหัวตัด (เรียกว่า frustum) ซึ่งทำให้วัตถุที่อยู่ใกล้กว่าจะมีขนาดใกล้เคียงกับขนาดที่ถูกกำหนดไว้มากกว่าวัตถุที่อยู่ไกล โปรเจ็กต์ชัน (Projections) : จาก 3 มิติสู่ 2 มิติ

โปรเจ็กต์ชันแบบเพอร์สเปกทีพ (Perspective Projection)

โคออร์ดิเนตแบบสัมบูรณ์ (absolute coordinate) เป็นค่าที่กำหนดเป็นตำแหน่งจริงในระบบโคออร์ดิเนตที่ใช้งานอยู่ บางกราฟิกแพ็คเกจยอมให้มีการกำหนดตำแหน่งโดยใช้โคออร์ดิเนตแบบสัมพัทธ์ (relative coordinate) ซึ่งวิธีการนี้เป็นประโยขน์สำหรับแอปพลิเคชันที่หลากหลาย เช่น การวาดด้วยปากกา การวาดรูปศิลป์ และแอปพลิเคชันสำหรับกราฟิกทางด้านสิ่งพิมพ์ โคออร์ดิเนตแบบสัมพัทธ์นี้ทำให้สามารถกำหนดตำแหน่งโคออร์ดิเนตเป็นออปเซ็ต (offset) ของตำแหน่งครั้งสุดท้ายที่อ้างอิง (ที่เรียกว่าตำแหน่งปัจจุบัน) การกำหนดโคออร์ดิเนตแบบสัมบูรณ์และสัมพัทธ์

ถ้าตำแหน่ง (3, 8) เป็นตำแหน่งสุดท้ายที่อ้างอิงในแอปพลิเคชัน ถ้ามีการกำหนดโคออร์ดิเนตแบบสัมพัทธ์เป็น (2, -1) ทำให้สัมพันธ์กับโคออร์ดิเนตแบบสัมบูรณ์ที่ (5, 7) หลังจากนั้นจะมีการใช้ฟังก์ชันเพิ่มเติมเพื่อกำหนดตำแหน่งปัจจุบันก่อนที่จะมีการกำหนดโคออร์ดิเนตด้วยฟังก์ชันดั้งเดิม การอธิบายออปเจ็กต์ เช่น ชุดของส่วนเส้นตรง เราต้องให้ค่าของชุดโคออร์ดิเนตแบบสัมพัทธ์เพียงครั้งเดียวจะมีการสร้างตำแหน่งเริ่มต้นให้ทันที การกำหนดโคออร์ดิเนตแบบสัมบูรณ์และสัมพัทธ์

คำสั่ง gluOrtho2D เป็นฟังก์ชันที่ใช้ในการกำหนดเฟรมอ้างอิงคาร์ทีเซียนแบบ 2 มิติ อาร์กิวเมนต์ของฟังก์ชันนี้มี 4 ค่าที่กำหนดโคออร์ดิเนต x, y ที่ใช้ในการแสดงรูปภาพ เนื่องจากฟังก์ชัน gluOrtho2D จะกำหนดการแสดงผล (projection) ต้องแน่ใจว่าค่าโคออร์ดิเนตวางอยู่ในเมทริกซ์แสดงผลของ OpenGL (OpenGL projection matrix) นอกจากนี้ยังสามารถกำหนด identity matrix เป็นเมทริกซ์แสดงผลก่อนที่จะกำหนดขอบเขตโคออร์ดิเนต และต้องแน่ใจว่าค่าโคออร์ดิเนตจะไม่มีการเพิ่มค่าด้วยค่าใด ๆ ที่เราเคยกำหนดไว้สำหรับเมทริกซ์แสดงผล การกำหนดเฟรมอ้างอิงโคออร์ดิเนตใน OpenGL

การกำหนดค่าเริ่มต้นสำหรับรูปภาพ 2 มิติ สามารถกำหนดเฟรมโคออร์ดิเนตสำหรับวินโดว์แสดงผลจะใช้คำสั่ง - glMatrixMode (GL_PROJECTION); - glLoadIdentity ( ); - gluOrtho2D (xmin, xmax, ymin, ymax); วินโดว์แสดงผลจะถูกอ้างอิงด้วยโคออร์ดิเนต (xmin, ymin) ที่มุมล่างซ้าย และโคออร์ดิเนต (xmax, ymax) ที่มุมบนขวา การกำหนดเฟรมอ้างอิงโคออร์ดิเนตใน OpenGL

การกำหนดโคออร์ดิเนตของวินโดว์แสดงผลในฟังชัน gluOrtho2D

การอ้างอิงโคออร์ดิเนตตามที่กำหนดในคำสั่ง gluOrtho2D ถ้าโคออร์ดิเนตของภาพพื้นฐานนั้นอยู่ในขอบเขตของวินโดว์แสดงผลก็จะทำให้ปรากฏภาพเหล่านั้นแสดงออกมา แต่ถ้าโคออร์ดิเนตบางส่วนของภาพอยู่นอกขอบเขตของวินโดว์แสดงผลก็จะแสดงเพียงภาพที่อยู่ในขอบเขตเท่านั้น เพื่อให้แสดงผลทุกตำแหน่งต้องกำหนดให้เป็นโคออร์ดิเนตแบบสัมบูรณ์ที่มีการอ้างอิงกับเฟรมที่อ้างอิงดังกำหนดในฟังก์ชัน gluOrtho2D การกำหนดเฟรมอ้างอิงโคออร์ดิเนตใน OpenGL

GL_POINTSสำหรับการพล็อตแต่ละจุดตามตำแหน่งที่กำหนดGL_POINTSสำหรับการพล็อตแต่ละจุดตามตำแหน่งที่กำหนด GL_LINESสำหรับการวาดเส้นตรงเชื่อมจุด 2 จุดทำให้ได้ส่วนของเส้นตรงที่ไม่เชื่อมต่อกับเส้นตรงอื่น GL_LINE_STRIP สำหรับการวาดเส้นตรงระหว่างจุด 2 จุดที่มีการลากเส้นเชื่อมกับเส้นตรงอื่นด้วย GL_LINE_LOOPสำหรับการวาดเส้นตรงระหว่างจุด 2 จุดที่มีการลากเส้นเชื่อมกับเส้นตรงอื่นแล้วจะมีเส้นสุดท้ายเชื่อมจุดสุดท้ายกลับมาที่จุดเริ่มต้น GL_TRIANGLESสำหรับการวาดรูปสามเหลี่ยมโดยใช้จุด 3 จุด ถ้ามีจำนวนจุดไม่ครบ 3 จุด จุดที่เหลือเศษนี้จะถูกละทิ้งไป ฟังก์ชันแสดงรูปภาพทางเรขาคณิตพื้นฐาน

GL_TRIANGLE_STRIPสำหรับการวาดรูปสามเหลี่ยมต่อเนื่องโดยใช้จุด 3 จุดที่เปลี่ยนกลุ่มไปทำให้ได้เหมือนแผ่นพับที่เป็นพื้นผิว GL_TRIANGLE_FANสำหรับการวาดรูปสามเหลี่ยมในลักษณะพัด โดยใช้จุดแรกเป็นจุดยอดของสามเหลี่ยม GL_QUADSสำหรับวาดรูปสี่เหลี่ยมโดยใช้จุด 4 จุด ถ้ามีจุดไม่ครบ 4 จุด จุดที่เหลือเศษจะถูกละทิ้งไป GL_QUAD_STRIPสำหรับการวาดรูปสี่เหลี่ยมต่อเนื่องโดยใช้ชุดของจุดที่เปลี่ยนไป GL_POLYGONสำหรับการวาดรูปหลายเหลี่ยมตามจำนวนจุดที่กำหนด โดยรูปหลายเหลี่ยมนี้จะต้องไม่มีส่วนที่ตัดกัน ฟังก์ชันแสดงรูปภาพทางเรขาคณิตพื้นฐาน

ลักษณะการพล็อตจุด

ลักษณะการวาดเส้นตรง ก) ใช้ GL_LINES ข) ใช้ GL_LINE_STRIP ค) ใช้ GL_LINE_LOOP ลักษณะการวาดรูปสามเหลี่ยม ก) ใช้ GL_TRIANGLES ข) ใช้ GL_TRIANGLE_STRIP ค) ใช้ GL_TRIANGLE_FAN

ลักษณะการวาดรูปสี่เหลี่ยม ก) ใช้ GL_QUADS ข) ใช้ GL_QUAD_STRIP

ลักษณะการวาดรูปหลายเหลี่ยม ใช้ GL_POLYGON

การอ้างอิงด้วยคู่ลำดับในการสร้างกราฟจะอ้างอิงโดยเริ่มต้นจาก (0, 0) ที่มุมล่างซ้ายมือแล้วค่า x จะเพิ่มขึ้นจากซ้ายไปขวา ในขณะที่ค่า y จะเพิ่มขึ้นจากล่างขึ้นบน ส่วนการแสดงผลบนจอภาพจะอ้างอิงจุดเริ่มต้น (0, 0) ที่มุมบนซ้ายมือ โดยค่า x จะเพิ่มขึ้นจากซ้ายไปขวา ส่วนค่า Y จะเพิ่มขึ้นจากบนลงล่าง ในการใช้งานจะต้องมีการแมปค่าจุดโคออร์ดิเนตไปใช้งานให้ถูกต้อง ใน OpenGL จะใช้ฟังก์ชันในการกำหนดคู่ลำดับ (x, y) ในลักษณะการสร้างกราฟซึ่งเป็นการแมปค่าไปใช้งานกับคู่ลำดับบนจอภาพได้อย่างสะดวกและง่ายดาย การสร้างจุด

รูปแบบคำสั่งของการพล็อตจุดของ OpenGL จะเป็น glBegin (GL_POINTS); glVertex* ( ); glEnd ( ); เครื่องหมายดอกจันทร์ (*) บอกว่าจะต้องมีส่วนต่อท้าย (suffix) ซึ่งมี i (integer) แทนเลขจำนวนเต็มแบบ 32 บิต s (short) แทนเลขจำนวนเต็มแบบ 16 บิต f (float) แทนเลขทศนิยมแบบ 32 บิต d (double) แทนเลขทศนิยมแบบ 64 บิต การสร้างจุด

ตัวอย่างการสร้างจุด glBegin (GL_POINTS); glVertex2i (50, 50); // Specify point(50,50). glVertex2i (100,100); // Specify point(100,100). glVertex2i (100,150); // Specify point(100,150). glVertex2i (200,200); // Specify point(200,200). glVertex2i (250,150); // Specify point(250,150). glEnd ( ); การสร้างจุด

หรืออ้างอิงโคออร์ดิเนตเป็นอาร์เรย์ได้เป็นหรืออ้างอิงโคออร์ดิเนตเป็นอาร์เรย์ได้เป็น int point0 [ ] = (50, 50); int point1 [ ] = (100, 100); int point2 [ ] = (100, 150); int point3 [ ] = (200, 200); int point4 [ ] = (250, 150); การสร้างจุด เรียกฟังก์ชัน OpenGL เพื่อพล็อตจุด glBegin (GL_POINTS); glVertex2iv (point0); glVertex2iv (point1); glVertex2iv (point2); glVertex2iv (point3); glVertex2iv (point4); glEnd ( ); ลองดูตัวอย่างโค้ด ex04_01.cpp

เส้นตรง (Line) คือพิกเซลที่จัดเรียงเป็นลำดับต่อเนื่องกันไปในแนวตรง ในระบบกราฟิกทั่วไปจะมีเครื่องมือที่ใช้ในการวาดเส้นตรงมาให้ใช้งานเสมอเช่นเดียวกับ OpenGL ก็มีฟังก์ชันที่ให้คุณวาดเส้นตรงได้ง่ายดาย การวาดเส้นตรงมี 4 แบบคือ การวาดเส้นตรงในแนวนอน การวาดเส้นตรงในแนวตั้ง การวาดเส้นตรงในแนวทแยงมุม การวาดเส้นตรงที่มีความชันใด ๆ การวาดเส้นตรง

การวาดเส้นตรงในแนวนอน ถ้าค่าของแกน x ที่จุดเริ่มต้นน้อยกว่าค่าของ x ที่จุดสุดท้าย (xstart  xend)ทำได้โดยให้ค่าทางแกน y มีค่าคงที่แล้วเพิ่มค่าทางแกน x ขึ้นทีละ 1 พิกเซล ถ้า xstart > xendเราจะทำกลับกัน กล่าวคือให้ค่า y คงที่แล้วลดค่าทางแกน x ลงทีละ 1 พิกเซล การวาดเส้นตรงในแนวตั้ง ถ้า ystart  yendจะให้ค่าทางแกน x คงที่แล้วเพิ่มค่าทางแกน y ขึ้นทีละ 1 พิกเซล ถ้า ystart > yend จะให้ค่าทางแกน x คงที่แล้วลดค่าทางแกน y ลงทีละ 1 พิกเซล การวาดเส้นตรง

การวาดเส้นตรงแนวนอนและเส้นตรงแนวตั้งการวาดเส้นตรงแนวนอนและเส้นตรงแนวตั้ง

เส้นตรงในแนวทแยงมุมเป็นเส้นตรงที่มีความชันเป็น +1 หรือ -1 การวาดเส้นตรงที่มีความชัน +1 ถ้าจุดเริ่มต้นมีโคออร์ดิเนตน้อยกว่าจุดสุดท้ายทำได้โดยการเพิ่มค่า แกน x และแกน y ขึ้นทีละ 1 พิกเซล ถ้าจุดเริ่มต้นมีโคออร์ดิเนตมากกว่าจุดสุดท้ายทำได้โดยการลดค่า แกน x และแกน y ลงทีละ 1 พิกเซล สำหรับเส้นทแยงมุมที่มีค่าความชันเป็น -1 สามารถทำได้โดยการเพิ่มค่าแกน x ขึ้นทีละ 1 พิกเซลพร้อม ๆ กับการลดค่าแกน y ลงทีละ 1 พิกเซล การวาดเส้นตรง

การวาดเส้นตรงในแนวทแยงมุมการวาดเส้นตรงในแนวทแยงมุม

การวาดเส้นตรงที่มีความชันใด ๆ เป็นข้อยุ่งยากและมีปัญหาเกิดขึ้นหลายประการ เช่น ในจอภาพแบบแรสเตอร์สามารถแสดงจุดเฉพาะตำแหน่งพิกเซลเท่านั้น ส่วนของเส้นตรงบนจอภาพกำหนดจากตำแหน่งโคออร์ดิเนตของจุดปลายทั้งสองจุด การแสดงเส้นตรงบนจอแรสเตอร์นี้ในขั้นแรกระบบกราฟิกจะกำหนดจุดลงบนโคออร์ดิเนตของจอภาพในลักษณะเลขจำนวนเต็ม และคำนวณตำแหน่งพิกเซลที่ใกล้ที่สุดตามที่เส้นพาดผ่านระหว่างจุดปลายทั้ง 2 จุด หลังจากนั้นจะโหลดสีของเส้นลงในเฟรมบัฟเฟอร์ในตำแหน่งที่สัมพันธ์กับตำแหน่งโคออร์ดิเนตของพิกเซล การวาดเส้นตรง

หลังจากนั้นคอนโทรลเลอร์ของจอภาพจะอ่านข้อมูลจากเฟรมบัฟเฟอร์แล้วพล็อตลงบนพิกเซล ทำให้เกิดเป็นเส้นแบบขั้นบันได (Staircase Effect) เนื่องจากเป็นลักษณะไม่ต่อเนื่องเพราะเป็นค่าประมาณ โดยเลือกเส้นที่ใกล้ที่สุด เช่น ที่จุด (10.28, 40.67) จะแปลงเป็นตำแหน่งพิกเซล (10, 41) เป็นต้น การวาดเส้นตรง

สมการเส้นตรงตำแหน่งพิกเซลตามการพาดผ่านของเส้นตรงจากคุณสมบัติทางเรขาคณิตสมการเส้นตรงตำแหน่งพิกเซลตามการพาดผ่านของเส้นตรงจากคุณสมบัติทางเรขาคณิต เมื่อ m คือความชันของเส้นตรง และค่า b เป็นจุดตัดแกน y ถ้าเราจุดปลายทั้ง 2 จุดของเส้นตรงอยู่ที่ (xstart, ystart) และ (xend, yend) 4-1 4-2 4-3 สมการเส้นตรง

เส้นตรงระหว่างจุดปลาย 2 จุด (xstart, ystart) และ (xend, yend)

อัตราการเปลี่ยนแปลงค่า y เกิดจากค่า x ตามสมการ 4-4 4-5 สมการเส้นตรง • การเปลี่ยนแปลงของค่า x ก็ขึ้นกับค่า y ตามสมการ

DDA (Digital Differential Analyzer) เป็นอัลกอริทึ่มสำหรับการพล็อตตำแหน่งจุดพิกเซลที่ได้จากการปัดค่าโคออร์ดิเนตด้วยตัวเลขจำนวนเต็มที่ใกล้ที่สุดตามการพาดผ่านของเส้นตรง ตามการคำนวณ y หรือ x เมื่อใช้อัลกอริทึ่มนี้ทำให้เขียนโปรแกรมได้ง่ายขึ้น สมมุติว่าถ้ามีการลากเส้นตรงจากจุดเริ่มต้นโคออร์ดิเนต (xstart, ystart) ไปยังจุดสุดท้ายโคออร์ดิเนต (xend, yend) ซึ่งมีความชันตามสมการ 4-1 ถ้าโคออร์ดิเนต (x1, y1) และ (x2, y2) เป็นจุดที่อยู่ติดกันและอยู่บนเส้นตรงนี้ สามารถนำมาใช้ในการคำนวณ m ดังสมการ 4-6 อัลกอริทึ่ม DDA

คอมพิวเตอร์กราฟิกส์ใช้ OpenGL (Computer Graphics using OpenGL)