Media Studio: 3D และหน้า HTML

เวทีผู้กำกับ 3D: พรีวิซก่อน เรนเดอร์ทีหลัง

หน้าที่เดียวของเวทีนี้: ล็อกความสัมพันธ์เชิงพื้นที่ให้ลงตัวก่อนที่คุณจะใช้เครดิตกับวิดีโอ

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

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

เริ่มต้นใช้งาน

1. เพิ่มโหนด → เวที 3D Director (Beta, เอเจนต์เป็นผู้สร้าง) โหนดที่มีป้าย 3D จะปรากฏขึ้น โดยมีปุ่มเดียวคือ เปิดเวที
2. กด เปิดเวที เวทีจะเปิดแบบเต็มหน้าจอ (ครั้งแรกคุณจะเห็น "กำลังเปิดเวทีผู้กำกับ…"): บทสนทนาของเวทีอยู่ทางซ้าย วิวพอร์ต 3D อยู่ทางขวา
3. อธิบายฉากในช่อง "อธิบายฉากของคุณ..." ที่มุมซ้ายล่าง (ใคร ที่ไหน เคลื่อนไหวอย่างไร กล้องเคลื่อนอย่างไร) แล้วส่ง เอเจนต์ของเวทีใช้ระดับ อัลตร้า เป็นค่าเริ่มต้น หากต้องการจุดเริ่มต้น หน้าว่างจะมีตัวเลือก ช่วยฉันคิดฉากหนึ่ง / สร้างโลกจากภาพฉาก / สร้างพรีวิซจากสตอรี่บอร์ด / เริ่มจาก URL เช่น หน้าสินค้า
4. เอเจนต์จะสร้างฉากเป็นพรีวิซโมเดลสีขาว: คนเป็นทรงกระบอกหรือกล่องที่สูงเท่าคนจริง ฉากเป็นบล็อกสีเทา — มีแค่ปริมาตรและการเคลื่อนไหว ไม่มีพื้นผิวหรือแสง เอเจนต์จะสร้างกล้องหนึ่งตัวต่อหนึ่งช็อต (และเก็บกล้องหลักไว้หนึ่งตัว) และรายงานสั้น ๆ ไม่กี่บรรทัดเมื่อเสร็จ ขั้นตอนนี้แทบไม่ใช้เครดิตสื่อเลย แต่ช่วยให้เห็นว่าพื้นที่ใช้ได้จริงหรือไม่

ประโยคสำคัญในบรีฟ: ระบุให้ชัดว่า "โมเดลสีขาว เฉพาะการเคลื่อนไหวและกล้องเท่านั้น" หากไม่ระบุ เอเจนต์อาจตกแต่งฉาก (นีออน ฝน แสงสะท้อน) แล้วโมเดลวิดีโอจะเลียนแบบลุคแทนการเคลื่อนไหว บรีฟของตัวอย่าง Night Run เปิดด้วย "PURE WHITE-MODEL PREVIS: no colour, no textures, no materials…"

สิ่งที่คุณเห็นเมื่อเปิดขึ้นมา

แถบด้านบน (จากซ้ายไปขวา)

ตัวควบคุม	สิ่งที่ทำ
มุมมองผู้กำกับ	กลับไปที่กล้องอิสระ (ลากเพื่อหมุนดูรอบ เมื่อวางเมาส์จะแสดงคำแนะนำปุ่ม: W A S D เคลื่อนที่, Q E ลง / ขึ้น, Shift เร็วขึ้น)
มุมมองกล้อง ▾ (ตัวเลือกกล้อง)	แสดงรายการกล้องที่เอเจนต์สร้างไว้ เลือกกล้องหนึ่งตัวเพื่อมองผ่านกล้องนั้น หากยังไม่มีกล้องจะแสดง "เพิ่มกล้องก่อน"
↻	โหลดเวทีใหม่จากไฟล์
16:9 ▾	อัตราส่วนภาพ: 16:9, 9:16, 1:1, 4:3, 21:9, 3:4
เฟรมไปยังบอร์ด	เรนเดอร์ภาพนิ่งหนึ่งภาพจากกล้องที่ ใช้งาน อยู่ (1920 px ด้านยาว) แล้วเพิ่มลงบอร์ดเป็นโหนดรูปภาพ พร้อมข้อความแจ้ง "เพิ่มเฟรมลงในบอร์ดแล้ว"
การเคลื่อนไหวไปยังบอร์ด	เรนเดอร์ทั้งไทม์ไลน์ผ่านกล้องที่ใช้งานอยู่ (1280 px ด้านยาว เรนเดอร์ในเบราว์เซอร์ของคุณ สถานะ "กำลังเรนเดอร์วิดีโอ…") แล้วเพิ่มเป็นโหนดวิดีโอ พร้อมข้อความแจ้ง "เพิ่มวิดีโอลงในบอร์ดแล้ว"
วาด	วาดบนเฟรมและแปะโน้ต จากนั้น คิว ไว้หรือ ส่ง ไปยังเอเจนต์โดยตรง (เข้าคิวได้สูงสุด 10 รายการ)
ไอคอนแผง / ×	แสดง / ซ่อน ตัวตรวจสอบ ปิดเวที (กด Esc ก็ได้)

ตัวตรวจสอบทางขวา: เมื่อไม่ได้เลือกอะไรจะแสดงข้อความ "คลิกสิ่งใดก็ได้บนเวที หรือเลือกจากโครงร่างด้านล่างเพื่อตรวจสอบ ขอให้เอเจนต์สร้าง ย้าย และจัดแสงฉาก" ด้านล่างมีสี่ส่วนที่ยุบ/ขยายได้:

• การตั้งค่า · n — สวิตช์ สี และแถบเลื่อนที่เวทีนี้กำหนดไว้โดยเฉพาะ (มาจากโค้ดของเอเจนต์และแตกต่างกันในแต่ละเวที)
• กล้อง · n — รายการกล้อง (พร้อม FOV) คลิกแถวเพื่อมองผ่านกล้องนั้น กล้องที่เลือกจะแสดง มองผ่าน, ตั้งเป็นใช้งาน (กล้องที่ใช้งานอยู่คือกล้องที่เฟรม / การเคลื่อนไหวไปยังบอร์ดใช้), แถบเลื่อน FOV และ ตำแหน่ง / เป้าหมาย แต่ละแถวมี @ (กล่าวถึงในแชท) ซึ่งจะแทรก @camera:<id> ลงในแชทเพื่อให้คุณชี้เอเจนต์ไปที่กล้องนั้นได้อย่างแม่นยำ กล้องสร้างได้โดยเอเจนต์เท่านั้น — ขอให้สร้างในแชท
• วัตถุ · n — วัตถุบนเวที คลิกแถว หรือคลิกวัตถุในวิวพอร์ตเพื่อเลือก: มองเห็นได้, ตำแหน่ง / การหมุน / มาตราส่วน, ขนาด มี @ ด้วยเช่นกัน
• สื่อ — อัปโหลดไฟล์ (GLB, พื้นผิว, HDR, เสียง…) จากคอมพิวเตอร์ของคุณ (.glb / .gltf / .obj / .fbx พื้นผิว HDR เสียง ไฟล์ละ 100 MB) บนเวทีนี้ แสดงรายการไฟล์ของเวทีนี้ โดยมี วาง อยู่ข้างไฟล์ .glb ส่วน ไลบรารีบอร์ด · 3D แสดงโมเดล 3D ที่อยู่ในไลบรารีของบอร์ดแล้ว พร้อม วาง และ @ เช่นกัน

เครื่องเล่นด้านล่าง: เล่น / หยุดชั่วคราว, วนซ้ำ, ตัวแสดงเวลา (เช่น 7.53 / 16.00), แถบเลื่อนเวลา, @ (กล่าวถึงช่วงเวลานี้ในแชท ซึ่งจะแทรก @time:7.5s — "ถึงตอนนี้รถควรเลี้ยวผ่านหัวมุมไปแล้ว" ทำได้ในคลิกเดียว) และเต็มหน้าจอ (ซ่อนตัวควบคุม กด Esc เพื่อแสดงกลับมา) ไทม์ไลน์มีค่าเริ่มต้นที่ 10 วินาที 30 fps และเอเจนต์เปลี่ยนได้

ในบทสนทนาทางซ้าย งานของเอเจนต์จะแสดงเป็นการ์ด: เรนเดอร์การเคลื่อนกล้อง · 0s–4s (เรนเดอร์ช่วงของกล้องหนึ่งตัวเป็นวิดีโอในโฟลเดอร์เรนเดอร์ของเวที), ส่งออกไปยังบอร์ด (ส่งชุดภาพนิ่ง / วิดีโอไปยังบอร์ดเป็นกลุ่มชื่อ "<ชื่อเวที> · 3D" พร้อมโน้ต "ส่งต่องาน") และ รายงานผลลัพธ์ (ข้อสรุปของการทำงานรอบนั้น) ส่วน เฟรม / การเคลื่อนไหวไปยังบอร์ด ที่คุณกดเองจะสร้างโหนดเดี่ยวโดยไม่มีโน้ตส่งต่องาน

จากพรีวิซสู่ช็อตจริง

1. บนบอร์ด ลาก ⊕ ของโหนดวิดีโอพรีวิซ → วิดีโอ เลือกโมเดลที่รับการเคลื่อนไหวอ้างอิงได้ (เช่น Seedance 2.5) โดยใช้อัตราส่วนภาพเดียวกับพรีวิซ
2. ในพรอมต์ ระบุว่าแต่ละบล็อกคืออะไร และเรียกชื่อตามตำแหน่งที่สัมพันธ์กับกล้อง ("บล็อกที่สว่างที่สุดและอยู่ไกลกล้องที่สุดคือรถซีดานสีดำที่กำลังหลบหนี ส่วนบล็อกที่อยู่ใกล้กล้องที่สุดซึ่งมีแถบไฟบนหลังคาคือรถตำรวจ ซึ่งตามอยู่ข้างหลังตลอดเวลา") — ไม่ใช่แค่เรียกตามสี โมเดลวิดีโอจะทำตามการเคลื่อนไหวในพรีวิซ แต่จะกำหนดบทบาทเองอย่างอิสระ
3. สร้าง ในตัวอย่าง Night Run กล้องทั้งสี่ตัวสร้างคลิปพรีวิซตัวละหนึ่งคลิป แต่ละคลิปกลายเป็นช็อตที่สมจริงเหมือนภาพถ่าย แล้วนำช็อตทั้งหมดมาตัดต่อเป็นซีเควนซ์ 16 วินาทีในตัวตัดต่อวิดีโอ

การนำเข้าโมเดล 3D ของคุณเอง

ไฟล์ .glb ที่ส่งออกจาก Blender, C4D หรือเครื่องมืออื่นใดก็วางลงบนเวทีได้ทันที: ตัวตรวจสอบ → สื่อ → อัปโหลดไฟล์ เมื่ออัปโหลดเสร็จ ไฟล์จะถูกวางโดยอัตโนมัติ (" อยู่บนเวทีแล้ว") หรืออัปโหลด glb ไปที่บอร์ดเป็นสื่อก่อน แล้ว วาง จาก ไลบรารีบอร์ด · 3D เมื่ออยู่บนเวทีแล้ว โมเดลจะทำงานเหมือนบล็อกที่เอเจนต์สร้าง — เลือก ย้าย และจัดเฟรมได้ โหนด 3D ที่สร้างด้วย Tripo และเครื่องมือที่คล้ายกันจะแสดงอยู่ในไลบรารีเดียวกัน

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

ตัวอย่างอย่างเป็นทางการ: Night Run — car chase, 3D stage to Seedance ในรับแรงบันดาลใจสร้างขึ้นด้วยวิธีนี้ทุกประการ — ล็อกการเคลื่อนกล้องสี่แบบบนเวทีสีขาว แล้วส่งไปยัง Seedance เพื่อถ่ายช็อตจริง ส่วน Florida House — floor plan to 3D cutaway แสดงการใช้งานอีกแบบ: เปลี่ยนแปลนพื้นเป็นภาพเรนเดอร์มุมบน แล้วสร้างขึ้นใหม่บนเวทีทีละผนังเป็นภาพตัด 3D ที่ตกแต่งเฟอร์นิเจอร์แล้ว ส่งออกเป็นภาพนิ่งมุมบนและมุมมองนก 45°

เวทีผู้กำกับใน 30 วินาที:

โลก 3D และการผูกโครงกระดูก

• โลก 3 มิติ (เพิ่มโหนด) / สร้างโลก 3D บนรูปภาพ: พื้นที่ที่คุณหมุนดูรอบและเดินเข้าไปได้ สร้างจากคำอธิบายหรือรูปภาพ ผลลัพธ์คือโหนด 3D ที่มีมุมมองแบบเดินชม

• ผูกโครงกระดูก: ผูกโครงกระดูกอัตโนมัติสำหรับทำแอนิเมชัน ขอบเขตการใช้งานสำคัญ: ใช้ได้เฉพาะกับโมเดลที่สร้างด้วย Tripo และเฉพาะตัวละคร / สิ่งมีชีวิตเท่านั้น โมเดลที่อัปโหลด โลก 3D และผลลัพธ์ที่ผูกโครงกระดูกแล้วจะผูกโครงกระดูกไม่ได้

หน้า HTML: สามประเภท แต่ละประเภทมี Studio ของตัวเอง

โหนด HTML สร้างหน้าที่เล่นได้และตอบสนองได้ ไม่ใช่รูปภาพ เพิ่มโหนด → HTML (Beta) จะวางการ์ดเปล่าที่มีปุ่มเดียวคือ เปิดสตูดิโอ เมื่อเปิดครั้งแรก เลือกประเภทหน้า จะถามว่า:

ประเภท	คำอธิบายในกล่องโต้ตอบ	แคนวาส	Studio ของประเภทนี้
โปสเตอร์	งานออกแบบแบบนิ่ง แก้ไขข้อความและเลเยอร์ได้โดยตรง	1080×1620	Design Studio
โมชัน	แอนิเมชัน HTML: ข้อความ รูปทรง และทรานซิชันบนไทม์ไลน์ เรนเดอร์เป็นวิดีโอ — กล่องโต้ตอบบอกไว้น้อยกว่าความจริง นี่คือ After Effects ของบอร์ด ดูด้านล่าง	1920×1080	Motion Studio
ภาพยนตร์อินเทอร์แอ็กทีฟ	วิดีโอแบบแตกแขนง: ผู้ชมเลือกที่จุดตัดสินใจ เล่นในเบราว์เซอร์และส่งออกไปยัง Steam และมือถือได้	1920×1080	Interactive Studio

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

Studio จะเปิดขึ้นทันทีที่คุณเลือก ("กำลังเปิดสตูดิโอ…") พร้อมข้อความตัวยึดหนึ่งบรรทัดบนหน้า เช่น "อธิบายโปสเตอร์ของคุณในแชท" Studio ที่ว่างจะมีตัวเลือกเริ่มต้นสองสามแบบที่จะเติมลงในช่องป้อนคำสั่ง: สำหรับโปสเตอร์ โปสเตอร์เปิดตัวจากบรีฟสั้น ๆ / จัดข้อความของฉันเป็นโปสเตอร์ตัวอักษร / ปรับสไตล์โปสเตอร์ปัจจุบัน สำหรับโมชัน ทำแอนิเมชันหน้านี้ตามลำดับการอ่าน / ไตเติลการ์ด 6 วินาที / ตั้งเวลาการเคลื่อนไหวตามเสียงบรรยาย สำหรับภาพยนตร์ เขียนกราฟเรื่องราวจากคลิปของฉัน / วางแผนช่วงที่ยังต้องสร้าง / ปรับสไตล์ปกและตัวเลือก

ยังมีประเภทที่สี่ คือ แอป (หน้าอินเทอร์แอ็กทีฟที่ทำงานได้ในตัวเอง: เกม เครื่องมือ ต้นแบบ) ซึ่งไม่อยู่ในกล่องโต้ตอบ — เอเจนต์จะสร้างเมื่องานต้องการ — และ Studio ของประเภทนี้คือ App Studio

แถบเครื่องมือของโหนดเปลี่ยนตามประเภท (เต็มหน้าจอ และ ลบ อยู่ทางขวาเสมอ):

ประเภท	แถบเครื่องมือ
โปสเตอร์	ส่งออกเลเยอร์, Design Studio
โมชัน	เรนเดอร์, Motion Studio
ภาพยนตร์อินเทอร์แอ็กทีฟ	ส่งออกบิลด์, ดาวน์โหลดบิลด์ (เมื่อมีบิลด์แล้ว), Interactive Studio
แอป	App Studio

โหนดที่บรีฟซึ่งเอเจนต์เขียนไว้ยังไม่ได้เรียกใช้จะแสดง เรียกใช้ ก่อน เต็มหน้าจอ จะเรียกใช้หน้า (โปสเตอร์ / ภาพยนตร์ / แอป) หรือเล่นชิ้นงาน (โมชัน)

โปสเตอร์: ยังคงเป็นไฟล์งานออกแบบแม้ทำเสร็จแล้ว

คลิป: โหนดโปสเตอร์ → ส่งออกเลเยอร์ → เอกสารแบบเลเยอร์ปรากฏบนบอร์ด → แก้ไขเลเยอร์เปิดตัวแก้ไขเลเยอร์ → เปลี่ยนเลเยอร์ → ส่งออกไปยังแคนวาส

ภายใน Design Studio

Design Studio เปิดแบบเต็มหน้าจอ: บทสนทนาของโปสเตอร์อยู่ทางซ้าย หน้าอยู่ทางขวา

• แถวแท็บแรก: ซ่อนแชท / แสดงแชท, ไฟล์การออกแบบ, แท็บไฟล์, คำถาม เมื่อเอเจนต์ถาม ทางขวามี ส่งออก ▾ (ส่งออกภาพ, ส่งออก PSD — หนึ่งเลเยอร์ต่อหนึ่งเลเยอร์ของโปสเตอร์ — และ ส่งออกเลเยอร์ไปยังบอร์ด) และ นำเสนอ
• แถวที่สอง: โหลดตัวอย่างใหม่, การปรับแต่ง (ขอให้เอเจนต์สร้างตัวควบคุมที่ปรับได้), ความคิดเห็น (แสดงความคิดเห็นบนองค์ประกอบของหน้า), แก้ไข (ลิ้นชักทางขวา: คลิกสิ่งใดก็ได้บนแคนวาสเพื่อเปลี่ยนการจัดตัวอักษร ขนาด และกรอบ), วาด (ทำเครื่องหมายแล้วส่งให้เอเจนต์), ซูม
• แผงเลเยอร์: ทุกเลเยอร์ของโปสเตอร์ (บล็อกรายชื่อทีมงาน ชื่อเรื่อง สโลแกน คีย์อาร์ต…) แต่ละเลเยอร์มีไอคอนตาสำหรับ ซ่อนเลเยอร์ / แสดงเลเยอร์ เลเยอร์รูปภาพมี สร้างรูปภาพใหม่
• การเปลี่ยนแปลงจะเขียนลงในหน้าโดยตรง ไม่มีปุ่มบันทึก หากต้องการสไตล์โดยรวมแบบอื่น ให้ขอในแชท

ส่งออกเลเยอร์แล้วเก็บงานในตัวแก้ไขเลเยอร์

1. กลับมาที่บอร์ด เลือกโหนดโปสเตอร์แล้วกด ส่งออกเลเยอร์ (การ์ดจะแสดง "กำลังส่งออกเลเยอร์…")
2. เมื่อเสร็จ — "ส่งออกเลเยอร์ไปยังโหนดใหม่แล้ว" — เอกสารแบบเลเยอร์ชื่อ "<ชื่อโปสเตอร์> layers" จะอยู่ข้างโปสเตอร์ หนึ่งเลเยอร์ต่อหนึ่งเลเยอร์ของโปสเตอร์ (สูงสุด 128) เลเยอร์ที่แปลงเป็นพิกเซลไม่ได้ (เช่น เกรนฟิล์มที่ใช้ฟิลเตอร์ SVG) จะถูกข้ามพร้อมข้อความ "ข้าม N เลเยอร์: …"
3. กด แก้ไขเลเยอร์ ของเอกสารนั้นเพื่อเปิดตัวแก้ไขเลเยอร์ระดับ Photoshop: ลำดับ ความทึบแสง โหมดการผสม การรีทัช การครอป ตัวอักษร — ดู บอร์ดและเครื่องมือรูปภาพ
4. ส่งออกไปยังแคนวาส เพื่อนำผลลัพธ์กลับมาเป็นรูปภาพใหม่ หรือ ดาวน์โหลด PNG / PSD

ลำดับขั้นตอนนี้ — หน้า → ส่งออกเลเยอร์ → ตัวแก้ไขเลเยอร์ → กลับไปที่บอร์ด — เป็นขั้นตอนที่ถูกมองข้ามมากที่สุดแต่มีประโยชน์ที่สุดใน Media Studio: เลย์เอาต์ที่ AI สร้างแก้ไขได้เหมือนไฟล์งานออกแบบแทนที่จะต้องสร้างใหม่

หน้าโมชัน: After Effects ของบอร์ด

โหนดโมชันไม่ใช่ "แอนิเมชันเล็ก ๆ" แต่เป็นชิ้นงานที่เรนเดอร์อย่างแม่นยำระดับเฟรม: เอเจนต์ของ Motion Studio เขียนชิ้นงานด้วย HTML และ เรนเดอร์ จะแปลงเป็นวิดีโอทีละเฟรม บนบอร์ด นี่คือขั้นตอนหลังการผลิตที่คลิปที่สร้างด้วย AI ทำเองไม่ได้ — เมื่อใดก็ตามที่เฟรมต้องแม่นยำ ให้มาที่นี่:

• ข้อความ ตัวเลข โลโก้ และตัวอักษรแบรนด์ บนฟุตเทจจริงหรือฟุตเทจที่สร้างขึ้น
• ไตเติลการ์ด ชื่อเรื่อง แถบชื่อด้านล่าง และการ์ดปิดท้าย
• วิดีโออธิบายและการเล่าเรื่องด้วยข้อมูล: แท่งกราฟงอกขึ้นจากแกน เส้นกราฟวาดไปตามเส้นทาง ตัวเลขนับขึ้นจนถึงค่าจริง
• งานโปรโมตและงานสินค้า วิดีโอเปิดตัว อัปเดตผลิตภัณฑ์ เดโม HUD ตัวอย่างภาพยนตร์: ชิ้นงานทั้งชิ้นที่ทำจากกราฟิก ตัวอักษร และการเคลื่อนไหวของอินเทอร์เฟซ
• คำบรรยายที่ซิงก์ทีละคำ จากแทร็กเสียงบรรยาย (ไฮไลต์ แคปซูลคาราโอเกะ ข้อความกระแทกเต็มจอ นีออน ไล่สี — หรือแถบคำบรรยายธรรมดาและแถบชื่อด้านล่างแบบองค์กร)
• มาสก์และโหมดการผสม และทรานซิชันแบบ WebGL shader ระหว่างฉาก (ครอสเฟด วายป์ ระลอกคลื่น ชัตเตอร์ กลิตช์ เบลอสลับ แฟลช…)
• Three.js 3D: โมเดล อนุภาค แสง และการเคลื่อนกล้อง — สำหรับช็อต 3D ที่ต้องควบคุมได้ทุกเฟรมแทนที่จะให้โมเดลวิดีโอเดาเอา
• แอนิเมชัน Lottie ชิ้นงานหลายฉาก (หนึ่งชิ้นงานย่อยต่อหนึ่งฉาก) และเทมเพลตแบบกำหนดพารามิเตอร์ (ชื่อเรื่อง สี และความยาวเป็นตัวแปร)

วิธีนำวัตถุดิบเข้ามา: เชื่อมโหนดวิดีโอ / รูปภาพ / เสียงของบอร์ดเข้ากับโหนดโมชัน วิดีโอจะกลายเป็นฟุตเทจเต็มเฟรมที่อยู่ด้านล่าง (ใส่การเคลื่อนกล้องดันเข้าช้า ๆ หรือการเคลื่อนไหวแบบอื่นได้) รูปภาพจะกลายเป็นเลเยอร์ เสียงจะกลายเป็นเสียงบรรยายหรือเพลงพื้นหลัง — และชิ้นงานจะถูกกำหนดจังหวะตามเสียง: เมื่อเชื่อมโหนดเสียงไว้ ความยาวของคลิปและจังหวะที่แต่ละบรรทัดปรากฏจะเป็นไปตามเสียง

รวมผลงานโมชัน HTML เก้าชิ้นจากรับแรงบันดาลใจในหน้าแรก (ชิ้นละ 5 วินาที): HUD บนฟุตเทจโดรน วิดีโอเปิดตัวที่วาด UI ของผลิตภัณฑ์แบบเคลื่อนไหว ไอคอนที่แปลงร่างเป็นโลโก้ อัปเดตผลิตภัณฑ์พร้อมตัวเลขบนจอ รายงานข้อมูลบนฟุตเทจ แผนภูมิที่วาดตัวเองในวิดีโอความรู้ วิดีโอสำหรับมาร์เก็ตเพลสแบบ 1:1 เดโมเกมพิกเซล และตัวอย่างภาพยนตร์สไตล์ VHS — ทุกชิ้นเรนเดอร์จากโหนดโมชัน

เมื่อใดควรใช้โมชัน และเมื่อใดไม่ควรใช้

สิ่งที่คุณต้องการ	ใช้
ข้อความ ตัวเลข โลโก้ หรือ UI ที่แม่นยำ ไตเติลการ์ด แถบชื่อด้านล่าง คำบรรยาย	โมชัน
วิดีโออธิบาย รายงานข้อมูล อัปเดตผลิตภัณฑ์ วิดีโอเปิดตัว HUD ตัวอย่างภาพยนตร์ วิดีโอสำหรับมาร์เก็ตเพลส	โมชัน (ทั้งชิ้นงาน)
คลิปที่คุณสร้างไว้แล้ว พร้อมชื่อเรื่อง / ตัวอักษรแบรนด์ / คำบรรยายที่ซิงก์ทีละคำ / ข้อมูลซ้อนทับ	โมชัน: เชื่อมโหนดวิดีโอนั้น เรนเดอร์เป็นโหนดวิดีโอใหม่ คลิปต้นฉบับไม่ถูกแตะต้อง
การแสดงของมนุษย์ ฉากธรรมชาติ เอกลักษณ์ของเลนส์ แสง	การสร้างวิดีโอ แล้วตามด้วยโมชันเมื่อข้อความต้องแม่นยำ
แค่ต่อคลิป แถบคำบรรยาย เพลง และส่งออก	ตัวตัดต่อวิดีโอ เร็วกว่า
เลย์เอาต์แบบนิ่งที่แก้ไขต่อได้	โปสเตอร์

เริ่มต้นใช้งาน

สามเส้นทางที่ไปถึงจุดเดียวกัน:

1. บอกเอเจนต์ (วิธีปกติ): อธิบายชิ้นงาน บอกว่า "ทำเป็นหน้าโมชัน HTML" แล้วเชื่อมหรือ @-กล่าวถึงภาพสินค้า ฟุตเทจ โลโก้ และเสียงบรรยาย เอเจนต์จะเขียนบท / สเปกลงในโหนดข้อความก่อน จากนั้นสร้างโหนดโมชันและส่งต่อให้ Studio ผลการเรนเดอร์คือโหนดวิดีโอที่อยู่ข้างโหนดโมชัน และตัวตัดต่อจะมิกซ์ SFX หรือเพิ่มช่วงเปิดเมื่อคุณต้องการงานมาสเตอร์ — ตัวอย่างทั้งเก้าชิ้นในหน้าแรกมีรูปแบบเดียวกันนี้: ข้อความสเปก → โหนดโมชัน → วิดีโอที่เรนเดอร์แล้ว → ตัวตัดต่อ
2. วางโหนดเอง: เพิ่มโหนด → HTML → เปิดสตูดิโอ → โมชัน แล้วเขียนบรีฟในแชทของ Studio (ความยาว ฉาก ข้อความที่แต่ละฉากแสดง สีแบรนด์ SFX / เสียงบรรยาย)
3. เริ่มจากตัวอย่าง: การ์ดโมชัน HTML ใดก็ได้ใต้ รับแรงบันดาลใจ ในหน้าแรก → คัดลอกและดำเนินการต่อ แล้วเปลี่ยนเป็นชื่อสินค้า ตัวเลข และสีของคุณ (แต่ละตัวอย่างมีพรอมต์สำหรับทำต่อหนึ่งบรรทัด ดูสูตรที่ 16)

Motion Studio ทำงานอย่างไร

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

คลิป: เปลี่ยน HUD บนฟุตเทจโดรน — เปิด Motion Studio → เล่นไปถึงการล็อกเป้าหมายที่วินาทีที่ 12 → ขอ "เป้าเล็งสีเหลืองอำพันและค่าความมั่นใจที่มุมซ้ายล่าง" → โหลดตัวอย่างใหม่หลังเอเจนต์ทำเสร็จแล้วเล่นอีกครั้ง → ปิด → เรนเดอร์ → โหนดวิดีโอบนบอร์ดอัปเดตในที่เดิม

1. เลือกโหนดโมชันแล้วกด Motion Studio (หรือปุ่มบนการ์ด) บทสนทนาอยู่ทางซ้าย (ช่องป้อนคำสั่งแสดง "อธิบายการเคลื่อนไหวที่คุณต้องการสำหรับหน้านี้...") เครื่องเล่นอยู่ทางขวา โดยมี เล่น แถบความคืบหน้าที่เลื่อนได้ ปิดเสียง และ ความเร็วในการเล่น อยู่ด้านล่าง
2. เลื่อนไปยังช่วงเวลาที่ต้องการเปลี่ยนแล้วอธิบายการเปลี่ยนแปลง — "ให้พาดหัวเลื่อนเข้ามาจากทางซ้ายแทนการเฟด ให้ตัวเลขใหญ่ทั้งสามนับขึ้นตัวละสองวินาที ทำเป้าเล็งให้เป็นสีเหลืองอำพัน ค้างภาพโลโก้ปิดท้ายนานขึ้นอีกหนึ่งวินาที" เอเจนต์จะสรุปว่าเปลี่ยนจุดคิวใดบ้าง
3. กด โหลดตัวอย่างใหม่ แล้วเล่นอีกครั้ง แถบด้านบนยังมี วาด (วงจุดที่ต้องการแล้วส่งให้เอเจนต์) และ ปิด
4. ปิด Studio เลือกโหนดแล้วกด เรนเดอร์: การ์ดจะแสดง "กำลังเรนเดอร์…" แล้วตามด้วย "เรนเดอร์โมชันแล้ว" และโหนดวิดีโอชื่อเดียวกันจะปรากฏข้าง ๆ (หรือถูกอัปเดต) การเรนเดอร์อีกครั้งจะอัปเดตโหนดวิดีโอนั้นในที่เดิม — ผลการเรนเดอร์จะไม่กองซ้อนกัน
5. โหนดวิดีโอนั้นนำเข้าตัวตัดต่อวิดีโอได้ทันทีเพื่อตัดต่อ มิกซ์เสียง หรือเพิ่มช่วงเปิด

ควรรู้: เชื่อมโหนดเสียงเข้ากับโหนดโมชัน แล้วการเรนเดอร์จะถือว่าเป็นเสียงบรรยายและปรับความยาวให้ตรงกัน เรนเดอร์พร้อมกันได้สองงาน งานละประมาณ 20 นาที หน้าโมชันหนึ่งหน้ามีโหนดองค์ประกอบได้สูงสุด 60 โหนด SFX เพลง และเสียงบรรยายของหน้าจะรวมอยู่ในการเรนเดอร์ หากต้องการซ้อนเสียงเพิ่ม ให้นำวิดีโอที่เรนเดอร์แล้วและโหนดเสียงไปใส่ในตัวตัดต่อพร้อมกัน สำหรับชิ้นงานหนัก ๆ (3D ทรานซิชันแบบ shader ชิ้นงานยาวหลายฉาก) ให้ตั้งระดับโมเดลของ Studio เป็น อัลตร้า หรือ Mega เมื่อเปลี่ยนหน้า Slides / Design เป็นวิดีโอพร้อมเสียงบรรยาย ทุกหน้าจะเป็นโหนดโมชันแบบนี้ — เปิด Motion Studio ของหน้านั้นเพื่อเปลี่ยนแปลง แล้วเรนเดอร์ใหม่เฉพาะหน้านั้น

หน้าโมชันใน 30 วินาที:

ภาพยนตร์อินเทอร์แอ็กทีฟ

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

คลิป: เลือกโหนดภาพยนตร์ → เต็มหน้าจอเปิดเครื่องเล่น → ปก → เกมใหม่ → ช่วงแรก → ตัวเลือกสี่ข้อปรากฏที่จุดตัดสินใจ → เลือกหนึ่งข้อ → เรื่องราวแตกแขนง → แผนผังเรื่องแสดงผังงาน → เมนูเปิดการ์ดหยุดชั่วคราว → เล่นต่อ

การสร้าง

• บท ช่วงวิดีโอ และทางแยกทั้งหมดอยู่ในโปรเจกต์: story.json เก็บช่วงเปิด วิดีโอของแต่ละช่วง คำบรรยาย (.vtt) ตัวเลือก 1–6 ข้อและสิ่งที่จะตามมา รวมถึงบท ตัวละคร ความสำเร็จ และข้อความ UI
• เส้นทางที่ง่ายที่สุดคือทักษะ เกมภาพยนตร์อินเทอร์แอ็กทีฟ ("เปลี่ยนเรื่องราวให้เป็นภาพยนตร์อินเทอร์แอ็กทีฟแบบแตกแขนง: ผู้ชมเลือกที่จุดตัดสินใจ ดูตัวอย่างบนแคนวาส ส่งออกไปยัง Steam และมือถือ"): จากเรื่องราวเดียว เอเจนต์จะเขียนกราฟเรื่องราว แสดงรายการช่วงที่ยังต้องสร้าง สร้างช่วงเหล่านั้น และเชื่อมเข้ากับเครื่องเล่น บนบอร์ดคุณจะเห็นโหนดวิดีโอหนึ่งโหนดต่อหนึ่งทางแยก และโหนดข้อความ "Story tree"
• ใช้ Interactive Studio เพื่อปรับปก ข้อความของตัวเลือก และธีมผ่านแชท

ภายในเครื่องเล่น

• ปก: ชื่อเรื่องและสโลแกน เล่น จะเปิดเมนูหลักของเรื่อง: เล่นต่อ / เกมใหม่ / บท / โหลด / ตอนจบ (ปลดล็อกแล้ว n/4) / ความสำเร็จ / ตัวละคร / การตั้งค่า / เครดิต
• ระหว่างเล่น: ชื่อบทอยู่มุมซ้ายบน ป้ายสี่อันอยู่มุมขวาบน — บท / ตอนจบ / แผนผังเรื่อง / เมนู มุมขวาล่างมี CC (คำบรรยาย), 1.0× (ความเร็ว), เต็มหน้าจอ การดูครั้งแรกข้ามไม่ได้ ("ข้ามไม่ได้ในการดูครั้งแรก") ช่วงที่คุณดูแล้วจะมี ⏭ ข้ามช่วงที่ดูแล้ว
• จุดตัดสินใจ: การ์ดตัวเลือกจะปรากฏไม่กี่วินาทีก่อนช่วงวิดีโอจบ (มีการนับถอยหลังได้ — การตัดสินใจแบบจับเวลา เมื่อหมดเวลาจะเลือกตัวเลือกเริ่มต้นให้: "การเงียบก็เป็นทางเลือกหนึ่ง")
• แผนผังเรื่อง: ผังงานของภาพยนตร์ทั้งเรื่องที่โหนดซึ่งเคยผ่านแล้วจะสว่างขึ้น พร้อม แสดงทั้งหมด / ค้นหาตำแหน่งปัจจุบัน / ย้อนกลับมาที่นี่
• เมนู (การ์ดหยุดชั่วคราว): เล่นต่อ / เล่นฉากซ้ำ / บท / บันทึก / โหลด / การตั้งค่า / กลับไปหน้าชื่อเรื่อง ช่องบันทึกสามช่องพร้อมการบันทึกอัตโนมัติ
• การตั้งค่า: ระดับเสียง, เอฟเฟกต์เสียง, ความเร็วในการเล่น, คำบรรยาย, สไตล์คำบรรยาย (เส้นขอบ / แถบ), ชื่อผู้พูด, ขนาดคำบรรยาย, ช่วงที่ดูแล้ว, ดาวน์โหลดทั้งหมด, ล้างการดาวน์โหลดและการบันทึก, เต็มหน้าจอ

การแพ็กเกจและการเผยแพร่

1. เลือกโหนดแล้วกด ส่งออกบิลด์: ป๊อปโอเวอร์จะแสดง "กำลังเตรียมบิลด์…", "กำลังอัปโหลดสื่อ n/ทั้งหมด", "กำลังแพ็กเกจบิลด์…"
2. เมื่อเสร็จ ปุ่มจะเปลี่ยนเป็น ดาวน์โหลดบิลด์ และป๊อปโอเวอร์จะแสดงว่า "ดาวน์โหลดไฟล์ zip แล้วส่งให้ GenCode ซึ่งเป็นแอปเดสก์ท็อป GenCode จะช่วยคุณแพ็กเกจและเผยแพร่สำหรับเว็บ เดสก์ท็อป (Steam) และมือถือ" (GenCode ลิงก์ไปยังหน้าดาวน์โหลด)
3. ไฟล์ zip ประกอบด้วย app/ (บิลด์สำหรับเว็บ: index.html, runtime, story.json, manifest), desktop/ (โปรเจกต์ Electron พร้อมสคริปต์ Steam depot), mobile/ (โปรเจกต์ Capacitor สำหรับ iOS และ Android) และ README การเผยแพร่เกิดขึ้นใน GenCode — การสร้างคอนเทนต์และการโฮสต์แยกจากกันโดยตั้งใจ

บอร์ดส่งออกบิลด์แบบสตรีม (สื่อจะถูกดึงจากคลาวด์) ดังนั้นต้องแชร์โปรเจกต์แบบสาธารณะก่อน มิฉะนั้นคุณจะเห็น "โปรเจกต์นี้ไม่ได้แชร์แบบสาธารณะ: บิลด์แบบสตรีมจะดึงสื่อไม่ได้จนกว่าจะแชร์"

ตัวอย่างอย่างเป็นทางการ The Lighthouse Signal — interactive film เป็นโปรเจกต์ที่สมบูรณ์พร้อมตอนจบสี่แบบ บอร์ดแบบอ่านอย่างเดียวของโปรเจกต์นี้แสดงช่วงวิดีโอของทุกทางแยกและแผนผังเรื่อง

ภาพยนตร์อินเทอร์แอ็กทีฟใน 30 วินาที:

คำถามที่พบบ่อย

เวทีผู้กำกับต่างจากการสร้างวิดีโอโดยตรงอย่างไร

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

ใช้โมเดล 3D ของตัวเองได้หรือไม่

ได้ ตัวตรวจสอบ → สื่อ → อัปโหลดไฟล์ รับไฟล์ .glb (รวมถึง gltf / obj / fbx พื้นผิว HDR เสียง ไฟล์ละ 100 MB) หรือ วาง จาก ไลบรารีบอร์ด · 3D อย่างไรก็ตาม ผูกโครงกระดูก ใช้ได้เฉพาะกับโมเดลที่สร้างด้วย Tripo เท่านั้น — ทั้งสองอย่างเป็นคนละเรื่องกัน

เฟรมไปยังบอร์ดจับภาพมุมมองที่ฉันกำลังดูอยู่หรือไม่

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

แก้ไขหน้า HTML หลังสร้างเสร็จได้หรือไม่

ได้ หลายระดับ: แก้หน้าใน Studio ของหน้านั้น (แชท ลิ้นชักแก้ไข แผงเลเยอร์) สำหรับงานระดับพิกเซล ส่งออกเลเยอร์ จะเปลี่ยนหน้าเป็นเอกสารแบบเลเยอร์สำหรับตัวแก้ไขเลเยอร์

ทำไม Motion Studio ไม่มีไทม์ไลน์

เพราะขับเคลื่อนด้วยบทสนทนา: เอเจนต์จัดการเคลื่อนไหวตามคำอธิบายของคุณ คุณดูตัวอย่างแล้วเปลี่ยนแปลงด้วยประโยคเดียว แถบความคืบหน้าของเครื่องเล่นเลื่อนไปยังช่วงเวลาใดก็ได้ก่อนที่คุณจะแสดงความคิดเห็น สำหรับการควบคุมระดับเฟรม ให้ใส่จังหวะเวลาไว้ในบรีฟ ("แท่งกราฟงอกขึ้นที่วินาทีที่ 3", "ล็อกที่วินาทีที่ 12") แล้วเอเจนต์จะวางให้ตรงวินาที — ซึ่งเป็นสิ่งที่ทำให้ต่างจากโมเดลวิดีโอ: เฟรมถูกเขียนขึ้น ไม่ใช่ถูกเดา

เผยแพร่ภาพยนตร์อินเทอร์แอ็กทีฟได้หรือไม่

ได้ — ส่งออกบิลด์ แล้วเผยแพร่ด้วย GenCode ไปยังเว็บ เดสก์ท็อป (Steam) และมือถือ

การแก้ไขปัญหา

เวทีหรือ Motion Studio เปิดไม่ได้

"เวทีผู้กำกับ 3D ไม่ได้เปิดใช้งานสำหรับบัญชีนี้" / "Motion Studio ไม่ได้เปิดใช้งานสำหรับบัญชีนี้" แทบทุกครั้งหมายความว่าผู้ดูแลพื้นที่ทำงานปิด Media Studio ไว้ (สวิตช์เดียวกับบอร์ด) หรือคุณไม่มีสิทธิ์เขียนในโปรเจกต์นั้น (แชร์แบบอ่านอย่างเดียว) โปรเจกต์แบบอ่านอย่างเดียวยังแสดง "เวทีนี้ยังไม่ได้ตั้งค่า โปรดขอให้เจ้าของเปิดเวทีนี้หนึ่งครั้ง"

เวทีว่างเปล่า / "โหลดเวทีไม่สำเร็จ"

กด โหลดใหม่ หากยังไม่ได้ผล ให้กด ขอให้เอเจนต์แก้ไข — เอเจนต์จะตรวจสอบโค้ดของตัวเอง

วิดีโอจากการเคลื่อนไหวไปยังบอร์ดเป็นสีดำหรือสั้นมาก

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

เลเยอร์ที่ส่งออกไม่ตรงกับโปสเตอร์

ส่งออกเลเยอร์ จะแปลงทุกองค์ประกอบที่ส่งออกได้เป็นพิกเซล ฟิลเตอร์ SVG และเอฟเฟกต์การผสมบางแบบแยกเป็นเลเยอร์ต่างหากไม่ได้ จึงถูกข้ามและการ์ดจะแสดง "ข้าม N เลเยอร์"

เรนเดอร์ไม่ทำงาน / "กำลังเรนเดอร์อยู่แล้ว"

เรนเดอร์ได้ครั้งละหนึ่งงานต่อโหนดและสองงานต่อโปรเจกต์ รอให้ "กำลังเรนเดอร์…" หายไป โปสเตอร์ไม่มีการเคลื่อนไหวให้เรนเดอร์ — ให้ใช้ ส่งออกเลเยอร์