มุมคมกับแบบอักษรฟิลด์ระยะทางที่ลงนาม

Signed Distance Fields (SDFs) ถูกนำเสนอเป็นวิธีแก้ปัญหาอย่างรวดเร็วเพื่อให้บรรลุการแสดงผลแบบอักษรอิสระความละเอียดโดย Valve ในบทความนี้

ฉันมีวิธีแก้ปัญหา Valve แล้ว แต่ฉันต้องการรักษาความคมชัดรอบมุม Valve ระบุว่าวิธีการของพวกเขาสามารถทำให้ได้มุมที่คมชัดโดยใช้แชนเนลเนื้อรองที่สอง ANDed กับฐานหนึ่ง แต่ไม่สามารถอธิบายได้ว่าจะสร้างแชเนลที่สองได้อย่างไร

ในความเป็นจริงมีรายละเอียดการใช้งานมากมายเหลืออยู่ในบทความนี้

ฉันอยากจะรู้ว่าถ้ามีคุณคนใดสามารถชี้ให้ฉันเห็นทิศทางเพื่อให้ได้แบบอักษร SDFs ที่มีมุมคม

Adam Simmons ได้ทำงานที่น่าสนใจในพื้นที่นี้ ฉันไม่รู้ว่าเขาบรรลุเป้าหมายได้อย่างไร แต่การเรนเดอร์เวกเตอร์แบบ SDF ของเขานั้นคมชัดที่สุดเท่าที่ฉันเคยเห็นในทางปฏิบัตินอก Valve http://twitter.com/adamjsimmons/status/611677036545863680

แก้ไข: โปรดดูคำตอบอื่น ๆ ของฉันด้วยโซลูชันที่เป็นรูปธรรม

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

แต่มีการดำเนินงานที่ง่ายมากที่สามารถอำนวยความสะดวกทั้ง AND และ OR ขึ้นอยู่กับสถานการณ์และนี่คือความคิดหลักของวิทยานิพนธ์ของฉัน: เฉลี่ยของสาม โดยพื้นฐานแล้วคุณใช้สามช่องสัญญาณ (เหมาะสำหรับ RGB) ซึ่งสามารถใช้แทนกันได้อย่างสมบูรณ์และรวมเข้าด้วยกันโดยใช้การแบ่งกลาง (เลือกค่ากลางจากสามช่อง)

เพื่อรองรับการต่อต้านนามแฝงเราไม่ได้ทำงานเพียงแค่บูลีน แต่ค่าของจุดลอยตัวและการดำเนินการและ AND จะกลายเป็นค่าต่ำสุดและ OR หรือจะกลายเป็นค่าสูงสุดสองค่า ค่ามัธยฐานของสามแน่นอนสามารถทำทั้งสองอย่างถ้า< Bสำหรับ ( , , ข ) ค่ามัธยฐานคือขั้นต่ำและสำหรับ ( , B , B ) มันเป็นสูงสุด

กระบวนการแสดงผลยังคงง่ายมาก ส่วนของ shader ทั้งหมดรวมถึง anti-aliasing สามารถมีลักษณะดังนี้:

int main() {
    // Bilinear sampling of the distance field
    vec3 s = texture2D(sdf, p).rgb;
    // Acquire the signed distance
    float d = median(s.r, s.g, s.b) - 0.5;
    // Weight between inside and outside (anti-aliasing)
    float w = clamp(d/fwidth(d) + 0.5, 0.0, 1.0);
    // Combining the background and foreground color
    gl_FragColor = mix(outsideColor, insideColor, w);
}

ดังนั้นความแตกต่างจากวิธีการดั้งเดิมคือการคำนวณค่ามัธยฐานหลังจากสุ่มตัวอย่างพื้นผิว คุณจะต้องใช้ฟังก์ชั่นแบ่งแม้ว่าซึ่งสามารถทำได้ด้วยเพียง 4 นาทีการดำเนินงาน

แน่นอนว่าคำถามคือฉันจะสร้างสนามระยะทางสามช่องทางได้อย่างไรและนี่คือส่วนที่ยุ่งยาก วิธีที่ชัดเจนที่สุดที่ฉันใช้ในตอนแรกคือการสลายตัวของรูปร่างอินพุต / glyph ออกเป็นสามส่วนจากนั้นสร้างสนามระยะทางธรรมดาออกมาจากแต่ละส่วน กฎสำหรับการย่อยสลายนี้ไม่ซับซ้อน ประการแรกพื้นที่ที่มีช่องอย่างน้อย 2 ใน 3 ช่องเป็นด้านใน จากนั้นถ้าคุณจินตนาการว่านี่เป็นช่องสี RGB มุมนูนต้องทำจากสีทุติยภูมิและองค์ประกอบหลักสองส่วนนั้นออกไปด้านนอก มุมเลนส์เว้าคือสิ่งที่ผกผัน: สีรองสองสีล้อมรอบสีหลักทั่วไปของพวกเขาและลิ่มระหว่างที่ขอบทั้งสองด้านเข้าหากันเป็นสีขาว ฉันยังพบว่าจำเป็นต้องมีการขยายบางอย่างที่สองสีหลักหรือสองสีเป็นอย่างอื่นจะสัมผัสเพื่อหลีกเลี่ยงสิ่งประดิษฐ์ (เช่นในจังหวะกลางของ "N"

ภาพต่อไปนี้เป็นตัวอย่างการสลายตัวที่สร้างโดยโปรแกรมจากวิทยานิพนธ์ของฉัน:

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

อย่างไรก็ตามนี่คือตัวอย่างของความแตกต่างในด้านคุณภาพ ความละเอียดของพื้นผิวจะเหมือนกันในแต่ละภาพ แต่อันที่เหลือใช้พื้นผิวปกติส่วนที่อยู่ตรงกลางใช้สนามระยะทางธรรมดาและอันที่ถูกต้องใช้สนามระยะทางสามช่องทางของฉัน ค่าใช้จ่ายด้านประสิทธิภาพเป็นเพียงความแตกต่างระหว่างการสุ่มตัวอย่างพื้นผิว RGB กับสีเดียว

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

มีให้ที่ GitHub: https://github.com/Chlumsky/msdfgen

(ฉันใหม่สำหรับเรื่องนี้ดังนั้นโปรดแจ้งให้เราทราบหากมีสิ่งผิดปกติกับที่เก็บ)

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

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

ฉันไม่ได้เป็นผู้เชี่ยวชาญในเรื่องนี้ แต่อย่างน้อยคุณอาจจะสามารถรักษามุมที่คมชัดในแบบหลอกเอสดีเอฟหากคุณใช้ฟิลเตอร์ทวิภาคีกับฟิลเตอร์ Directional Bicubic แทนที่จะใช้ฟิลเตอร์ Bilinear มาตรฐาน นอกจากประโยชน์ที่ชัดเจนของการประหยัดหน่วยความจำแล้วคุณยังสามารถมีหลายช่องสัญญาณสำหรับสติ๊กเกอร์ SDF หลายสี

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

วิธีแก้ปัญหาเชิงทฤษฎีข้อที่สามและสุดท้ายคือการทดลองกับพื้นผิวตัวอย่างแบบหกเหลี่ยมผ่านการตั้งค่าอาร์เรย์

น่าเสียดายที่ฉันไม่มีวิธีทดสอบความคิดของฉันในขณะนี้และไม่สามารถหาเอกสารใด ๆ ที่อธิบายหรือทดสอบสิ่งที่คล้ายกับความคิดของฉัน ฉันจะเชื่อมโยงบทความที่เกี่ยวข้องทั้งหมดที่ฉันได้รับข้อมูล / แนวคิดของฉันในไม่ช้า