gpu font rendering

การแสดงผลฟอนต์ GPU

นี่คือการสาธิตข้อความการเรนเดอร์โดยตรงบน GPU โดยใช้เค้าโครงเวกเตอร์ที่กำหนดโดยแบบอักษร

รูปทรงของสัญลักษณ์จะถูกแปลงเป็นรายการของเส้นโค้ง bezier สองส่วน (กำหนดโดยจุดควบคุมของพวกเขา) ซึ่งอัปโหลดไปยัง GPU

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

ทิศทางของรังสีไม่สำคัญสำหรับการคำนวณจำนวนที่คดเคี้ยวนี้ แต่คณิตศาสตร์สามารถทำให้ง่ายขึ้นอย่างมากโดยใช้รังสีขนานกับแกน x โดยการลบตำแหน่งตัวอย่างออกจากจุดควบคุมของเส้นโค้ง bezier ระบบพิกัดจะถูกเลื่อนเพื่อให้ต้นกำเนิดของรังสีอยู่ที่ $ (0, 0) $ และเรย์ก็เกิดขึ้นพร้อมกับแกน x บวก สำหรับการแยกระหว่างรังสีและเส้นโค้ง bezier เงื่อนไข $ y = 0 $ และ $ x ge 0 $ จะต้องเป็นจริง การต่อต้านนามแฝง (ดูด้านล่าง) จะเกิดขึ้นตามทิศทางของรังสี แต่ทิศทางอื่น ๆ สามารถทำได้โดยการหมุนจุดควบคุมของเส้นโค้ง Bezier รอบ ๆ ต้นกำเนิดเพื่อให้รังสีสอดคล้องกับแกน X อีกครั้ง

ในการค้นหาจุดตัดระหว่างรังสีและเส้นโค้ง bezier เดี่ยวจำได้ว่าเส้นโค้ง bezier กำลังสองอธิบายโดยสูตรต่อไปนี้ (สำหรับพื้นหลังของเส้นโค้ง Bezier ดูความงามและไพรเมอร์):

$$ textbf {c} (t) = (1-t)^2 textbf {p} _0 + 2 (1-t) t textbf {p} _1 + t^2 textbf {p} _2 $$

รับส่วนประกอบ Y เท่านั้นและใช้เงื่อนไข $ y = 0 $ ส่งผลให้สมการกำลังสองอย่างง่าย:

$$ (1-t)^2 textrm {y} _0 + 2 (1-t) t textrm {y} _1 + t^2 textrm {y} _2 = 0 $$

ซึ่งสามารถจัดเรียงใหม่เป็น:

$$ textrm {y} _0 -2t textrm {y} _0 + t^2 textrm {y} _0 + 2t textrm {y} _1 - 2t^2 textrm {y} _1 + t^2 textrm

$$ ( textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2) t^2 - 2 ( textrm {y} _0 - textrm {y} _1) t + textrm

เพื่อให้สามารถแก้ไขได้โดยใช้สูตรกำลังสอง:

$$ t_ {0/1} = {-b pm sqrt {b^2-4ac} over 2a} $$

$$ a = textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2 quad b = -2 ( textrm {y} _0 - textrm {y} _1)

การทดแทน $ b = -2b $ อัตราผลตอบแทน:

$$ t_ {0/1} = {-(-2b) pm sqrt {(-2b)^2-4Ac} over 2a} = {2b pm sqrt {4b^2-4Ac} over 2a} = {b pm sqrt

$$ a = textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2 quad b = textrm {y} _0 - textrm {y} _1 quad c = text

สมการกำลังสองอาจมีศูนย์หนึ่งหรือสองวิธี นอกจากนี้ยังแก้ปัญหา $ t $ ต้องตอบสนอง $ 0 le t & lt; 1 $ หากต้องการอยู่ในส่วนที่อธิบายโดยจุดควบคุม (จุดสิ้นสุดจะถูกแยกออกเนื่องจากเป็นส่วนหนึ่งของส่วนถัดไปของโครงร่าง) ในที่สุดได้รับการแก้ปัญหา $ t $ พิกัด X ที่สอดคล้องกันสามารถคำนวณได้เป็น $ mathbf {c} _x (t) $ เพื่อตรวจสอบเงื่อนไขที่สอง $ x ge 0 $ สำหรับสี่แยก

เมื่อมาถึงจุดนี้มีการระบุจุดตัดระหว่างเส้นโค้งเรย์และเบเซียร์ แต่พวกเขายังคงต้องจัดเป็นรายการหรือออก การสาธิตที่จัดทำโดย Dobbie จะคำนวณอนุพันธ์ของเส้นโค้ง bezier อย่างชัดเจนสำหรับแต่ละ $ t $ ค่าที่จะทำเช่นนี้ อย่างไรก็ตามอนุพันธ์ยังสามารถคำนวณได้โดยทั่วไปสำหรับการแก้ปัญหาที่มีศักยภาพทั้งสอง $ t_0/t_1 $ -

$$ mathbf {c} _y (t) = ( textrm {y} _0 - 2 textrm {y} _1 + textrm {y} _2) t^2 - 2 ( textrm {y} _0 - textrm {y}

$$ mathbf {c} _y (t) = ที่^2 - 2b t + c $$

$$ frac {d mathbf {c} _y (t)} {dt} = 2at - 2b $$

$$ frac {d mathbf {c} _y (t_0)} {dt} = 2a {b - sqrt {b^2 -ac} over a} - 2b = 2b - 2 sqrt {b^2 -ac} - 2b = -2 sqrt

$$ frac {d mathbf {c} _y (t_1)} {dt} = 2a {b + sqrt {b^2-ac} over a}-2b = 2b + 2 sqrt {b^2-ac}-2b = 2b = 2b = 2b = 2b = 2b = 2b

ดังนั้นเส้นโค้ง bezier จะข้ามแกน x ในทิศทางคงที่ในแต่ละสารละลายและรวมกับการประชุมสำหรับการวางแนวของรูปร่าง $ t_0 $ เป็นทางออกเสมอและ $ t_1 $ เป็นรายการเสมอ

วิธีการที่แตกต่างกันในการทำความเข้าใจความสัมพันธ์นี้คือการสังเกตว่าเนื่องจากสัญญาณที่แตกต่างกันที่ใช้ในการแก้ปัญหาและรากสแควร์ไม่เป็นลบ $ t_0 $ ต้องมาก่อนตามเส้นโค้ง $ (t_0 & lt; = t_1) $ ถ้า $ a & gt; 0 $ - ในทางกลับกันถ้า $ a & lt; 0 $ จากนั้นคำสั่งจะกลับด้านและ $ t_1 $ ต้องมาก่อน $ (t_1 & lt; = t_0) $ - พารามิเตอร์ $ a $ สามารถเขียนใหม่เป็น $ 2 ( frac { textrm {y} _0 + textrm {y} _2} {2} - textrm {y} _1) $ ดังนั้นสัญญาณของมันขึ้นอยู่กับว่าจุดควบคุมที่สองอยู่ด้านบนหรือต่ำกว่าจุดกึ่งกลางของจุดควบคุมที่หนึ่งและสาม รูปต่อไปนี้แสดงให้เห็นว่าการแก้ปัญหานั้นถูกจัดประเภทอย่างถูกต้องสำหรับการรวมกันทั้งหมดของทิศทางของเส้นโค้งและสัญลักษณ์ของพารามิเตอร์ $ a $ - สังเกตว่าคำสั่งของการแก้ปัญหาตามเส้นโค้งมีการเปลี่ยนแปลงอย่างไร แต่เรย์มักจะเข้ามาที่ก $ t_1 $ การแก้ปัญหาและออกที่ก $ t_0 $ สารละลาย.

ถ้าพารามิเตอร์ $ a $ คือ 0 (หรือเล็กพอสมควรในการคำนวณจุดลอยตัว) มีความสัมพันธ์เชิงเส้นระหว่างกันระหว่าง $ t $ และ $ y $ (นี่เป็นจริงสำหรับส่วนเชิงเส้น แต่ยังสำหรับเส้นโค้งที่ไม่ใช่เชิงเส้นบางส่วน) และสูตรกำลังสองไม่สามารถใช้ได้อีกต่อไปเนื่องจากการแบ่ง $ a $ - อย่างไรก็ตามเนื่องจากความสัมพันธ์เป็นเส้นตรงจึงสามารถมีวิธีแก้ปัญหาได้มากที่สุดซึ่งคำนวณได้ง่ายและจำแนกได้ง่าย

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

โปรดทราบว่าเราต้องพิจารณาทางแยกเล็กน้อยด้านหลังต้นกำเนิดของรังสีในขณะนี้ แต่การใช้งานครั้งแรกจะคำนวณการแยกใด ๆ กับแกน x จากนั้นตรวจสอบตำแหน่ง X ดังนั้นมันจึงไม่เปลี่ยนแปลงมากนัก วิธีคิดที่แตกต่างกันคือเงื่อนไข $ x ge 0 $ หมายถึงฟังก์ชั่นการถ่วงน้ำหนักที่ 0 สำหรับ $ x & lt; 0 $ และ 1 สำหรับ $ x ge 0 $ - เราสามารถลบความไม่ต่อเนื่องโดยการแนะนำส่วนเชิงเส้นผ่านความกว้างของหนึ่งพิกเซล

สำหรับการต่อต้านนามแฝงอย่างเต็มรูปแบบเราสามารถใช้รังสีหลายตัวตามทิศทางที่แตกต่างกัน (เช่นหนึ่งตามแนวแกน x และหนึ่งตามแนวแกน y)

หมายเหตุ

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

การสาธิตนี้ยังไม่ได้ใช้การเพิ่มประสิทธิภาพประสิทธิภาพใด ๆ (เช่นแถบ) และอาจมีการใช้ GPU สูงในบางสถานการณ์และเมื่อใช้แบบอักษรที่ซับซ้อนมาก

สร้างคำแนะนำ

1. init submodules

โคลนโครงการซ้ำเพื่อเริ่มต้น submodules สำหรับการพึ่งพา (หรือเรียกใช้ git submodule update --init หากคุณได้โคลน repo แล้ว):

 git clone --recursive https://github.com/GreenLightning/gpu-font-rendering.git
cd gpu-font-rendering

2. ใช้ cmake

 # Note: CMake will create the build directory.
cmake -S . -B build
make -j8 --directory build

บน Windows คุณอาจต้องการใช้ CMake GUI และ/หรือ Visual Studio แทน

บน Linux คุณอาจต้องติดตั้งแพ็คเกจเพิ่มเติมสำหรับการพัฒนา OpenGL (เช่น sudo apt-get install xorg-dev libgl1-mesa-dev สำหรับ Ubuntu)

3. รันจากไดเรกทอรีโครงการหลัก

 ./build/main

โปรแกรมต้องการไดเรกทอรี fonts และ shaders เพื่ออยู่ในไดเรกทอรีปัจจุบันเพื่อโหลดทรัพยากร หากคุณได้รับเพียงหน้าต่างสีดำ นี่น่าจะเป็นปัญหามากที่สุด ตรวจสอบไดเรกทอรีการทำงานของคุณและตรวจสอบข้อผิดพลาดคอนโซล

ทดสอบบน Windows 10, MacOS Monterey และ Ubuntu 22.04