การเรียนรู้ WebGL และ three.js [ปิด]

ฉันใหม่และเริ่มเรียนรู้เกี่ยวกับกราฟิกคอมพิวเตอร์ 3 มิติในเว็บเบราว์เซอร์ ฉันสนใจที่จะสร้างเกม 3 มิติในเบราว์เซอร์ สำหรับผู้ที่เรียนทั้ง WebGL และ three.js ...

1. จำเป็นต้องมีความรู้เกี่ยวกับ WebGL ในการใช้ three.js หรือไม่

2. ข้อดีของการใช้ three.js กับ WebGL คืออะไร

เนื่องจากคุณมีความทะเยอทะยานที่ยิ่งใหญ่คุณต้องลงทุนเวลาเพื่อเรียนรู้พื้นฐาน ไม่ใช่เรื่องของสิ่งที่คุณเรียนรู้ก่อน - คุณสามารถเรียนรู้ได้พร้อมกันถ้าคุณต้องการ (นั่นคือสิ่งที่ฉันทำ)

หมายความว่าคุณต้องเข้าใจ:

1. แนวคิด WebGL
2. Three.js
3. แนวคิดทางคณิตศาสตร์พื้นฐาน

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

WebGL หากคุณใช้ Three.js คุณไม่จำเป็นต้องรู้วิธีการเขียนโปรแกรมใน WebGL คุณเพียงแค่ต้องเข้าใจแนวคิด WebGL นั่นหมายความว่าคุณเพียงแค่ต้องสามารถอ่านรหัส WebGL ของบุคคลอื่นและเข้าใจสิ่งที่คุณอ่าน มันง่ายกว่าที่คาดไว้มากในการเขียนโปรแกรม WebGL ด้วยตัวคุณเอง คุณสามารถเรียนรู้แนวคิด WebGL พอใช้ใด ๆ ของบทเรียนในสุทธิเช่นกวดวิชาเริ่มต้นของที่WebGLFundamentals.orgและการเรียนรู้ WebGL

คณิตศาสตร์. อย่างน้อยคุณต้องเข้าใจแนวคิด หนังสือดีสามเล่มคือ

1. 3D Math Primer สำหรับกราฟิกและการพัฒนาเกมโดย Fletcher Dunn และ Ian Parberry

2. คณิตศาสตร์ที่จำเป็นสำหรับเกมและแอปพลิเคชั่นแบบโต้ตอบ: คู่มือโปรแกรมเมอร์โดย James M. Van Verth และ Lars M. Bishop

3. คณิตศาสตร์สำหรับการเขียนโปรแกรมเกม 3 มิติและกราฟิกคอมพิวเตอร์โดย Eric Lengyel

ฉันหวังว่านี่จะเป็นประโยชน์กับคุณ โชคดี.

มีหลักสูตรออนไลน์ที่ดีมาก - กราฟิก 3 มิติแบบโต้ตอบได้ที่https://www.udacity.com/course/cs291บน THREE.js หลักสูตรนี้รวมถึงการมอบหมายเพื่อให้ได้ประสบการณ์จริง ครอบคลุมแนวคิดพื้นฐานทั้งหมดของ Three.js และคอมพิวเตอร์กราฟิก

ความคิดส่วนตัวของฉันมีดังต่อไปนี้:

• หากคุณมีเวลามากคุณสามารถเรียนรู้ทั้งสองอย่างได้ แต่โปรดทราบว่า WebGL อยู่ในระดับที่ต่ำกว่า Three.js มาก
• สำหรับโครงการ 3 มิติแรกผู้เชี่ยวชาญแนะนำให้ใช้ห้องสมุดอย่าง Three.js เพื่อทำความคุ้นเคยกับคำศัพท์และโมเดล 3d ทั่วไป

ทิศทางใดก็ตามที่คุณเลือกที่จะไปผมขอแนะนำให้คุณเรียนรู้ / ขัดขึ้นบนทักษะพีชคณิตเชิงเส้น จากนั้นไปข้างหน้าและเรียนรู้หรือขัดขึ้นความเข้าใจของคุณเกี่ยวกับมิติ MVP (ดูรุ่นฉาย) Three.JS สามารถสรุปเรื่องนั้นได้มาก แต่ฉันคิดว่ามันสำคัญที่เราจะเข้าใจแนวคิดเหล่านั้นได้ดีก่อนที่จะจริงจังกับการพัฒนา 3D

ฉันเขียนบทความเกริ่นนำเกี่ยวกับ MVPเมื่อฉันเรียนรู้การเขียนโปรแกรม 3D เป็นครั้งแรกด้วย OpenGL ฉันรู้ว่าจนกระทั่งฉันสามารถอธิบายได้ว่าเมทริกซ์การแปลงนั้นคืออะไรและพวกมันเกี่ยวข้องกับมิติ / ช่องว่างที่หลากหลายอย่างไรฉันไม่รู้โปรแกรม 3D เลยแม้ว่าฉันจะสามารถเรนเดอร์วัตถุบนหน้าจอได้ก็ตาม

เนื่องจากเป้าหมายของคุณคือการสร้างเกมฉันคิดว่าคุณจะได้รับประโยชน์มากมายจากการเรียนรู้ WebGL ดิบก่อนแม้ว่าคุณจะจบลงด้วยการใช้เฟรมเวิร์กเช่น Three.js เพื่อช่วยให้คุณเขียนโค้ดในภายหลัง

"WebGL เป็น 2D API และไม่ใช่ 3D API"

http://webglfundamentals.org/webgl/lessons/webgl-2d-vs-3d-library.html

บทความนี้จะอธิบายความแตกต่างพื้นฐานระหว่าง WebGL และห้องสมุด 3 มิติเช่น three.js
ซึ่งทำให้ฉันเลือกระหว่าง WebGL หรือ Three.js ไม่มีเกมง่ายๆ

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

ฉันใช้เวลามากมายกับตัวอย่างของ Threejs.org - มีพวกเขามากมายและพวกเขาเก่งมากในการพาคุณออกไปและวิ่งไปในทิศทางที่ถูกต้อง เอกสารนั้นดีพอโดยเฉพาะถ้าคุณเปรียบเทียบกับ webGL 3D API อื่น ๆ ที่นั่น

คุณอาจพิจารณารับ Unity3D เวอร์ชันฟรีและผู้ส่งออก collada ฟรี (ฟรีเมื่อฉันได้รับ) จาก app store (Window> App store) ฉันพบว่ามันง่ายพอที่จะติดตั้งฉากของฉันใน Unity และส่งออกไปยัง Collada เพื่อใช้กับ Three.js

นอกจากนี้ฉันโพสต์คลาสนี้ที่ฉันใช้กับ Three.js เรียกว่า neo ( http://rockonflash.com/webGL/three/neo.js ) เพียงเพิ่มลงในโครงการของคุณแล้วเรียก Neo.JackIntoThree () และมันจะเพิ่มวิธีการ / คุณสมบัติให้กับ Object3D สำหรับใช้ในโครงการของคุณ สิ่งต่างๆเช่น DrawAllAxis () มีค่ายิ่งเมื่อทำการดีบั๊กฉากของคุณเป็นต้น

ถึงแม้ว่ามือของ Three.js จะเป็นวิธีที่ยอดเยี่ยมในการใช้งาน - มีความยืดหยุ่นเพียงพอที่จะให้คุณเขียนเฉดสี / วัตถุและอื่น ๆ และมีพลังมากพอที่จะช่วยให้คุณบรรลุเป้าหมาย

ฉันหยิบ three.js ขึ้นมา แต่ก็กระโดดเข้าสู่ GLSL และทดลองกับ shaderMaterial ของ three.js มาก วิธีหนึ่งในการทำเช่นนี้ - three.js ยังคงเป็นนามธรรมของสิ่งต่าง ๆ มากมายสำหรับคุณ แต่มันยังช่วยให้คุณเข้าถึงระดับต่ำสุดในการเรนเดอร์ทั้งหมด (การฉายภาพเคลื่อนไหว)

ด้วยวิธีนี้คุณสามารถติดตามได้แม้กระทั่งบางอย่างเช่นบทแนะนำ open-gl ที่ยอดเยี่ยมนี้ คุณไม่จำเป็นต้องตั้งค่าเมทริกซ์พิมพ์อาร์เรย์เนื่องจากมีสามชุดสำหรับคุณแล้วอัปเดตเมื่อจำเป็น แม้ว่า shader คุณสามารถเขียนตั้งแต่เริ่มต้น - การเรนเดอร์สีแบบง่ายจะเป็นสองบรรทัดของ GLSL นอกจากนี้ยังมีปลั๊กอินการประมวลผลโพสต์สำหรับ three.js ที่ตั้งค่าบัฟเฟอร์ทั้งหมด, แบบเต็มหน้าจอและสิ่งที่คุณต้องทำเพื่อสร้างเอฟเฟกต์ แต่ shader นั้นง่ายมากที่จะเริ่มต้นด้วย

เนื่องจากเฉดสีที่ตั้งโปรแกรมได้เป็นสาระสำคัญของกราฟิก 3 มิติที่ทันสมัยฉันหวังว่าคำตอบของฉันจะไม่หายไป :) ไม่ช้าก็เร็วใครก็ตามที่ต้องทำอย่างน้อยต้องเข้าใจสิ่งที่เกิดขึ้นภายใต้ประทุนนี่เป็นธรรมชาติของสัตว์ร้าย นอกจากนี้การทำความเข้าใจมิติที่ 4 ในพื้นที่ที่เป็นเนื้อเดียวกันก็มีความสำคัญเช่นกัน

หนังสือเล่มนี้เหมาะสำหรับ WebGL

ฉันเพิ่งเรียนรู้ทั้งสองอย่างเล็กน้อยและฉันรู้สึกว่าเข้าใจพื้นฐานของ webgl ฉันคิดว่าการแนะนำ webgl นั้นเพียงพอแล้วกระโดดลงไปสาม js มันจะค่อนข้างง่ายเมื่อคุณเข้าใจแนวคิดพื้นฐานของ WebGL ลิงค์ที่มีประโยชน์:

1. แนะนำที่ดีที่สุดที่ฉันได้อ่าน: http://dev.opera.com/articles/view/an-introduction-to-webgl/
2. บทเรียนที่ครอบคลุม: http://www.johannes-raida.de/tutorials.htm