เรื่องวุ่น ๆ กับตัวหนังสือ – ตอนที่ 6 – วาดตัวหนังสือแบบ Raster ส่วนที่ 1

ไม่รู้ว่ามีใครยังติดตาม series นี้อยู่หรือเปล่า เขียนนานเหลือเกิน คนเขียนช่วงนี้สุขภาพหัวใจไม่ค่อยดีครับก็เลยหักโหมมากไม่ได้น่ะ 😛

ช่วงการวาดแบบ Raster นี่ ผมจะขออนุญาตแบ่งเป็นตอน ๆ นะครับ เพราะว่าตรงนี้จะเริ่มลงไปรายละเอียดแล้ว คงจะยาวทีเดียว

ก่อนอื่นขอออกตัวก่อนว่า ผมจะเขียนการวาดตัวหนังสือแบบ Vector รวมกับแบบ Raster ไปเลย  เหตุผลก็คือระบบกราฟิคในปัจจุบันนั้นการวาดในระดับล่างจะเป็นแบบ Raster ทั้งหมด การวาดกราฟิคแบบ Vector นั้นตัว Output ที่ได้จะถูกแปลงกลับมาเป็น Raster ก่อนที่จะแสดงผลออกทางหน้าจอ เป็นขั้นตอนที่เรียกกว่า Rasterization (สำหรับ การวาดภาพบนหน้าจอแบบ Vector คือการวาดที่ใช้จอแบบ CRT แบบโบราณที่ตัวปืนยิงรังสีจะขยับตาม Input ซึ่งถ้าอยากเห็นของจริงก็คงต้องไปพิพิธภัณฑ์ล่ะครับ)

อีกสาเหตุหนึ่งก็คือ ในขณะที่ Graphics API ปัจจุบันเช่น OpenGL นั้นสามารถวาดเส้นโค้งได้ แต่มันทำได้ไม่ค่อยดีครับ มี Performance Impact มาก และเอาเข้าจริง ๆ มันก็เข้าไปทำ Rasterize ในซอฟท์แวร์ของมันเองอยู่ดี (ยกเว้นว่าจะซื้อการ์ดรุ่นโปร ราคาแพง อย่าง Quadro หรือ FireGL)

ดังนั้นผมคิดว่าพูดรวม ๆ กันไปเลยดีกว่า

สำหรับการวาดตัวหนังสือในแบบ Raster นั้น ขั้นตอนหลัก ๆ จะมีอยู่ดังนี้ครับ

  1. ค้นหา Glyph (ภาพตัวอักษร) ที่เหมาะสมกับ Character (รหัสตัวอักษร)
  2. คำนวนตำแหน่งที่จะวาด Glyph ลงไป
  3. วาด Glyph ลงบนหน้าจอ

อาจจะฟังดูง่าย แต่เอาเข้าจริง ๆ แล้วมันมีความซับซ้อนมากพอสมควร อันเนื่องมาจากในแต่ละภาษานั้นวิธีการวาดตัวอักษรจะมีรายละเอียดยิบย่อยเพิ่มเติมขึ้นไปอีก

ยกตัวอย่างภาษาไทยก็ได้ … ทราบมั้ยครับว่า การวาดคำว่า “กตัญญู” ใช้ Glyph ทั้งหมดกี่ตัว ? … จริง ๆ ก็ขึ้นอยู่กับการออกแบบ Font นะครับ แต่คำนี้โดยทั่วไปใช้ Glyph ทั้งหมด 6 ตัวครับ ทั้ง ๆ มี Character ที่ต่างกันแค่ 5 ตัวเองนะ เหตุผลคือ เวลาที่เรามีสระระดับล่างใต้ตัวอักษร ญ เราจะไม่เขียน “เชิง” ข้างใต้ (สำหรับท่านที่ใช้ระบบปฎิบัติการณ์/Desktop Environment ที่โบราณมาก ๆ อาจจะเห็นว่าใช้ Glyph แค่ 5 ตัว … เพราะว่าจะใช้ตัว glyph “ญ” แทนตัวอักษร “ญ” ที่ปรากฎทั้งสองที่ครับ ว่าแต่มันยังมีอยู่มั้ยเนี่ย??)

โดยทั่วไป จะมี library สองส่วนที่มีส่วนเกี่ยวข้อง ดังนี้ครับ

  1.  Font Engine ที่จะเป็นตัวที่ทำงานกับไฟล์ font (ttf, type1, และอื่นๆ) โดยตรง ทำหน้าที่ค้นหา glyph และข้อมูลที่เกี่ยวข้อง (จะว่ากันในบทต่อไปครับ) ออกมา
  2. Layout Engine จะเป็นตัววาง glyph บนหน้าจอ โดยเริ่มตั้งแต่วิเคราะห์ input string หาว่ามี glyph ตัวไหนที่ต้องใช้บ้าง และทำการไปดึง glyph ที่ต้องใช้ออกมาจาก Font Engine ทำการดัดแปลงและ transform glyph ให้มีขนาดและอยู่ในตำแหน่งที่ต้องการ

ส่วนการวาดลงบนจอจริง ๆ LE ส่วนใหญ่จะทำให้ครับ

วันนี้ขอจบแค่นี้ก่อน ก่อนที่จะมึนมากไปกว่านี้ครับ (คนเขียนก็มึน)

ภาคผนวก

สำหรับคนที่สนใจอยากศึกษา library ที่มีอยู่แล้ว ข้างล่างนี้เป็นตัวอย่าง library ที่ทำหน้าที่ที่ว่ามาข้างบน มีบางตัวที่เป็น API ของระบบ ในขณะที่บางตัวเป็น library แยกออกมานะครับ

  • FreeType เป็น Font Engine ฟรีที่รองรับไฟล์หลายรูปแบบ
  • Pango เป็น Layout Engine ที่ใช้ใน GNOME ครับ
  • ICU เป็นโคตร Library เกี่ยวกับ Unicode เรียกได้ว่าใช้ตัวนี้แล้วจะแก้ปัญหาปวดหัวร้อยแปดเกี่ยวกับ Unicode ได้เลย มีส่วน Layout Engine สำหรับตัว library ของภาษา C ครับ (ของ Java ไม่มีน่ะ)
  • Core Text เป็น API ส่วนที่จัดการการวาดตัวหนังสือของ OSX (ตั้งแต่ 10.4 ขึ้นไป)
  • DirectWrite เป็น API ส่วนที่จัดการการวาดตัวหนังสือของ Windows (ตั้งแต่ Windows 7 และ Windows Server 2008 ขึ้นไป)

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.