A-Frame: จำกัดจำนวนใบหน้าและจุดยอดในรุ่นต่างๆ

ฉันประสบปัญหากับประสิทธิภาพของ A-Frame และสิ่งที่ฉันพยายามทั้งหมดก็ไม่เกิดผลใดๆ บนเว็บไซต์ A-Frame ในแนวทางปฏิบัติที่ดีที่สุด - ประสิทธิภาพ มีกล่าวถึงดังต่อไปนี้:

จำกัดจำนวนใบหน้าและจุดยอดในรุ่น

โมเดลนี้มีจุดยอดเกือบ 100,000 จุดและใบหน้า 30,000 จุด ฉันจะลดจำนวนใบหน้าและ/หรือจุดยอดได้อย่างไร เป็นข้อกำหนดที่ผู้ใช้สามารถโต้ตอบกับทุกกล่องในโมเดลแยกกัน เช่น โดยการเปลี่ยนสีหรือความโปร่งใสหรือตำแหน่ง มีวิธีสร้าง mesh หรืออะไรก็ตามแต่ยังคงโต้ตอบกับทุกองค์ประกอบได้อย่างสมบูรณ์หรือไม่?

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


performance three.js 3d
person naraesk    schedule 20.03.2018    source แหล่งที่มา

คำตอบ (1)


arrow_upward
3
arrow_downward

ปัญหาในฉากนี้ไม่ใช่จำนวนจุดยอดหรือใบหน้า (100k และ 30k ตามลำดับก็ใช้ได้) แต่เป็นขนาดของกราฟฉากและจำนวนการเรียก GPU มีองค์ประกอบ 2400 <a-box/> แต่ละองค์ประกอบต้องมีการเรียกแยกกัน และนั่นก็มากเกินไป จำนวนการโทรออกควรต่ำที่สุดเท่าที่จะเป็นไปได้ โดยหลักการแล้ว ‹ 100

หากต้องการให้กล่องทั้ง 2,400 กล่องเป็นแบบโต้ตอบ คุณจะต้อง (1) สร้างส่วนประกอบที่กำหนดเองซึ่งรวมกล่องทั้งหมดไว้ใน THREE.BufferGeometry และเปลี่ยนตำแหน่งจุดยอดและสีภายใน geometry.attributes.position และ geometry.attributes.color หรือ (2) ใช้เทคนิคเช่น อินสแตนซ์ ทั้งสองจะต้องมี JS แบบกำหนดเอง ไม่ใช่แค่มาร์กอัป HTML เนื่องจากไม่ได้สร้างไว้ใน A-Frame เป็นส่วนประกอบ

person Don McCurdy    schedule 21.03.2018
comment
ลิงก์ที่สองชี้ไปที่ส่วนปัญหาของ three.js คุณหมายถึงอะไรประมาณ this ? - person Piotr Adam Milewski; 21.03.2018
comment
ขอบคุณสำหรับคำตอบ. ฉันไม่ได้ใช้ BufferGeometry เพราะ เอกสารประกอบของ three.js บอกว่า สิ่งนี้ทำให้ BufferGeometry ดีที่สุด เหมาะสำหรับวัตถุคงที่ซึ่งคุณไม่จำเป็นต้องจัดการเรขาคณิตมากนักหลังจากสร้างอินสแตนซ์แล้ว ซึ่งไม่ใช่กรณีการใช้งานของฉัน แต่เท่าที่ฉันเข้าใจ BufferGeometry สะดวกสบายน้อยกว่า แต่มีคุณสมบัติเช่นเดียวกับ Geometry ใช่ไหม - person naraesk; 21.03.2018
comment
@PiotrAdamMilewski โอ๊ะขอบคุณ! ฉันหมายถึงการสร้างอินสแตนซ์ aframe แต่ลิงก์ของคุณก็เกี่ยวข้องเช่นกัน - person Don McCurdy; 21.03.2018
comment
@naraesk - THREE.Geometry เกือบจะเลิกใช้แล้ว แต่ใช่แล้วมันก็ใช้ได้เช่นกัน BufferGeometry ใช้งานได้สะดวกน้อยกว่าเล็กน้อย แต่ (แม้จะมีเอกสารประกอบ) สามารถใช้กับวัตถุไดนามิกได้อย่างแน่นอน แต่ละแอตทริบิวต์ใน BufferGeometry สามารถใช้ .dynamic, .updateRange() และ .needsUpdate โปรดดูเอกสาร BufferAttribute . - person Don McCurdy; 21.03.2018