"ท้อมีไว้ให้ลิงถือ"
แปลงรูปเป็นภาพแบบ 360° ลงเฟสบุ๊คในคลิกเดียวด้วยเว็บ 360runaround.com
6 Jul 2016 03:54   [44106 views]

เสาร์อาทิตย์ที่ผ่านมาแอบนั่งทำของเล่นใหม่มาชิ้นนึง จริงๆคือจะทำใช้เองขำๆแต่ไหนๆก็ทำแล้วเลยทำจริงจังแล้วปล่อยให้ใช้แบบสาธารณะเลยละกันกับเจ้าตัวนี้ 360runaround.com เครื่องมือสำหรับแปลงภาพใดๆให้กลายเป็นภาพแบบ 360 องศาแล้วเอาไปโพสต์ลง Facebook ได้ทันที !

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

วิธีการแปลงภาพ

เริ่มเลยละกันนะ ก่อนอื่นก็เข้าเว็บเลย http://360runaround.com/ จากนั้นขอแบ่งเป็นแบบต่างๆตามรูปแบบปลายทางที่ได้ละกันนะๆ

แปลงเป็นทรงกลม

อันนี้ง่ายสุด เป็นการเปลี่ยนภาพเป็นทรงกลมล้อมรอบเราอยู่ วิธีก็ง่ายๆ เลือกรูปตรง 1) Choose an image file (JPG) และเลือก Sphere ตรง 2) Choose Shape แล้วกด Convert เพื่อแปลงได้เลย

โดยรูปที่เหมาะสมที่สุดคือรูปอัตราส่วน 2:1 (กว้าง:สูง) เมื่อแปลงแล้วจะเหมือนกับเอากระดาษ 2:1 ใบนี้มาห่อลูกบอลไว้ ตรงกลางจะป่องๆจากนั้นจะบีบลงเรื่อยๆไปทางด้านบนและด้านล่าง ดังนั้นด้านบนกับด้านล่างจะดูไม่ค่อยสวย ถ้าอยากจะแปลงเป็นทรงกลมควรเว้นพื้นที่ด้านบนและด้านล่างไว้แล้วใส่รูปแค่ตรงกลาง ยกตัวอย่างเช่น

จะได้ผลลัพธ์ออกมาเป็นแบบนี้ (คลิกรูปเพื่อไปดูแบบหมุนได้บน Facebook ได้เลย)

ซึ่งความสะดวกของเว็บ 360runaround คือหลังกด Convert จะมีพรีวิว 360 องศาให้ดูในหน้านั้นเลยโดยที่ยังไม่ต้องเอาไปโพสต์ลงเฟสบุ๊ค

ถ้าโอเคกับผลลัพธ์แล้วก็สามารถกด Download แล้วเอาภาพไปโพสต์ลงเฟสได้เลยครับไม่ว่าจะผ่านหน้าเว็บหรือผ่านแอปมือถือ ลองดูได้ๆ ง่ายป่ะล่าาาา =D

แปลงเป็นทรงกระบอก

อันนี้เป็นการเอารูปมาวาง"ม้วน"ล้อมรอบตัว วิธีทำก็ง่ายๆ เลือก Shape ให้เป็น Cylinder แล้วเราจะสามารถเลือกสีพื้นหลังเพิ่มได้ (เพราะพอเอาภาพมาม้วนรอบตัวเราก็จะมีช่องว่างด้านบนและด้านล่าง) หรือถ้าอยากจะให้ด้านบนหรือด้านล่างเป็นภาพก็ใส่ได้เช่นกันในช่อง Ceiling และ Floor ตามลำดับ แต่สองอย่างนี้ไม่จำเป็นต้องใส่ ทำไว้เผื่อใครอยากใส่เพิ่มความสมบูรณ์เฉยๆครับ

โดยภาพที่ใช้ล้อมรอบนี้จะขนาดเท่าไหร่ก็ได้ แต่จะให้ดีภาพควรจะอัตราส่วน 2:1 หรือกว้างกว่านั้น ยกตัวอย่างเช่นถ้าใช้ภาพด้านล่างซึ่งเป็นอัตราส่วน 4.5:1

โดยใส่ภาพเพดานและภาพพื้นซึ่งเป็นสี่เหลี่ยมจัตุรัสไปด้วย

จะได้ผลลัพธ์ดังนี้ คลิกไปดูผลได้

สำหรับทรงกระบอกนี้เป็นรูปแบบที่น่าจะเหมาะสมกับการใช้งานทั่วไปที่สุด แปลงภาพถ่ายธรรมดาๆด้วยโหมดนี้ก็เก๋แล้ว ลองดูได้ครับ =D

แปลงเป็นทรงสี่เหลี่ยม

อันนี้เป็นการแปลงเป็นทรงสี่เหลี่ยมโดยเลือก Shape เป็น Cuboid

รูปจะยาวแค่ไหนก็ได้แต่ตอนใช้งานภาพจะถูกแบ่งเป็น 4 ส่วนตามรูปแบบดังนี้

ดังนั้นถ้าจะให้ดีเราควรจะแบ่งภาพเป็น 4 ภาพขนาดเท่าๆกันในรูปเดียวกันตามนี้

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

เหมาะกับการทำห้อง Gallery ครับ =D


ตอนนี้หลักๆก็ทำได้ 3 รูปแบบนี้ ยังไงลองเล่นดูได้ครับ รับประกันความสะดวกในการใช้งาน ไม่มีสบายกว่านี้แล้วหละ แฮ่

หมายเหตุ

อย่างไรก็ตาม ยอมรับแบบแมนๆว่าไม่รับประกันว่า Server จะไม่ล่มนะ 5555 เพราะการแปลงภาพนั้นทำงานหนักมาก ก็จะเห็นได้ว่ามีทั้งเรื่องของการเรนเดอร์ 3 มิติ การแปลงภาพเป็น 360 ฯลฯ การแปลงแต่ละรูปเลยใช้เวลาหลายวินาทีอยู่เหมือนกัน นี่ถึงกับแยก Server มาตัวนึงเพื่อทำงานนี้เลย ก็หวังว่าจะไม่ฮิตไม่งั้นล่มแน่ๆ แหะๆ

สำหรับข้อมูลทางเทคนิคไว้แยกเป็นอีกบล็อกนึงละกันนะ แพรวพราวเลยหละโปรเจคนี้ ยังไงตอนนี้ก็ขอให้สนุกกับของเล่นใหม่นะะะ ใครทำอะไรแชร์อะไรก็ส่งมาให้ดูบ้าง แอบอยากเห็นความคิดสร้างสรรค์ของแต่ละคนค้าบ =D

บทความที่เกี่ยวข้อง

Aug 21, 2016, 01:42
114254 views
W District กับกรณีศึกษาการเพิ่มยอดขายจริงจากเกม Pokémon GO
Jul 7, 2016, 16:09
10400 views
บันทึกเบื้องหลังการพัฒนาระบบแปลงรูปเป็นภาพ 360° บนเว็บ 360runaround.com
0 Comment(s)
Loading