มีเหตุผลใดในการใช้ WebGL แทน 2D Canvas สำหรับเกม / แอพ 2D หรือไม่?

มีเหตุผลใดบ้างนอกจากประสิทธิภาพในการใช้ WebGL แทน 2D-Canvas สำหรับเกม / แอป2D

กล่าวอีกนัยหนึ่งว่าฟังก์ชัน 2D ใดที่ WebGL นำเสนอซึ่งไม่สามารถทำได้อย่างง่ายดายด้วย 2D-Canvas?

มองคำถามนี้จากอีกด้าน
หนึ่งนักพัฒนาเลือกเทคโนโลยีหนึ่งมาใช้กับเทคโนโลยีอื่นได้อย่างไร?

• ผสานรวมได้ดีขึ้นในระบบที่สร้างไว้แล้ว
• ใช้งานง่ายกว่า
• เร็วกว่า
• มีความสามารถมากกว่าหรือเหมาะสมกับความต้องการของตนมากขึ้น
• ค่าใช้จ่าย
• เพิ่มเติม platfrom- อิสระ

ดังนั้นฉันจะพูดถึงความแตกต่างระหว่าง canvas และ webGL API เกี่ยวกับคุณสมบัติเหล่านี้

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

หากคุณเขียนโค้ดจากศูนย์ canvas API จะเรียนรู้และเข้าใจได้ง่ายกว่ามาก ต้องใช้ความรู้ทางคณิตศาสตร์เพียงเล็กน้อยและการพัฒนาก็รวดเร็วและตรงไปตรงมา

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

WebGL เร็วกว่าและมีความสามารถมากขึ้น ไม่ต้องสงสัยเลยว่า เป็น 3D API ดั้งเดิมที่ช่วยให้คุณสามารถเข้าถึงไปป์ไลน์การแสดงผลโค้ดและเอฟเฟกต์ได้เร็วขึ้นและ 'ปรับแต่งได้' มากขึ้น ด้วย webGL นั้นไม่มีขีด จำกัด จริงๆ

ทั้ง canvas และ webGL เป็นสินค้า html5 โดยปกติอุปกรณ์ที่รองรับจะรองรับและอุปกรณ์อื่น ๆ

ดังนั้นเพื่อสรุป:

• การรวมรหัส API รูปวาดและส่วนที่เหลือ (การรวม): คล้ายกัน
• สะดวกในการใช้:
  • (พร้อมไลบรารี) canvas = webGL
  • (ตั้งแต่เริ่มต้น) webGL << ผ้าใบ
• ความเร็ว: webGL> ผ้าใบ
• ความสามารถ: webGL> canvas
• ราคา: webGL แพงกว่ามาก
• แพลตฟอร์ม: คล้ายกันมาก

หวังว่านี่จะช่วยได้

ปล. เปิดอภิปรายนะ

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

สำหรับการเปรียบเทียบเนื่องจากไม่มีวิธีที่รวดเร็วในการสร้างตารางที่นี่ฉันจึงอัปโหลดรูปภาพของตารางเปรียบเทียบด้านล่าง เพิ่ม Three.js เพื่อความสมบูรณ์เท่านั้น

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

WebGL มีความสามารถ 2D อะไรบ้างที่ผ้าใบ 2D ไม่มี IMHO ที่ใหญ่ที่สุดคือแฟรกเมนต์ที่ตั้งโปรแกรมได้บนฮาร์ดแวร์กราฟิก ตัวอย่างเช่นใน WebGL เราสามารถใช้ Game of Life ของ Conway ใน shader บนฮาร์ดแวร์ 3D ของคุณได้:

http://glslsandbox.com/e#207.3

การแสดงผล 2 มิติประเภทนี้จะทำงานบน CPU เท่านั้นไม่ใช่ GPU ด้วยผ้าใบ 2D การคำนวณทั้งหมดจะถูกนำไปใช้ใน JavaScript และจะไม่ขนานกับ GPU แม้ว่าจะได้รับความช่วยเหลือจากผู้ปฏิบัติงานเว็บก็ตาม นี่เป็นเพียงตัวอย่างเดียวเท่านั้นเอฟเฟกต์ 2 มิติที่น่าสนใจทุกประเภทสามารถใช้กับเฉดสีได้

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

ไม่มีอะไรที่คุณสามารถทำได้ด้วย Canvas ที่คุณไม่สามารถทำได้ด้วย webGL: ผืนผ้าใบอนุญาตให้บดไบต์ด้วย get / putImageData และคุณอาจวาดเส้นวงกลม ... โดยใช้โปรแกรม webGL
แต่ถ้าคุณกำลังมองหาการวาดภาพบางส่วนและเอฟเฟกต์บางอย่างที่ 60 fps ช่องว่างของประสิทธิภาพจะสูงมากจนไม่สามารถทำได้ด้วยผ้าใบเมื่อมันจะทำงานได้ดีใน webGL ประสิทธิภาพเป็นคุณสมบัติหลัก

แต่ webGL ค่อนข้างซับซ้อนในการเขียนโปรแกรม: ดูว่าผ้าใบดีพอสำหรับคุณหรือไม่หรือหาไลบรารีที่จะช่วยบรรเทาความเจ็บปวด ...
ข้อเสียเปรียบอื่น ๆ : มันไม่ทำงานบน IE (แต่จะทำอย่างไร) และในโทรศัพท์มือถือบางรุ่น
ดูความเข้ากันได้ที่นี่: http://caniuse.com/webgl

ตามที่คุณต้องการโดยเฉพาะอย่างยิ่งสิ่ง 2d คลาสสิกที่ทำงานได้ไม่ดีกับผ้าใบ:

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

... แต่แน่นอนว่าคุณสามารถเข้าถึงพิกเซลได้ดังนั้นคุณสามารถทำอะไรก็ได้รวมถึงข้างต้นด้วยตนเอง แต่นั่นอาจเป็นไปได้ช้าจริงๆ คุณสามารถ emscripten Mesa openGl เพื่อแสดงผลเป็นผืนผ้าใบในทางทฤษฎี

อีกเหตุผลใหญ่ในการใช้ webGL ก็คือผลที่ได้คือง่ายมากที่จะย้ายไปที่อื่น ซึ่งยังทำให้ทักษะมีค่ามากขึ้น.

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

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

ตัวอย่างเช่น:

 if (window.WebGLRenderingContext) {
     webGLcanvasApp()
         } else if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
     html5CanvasAppFMobile()
    } else {
    html5CanvasApp()
    }

แหล่งที่มา:
วิธีที่เหมาะสมในการตรวจจับการรองรับ WebGL?
วิธีที่ดีที่สุดในการตรวจจับอุปกรณ์เคลื่อนที่ใน jQuery คืออะไร?

WebGL ไม่สามารถใช้งานได้หากไม่มี GPU
การพึ่งพาฮาร์ดแวร์นี้ไม่ใช่ปัญหาใหญ่เนื่องจากระบบส่วนใหญ่มี GPU แต่หากสถาปัตยกรรม GPU หรือ CPU มีวิวัฒนาการมาเรื่อย ๆ การรักษาเนื้อหา webgl โดยการจำลองอาจเป็นเรื่องที่ท้าทาย การใช้งานบนคอมพิวเตอร์ (เสมือนจริง) รุ่นเก่าเป็นปัญหา

แต่ "Canvas vs WebGL" ไม่จำเป็นต้องเป็นตัวเลือกไบนารี จริงๆแล้วฉันชอบใช้ webgl สำหรับเอฟเฟกต์มากกว่า แต่ทำส่วนที่เหลือในแคนวาส เมื่อฉันเรียกใช้ใน VM มันยังคงทำงานได้ดีและรวดเร็วเพียงแค่ไม่มีเอฟเฟกต์