I Made a Promo Video Using Hyperframes Keyframes + Three.js + Hermes

1
00:00:00,000 --> 00:00:08,615
ถ้าเพื่อน ๆ เคยดูวิดีโอก่อนหน้านี้ของผมเกี่ยวกับ

2
00:00:08,615 --> 00:00:24,051
Hyperframes มาแล้ว ก็คงเห็นว่าผมได้ทำวิดีโอและสื่อโปรโมทหลายประเภทด้วยเครื่องมือตัวนี้

3
00:00:24,051 --> 00:00:33,923
และมันเป็นเครื่องมือที่ดีมาก ๆ ครับ แถมยังมีฟีเจอร์ใหม่

4
00:00:33,923 --> 00:00:47,744
ๆ ออกมาให้ใช้ตลอดเวลา จริง ๆ แล้วมันเป็นวิกิที่ถูกค้นหามากเป็นอันดับสองบนหน้า

5
00:00:47,744 --> 00:01:06,052
agent wikis ของผม รองจาก Hermes Agent เอง ฉะนั้นมันก็ได้กลายเป็นเครื่องมือยอดนิยมสำหรับการทำวิดีโอด้วย

6
00:01:06,052 --> 00:01:16,282
agent หรือ AI ไปแล้วครับ ผมเห็นโพสต์นี้เมื่อไม่กี่วันก่อน

7
00:01:16,282 --> 00:01:24,718
เป็นเรื่องของ Keyframes ที่ตอนนี้ถูกเปิดซอร์สใน

8
00:01:24,718 --> 00:01:37,103
Hyperframes แล้ว มันช่วยให้เกิดการเคลื่อนไหวที่นุ่มนวลขึ้นในรูปแบบของ

9
00:01:37,103 --> 00:01:46,436
arc (เส้นโค้ง) เห็นได้จากการเคลื่อนไหวแบบนี้ในวิดีโอ

10
00:01:46,436 --> 00:01:55,231
ที่ทำให้รู้สึกเหมือนเป็นซอฟต์แวร์ตัดต่อวิดีโอจริง

11
00:01:55,231 --> 00:02:06,180
ๆ เขาสร้าง Keyframes ขึ้นมาตรงนี้ และวันนี้ผมจะมาลองใช้ดูครับ

12
00:02:06,180 --> 00:02:15,513
นี่คือหน้าในเอกสารของพวกเขาที่อธิบายเรื่อง Keyframes

13
00:02:15,513 --> 00:02:24,129
และ Arc Motion ผมจะทำสิ่งนี้บน Hermes Agent ครับ

14
00:02:24,129 --> 00:02:35,257
และอย่างที่เห็น ผมเพิ่งติดตั้ง Hyperframes ลงบนเครื่องนี้เสร็จ

15
00:02:35,257 --> 00:02:44,231
แนวคิดของวิดีโอนี้ และสิ่งที่ผมจะพยายามทำวันนี้คือ

16
00:02:44,231 --> 00:02:54,462
ผมจะลองสร้างวิดีโอโปรโมทสำหรับโปรเจกต์ใหม่ของผมที่ชื่อว่า

17
00:02:54,462 --> 00:03:06,667
Onchain Agent ซึ่งมันก็เสร็จไปเกือบหมดแล้ว พร้อมที่จะปล่อยในเวอร์ชัน

18
00:03:06,667 --> 00:03:23,539
beta แต่ผมยังขาดวิดีโอโปรโมทครับ ต้องบอกว่าผมยังไม่ค่อยมีภาพที่ชัดเจนว่าอยากให้ออกมาเป็นแบบไหน

19
00:03:23,539 --> 00:03:34,667
รู้แต่ว่าอยากให้มีไอคอนหุ่นยนต์นี้อยู่ในวิดีโอ และน่าจะอยากใช้

20
00:03:34,667 --> 00:03:46,334
GPT image generation เพื่อสร้างองค์ประกอบเพิ่มเติมในสไตล์เดียวกัน

21
00:03:46,334 --> 00:03:57,283
ผมกำลังคิดจะสร้างหุ่นยนต์เต็มตัวในสไตล์นั้น ผมสนใจอยากลองทำดู

22
00:03:57,283 --> 00:04:10,027
ยังไม่รู้ว่ามันจะออกมายังไง แต่ผมเคยเห็นโพสต์สองสามโพสต์เกี่ยวกับการใช้

23
00:04:10,027 --> 00:04:19,539
Three.js ร่วมกับ Hyperframes เพื่อสร้างวิดีโอแบบมีโลก

24
00:04:19,539 --> 00:04:30,488
3D เล็ก ๆ แล้วค่อยถ่ายวิดีโอผ่านมัน ไม่รู้ว่าจะออกมาเป็นยังไง

25
00:04:30,488 --> 00:04:41,975
แต่นั่นคือไอเดียคร่าว ๆ ของผมครับ ผมก็เลยจะมาระดมสมองสักหน่อยกับ

26
00:04:41,975 --> 00:04:55,796
Hermes และอย่างที่บอก เป้าหมายหลักก็คือการสร้างวิดีโอโปรโมทสำหรับเว็บไซต์นั้น

27
00:04:55,796 --> 00:05:04,770
เราจะมาทดสอบเครื่องมือต่าง ๆ เหล่านี้ด้วยครับ เช่น

28
00:05:04,770 --> 00:05:13,386
Three.js, ลองใช้ Hyperframes กับ Arc Motion, ใช้

29
00:05:13,386 --> 00:05:24,155
GPT image generation และดูว่า Hermes มีสกิลอะไรให้ใช้อีกบ้าง

30
00:05:24,155 --> 00:05:33,668
วิดีโอนี้จะเป็นแนวค่อนข้างอิสระ ไม่เน้นความเป๊ะมากนัก

31
00:05:33,668 --> 00:05:46,232
มีคนขอให้ผมแสดงขั้นตอนทีละขั้นตอนว่าผมทำยังไงในการสร้างวิดีโอเหล่านั้น

32
00:05:46,232 --> 00:05:57,540
แทนที่จะเริ่มจาก prompt เลย ฉะนั้นวิดีโอนี้ก็เลยเป็นแบบนั้นครับ

33
00:05:57,540 --> 00:06:06,873
จังหวะอาจจะช้ากว่าวิดีโอ Hyperframes อื่น ๆ นิดหน่อย

34
00:06:06,873 --> 00:06:17,642
แต่ควรจะช่วยให้เห็นภาพชัดเจนขึ้นว่าจริง ๆ แล้วต้องทำอะไรบ้าง

35
00:06:17,642 --> 00:06:26,258
ถ้าชอบวิดีโอนี้ ฝากติดตามผมบน X ที่ @TommyStudio

36
00:06:26,258 --> 00:06:35,053
ด้วยนะครับ ผมมักจะโพสต์วิดีโอสั้น ๆ เกี่ยวกับข่าว

37
00:06:35,053 --> 00:06:46,540
AI และฟีเจอร์ของ agent ล่าสุด ตลอดจนบทความและโพสต์ที่ละเอียดขึ้น

38
00:06:46,540 --> 00:06:56,232
และก็ฝากสมัครรับจดหมายข่าวฟรีประจำสัปดาห์ของผมด้วยครับ

39
00:06:56,232 --> 00:07:14,360
ซึ่งผมเขียนด้วยตัวเองและปล่อยทุกวันศุกร์ ตรงนี้คุณจะได้อ่านความคิดเห็นสุดตรงไปตรงมาของผมเกี่ยวกับข่าว

40
00:07:14,360 --> 00:07:22,976
AI โมเดล งานวิจัย รวมถึงเห็นตัวอย่างโปรเจกต์ใหม่

41
00:07:22,976 --> 00:07:32,309
ๆ ที่ผมกำลังทำอยู่ก่อนที่จะประกาศที่อื่น สมัครได้ที่

42
00:07:32,309 --> 00:07:44,335
onchainaigarage.com ลิงก์อยู่ในคำอธิบายครับ ทีนี้ผมติดตั้งเสร็จแล้ว

43
00:07:44,335 --> 00:07:53,309
ตอนนี้ผมอยู่ใน WSL พร้อมกับ Hermes Agent ผมติดตั้ง

44
00:07:53,309 --> 00:08:07,668
Hyperframes เอง แล้วก็ติดตั้ง FFmpeg ซึ่งเป็นสิ่งที่จำเป็นสำหรับการตัดต่อบางส่วน

45
00:08:07,668 --> 00:08:16,643
และนั่นเป็นหนึ่งในสิ่งที่ต้องมีก่อนใช้ Hyperframes

46
00:08:16,643 --> 00:08:25,438
เราจะเริ่มจากการระดมสมองกันก่อนครับ นี่คือ prompt

47
00:08:25,438 --> 00:08:35,668
เปิดของผม ซึ่งเป็นการเทความคิดล้วน ๆ ออกมาจากหัวผมเลยครับ

48
00:08:35,668 --> 00:08:44,643
ผมบอกว่าผมอยากระดมสมองเกี่ยวกับวิดีโอโปรโมทความยาว

49
00:08:44,643 --> 00:09:01,335
45 วินาทีสำหรับโปรเจกต์ใหม่ Onchain Agent ผมอยากใช้รูปภาพที่เป็นโลโก้หุ่นยนต์เป็นจุดศูนย์กลาง

50
00:09:01,335 --> 00:09:14,438
พร้อมกับโลโก้ตัวอักษรที่อยู่ในโฟลเดอร์เดียวกัน ขอวางแผนวิดีโอก่อนค่อยทำนะ

51
00:09:14,438 --> 00:09:23,053
โลโก้เป็นแค่หัวหุ่นยนต์ แต่ผมกำลังคิดจะใช้ Image

52
00:09:23,053 --> 00:09:36,694
Gen เพื่อสร้าง sprite sheet ที่จะนำไปทำเป็นตัวหุ่นยนต์เต็มตัวในสไตล์เดียวกัน

53
00:09:36,694 --> 00:09:55,541
แล้วค่อยใช้ Hyperframes และอาจจะ Three.js ด้วยในการสร้างแอนิเมชันหุ่นยนต์เดินนำทางผ่านสนามเพลาะพร้อมกับคน

54
00:09:55,541 --> 00:10:05,592
ฝากเช็คที่ onchain.agent และ agent.onchain.ai.garage.com

55
00:10:05,592 --> 00:10:15,105
สำหรับรายละเอียดของโปรเจกต์ด้วยครับ ส่วนสุดท้ายจะเป็น

56
00:10:15,105 --> 00:10:23,541
call to action จะต้องใช้ตัวละครที่เป็นตัว Tonbi

57
00:10:23,541 --> 00:10:33,771
ที่เห็นในทุก thumbnail ในช่วง CTA มาวางแผนแนวคิดก่อนเลยนะ

58
00:10:33,771 --> 00:10:42,746
เพราะนี่คือ Codex ถ้าไม่บอกให้ชัดว่าอยากวางแผนก่อน

59
00:10:42,746 --> 00:10:51,900
มันจะเริ่มสร้างเลยครับ ผมอยากลองใช้ Arc Motion ด้วย

60
00:10:51,900 --> 00:11:00,695
และนี่คือหน้าเอกสารของ Keyframes อย่างที่คงเดาได้

61
00:11:00,695 --> 00:11:14,336
มันเป็นแค่การเทความคิดล้วน ๆ แต่มันก็เป็นวิธีที่ดีในการเริ่มเซสชันวางแผนครับ

62
00:11:14,336 --> 00:11:23,669
เพราะผมไม่มีอะไรมากไปกว่าสิ่งที่อยู่ในหัว ผมก็เทลงใน

63
00:11:23,669 --> 00:11:38,387
prompt แล้วดูว่าได้อะไรออกมา แต่งานนี้มีองค์ประกอบหลายอย่างและใช้เครื่องมือหลายตัว

64
00:11:38,387 --> 00:11:47,182
ทั้ง Image Gen, Three.js, Hyperframes, Arc Motion

65
00:11:47,182 --> 00:11:58,131
และรูปอ้างอิงเหล่านี้ มันจึงต่างจาก prompt ที่ผมเคยทำในวิดีโอ

66
00:11:58,131 --> 00:12:08,900
Hyperframes อื่น ๆ ครับ ทีนี้มันเช็คไฟล์ทั้งหมดเรียบร้อยแล้ว

67
00:12:08,900 --> 00:12:17,515
และจะเป็นวิดีโอโปรโมทสินค้าแบบ cinematic ความยาว

68
00:12:17,515 --> 00:12:26,849
45 วินาที แนวคิดหลักคือ "trench scout with receipts"

69
00:12:26,849 --> 00:12:40,131
คือหุ่นยนต์ลาดตระเวนในสนามเพลาะพร้อมหลักฐาน มันก็เลยขยายไอเดียที่ผมมีออกไป

70
00:12:40,131 --> 00:12:53,054
Codex มันชอบพูดยืดยาวมากบางครั้ง ของมันจริง ๆ น่าจะสั้นกว่านี้ครึ่งหนึ่ง

71
00:12:53,054 --> 00:13:04,362
แผนที่ได้มานี้ละเอียดมาก และผมอยากให้มันระดมสมองมากกว่านี้หน่อย

72
00:13:04,362 --> 00:13:18,900
แทนที่จัด scope ทุกอย่างเสร็จสรรพเลย แต่โดยรวมแล้วก็ดูเข้ากับสิ่งที่ผมต้องการครับ

73
00:13:18,900 --> 00:13:27,695
นี่คือแผนจริง ๆ แล้ว มันมี Arc Motion รวมอยู่ด้วย

74
00:13:27,695 --> 00:13:37,208
มนุษย์เดินเข้าสู่ความวุ่นวาย หุ่นยนต์กลายเป็นผู้นำทาง

75
00:13:37,208 --> 00:13:46,362
ภาพรวมก็ตรงกับสิ่งที่ผมอยากได้ ส่วน evidence engine

76
00:13:46,362 --> 00:13:58,388
ก็คือผมอยากมีการอธิบายว่า agent ทำอะไรบ้าง ซึ่งก็รวมถึงข้อมูลเรื่อง

77
00:13:58,388 --> 00:14:08,798
liquidity (สภาพคล่อง), wallet flows (การไหลของกระเป๋าเงิน)

78
00:14:08,798 --> 00:14:18,311
และข้อมูลประเภทนั้น ๆ ครับ ส่วน wallet graph analysis

79
00:14:18,311 --> 00:14:27,465
จะกลายเป็น scene ของ Three.js ใช้ node graph tunnel

80
00:14:27,465 --> 00:14:36,798
แบบ 3D โดยหุ่นยนต์และมนุษย์วิ่งตามเส้นทางโค้งผ่านมัน

81
00:14:36,798 --> 00:14:45,413
เสียงดีมาก ถ้าทำได้จริงตามนี้นะครับ data packets

82
00:14:45,413 --> 00:14:54,567
จะเคลื่อนที่เป็นเส้นโค้งระหว่าง nodes โดยใช้ motion

83
00:14:54,567 --> 00:15:03,183
path plugin โอเค แล้วก็จะจบด้วย CTA ที่มีตัวละคร

84
00:15:03,183 --> 00:15:14,131
Tonbi ในฐานะแผน มันก็ฟังดูดีครับ แต่ไม่รู้ว่าจะออกมาเป็นยังไง

85
00:15:14,131 --> 00:15:25,080
มันจะใช้ Image Gen สร้างหุ่นยนต์ตัวนี้ ส่วนแนวทางแอนิเมชันของ

86
00:15:25,080 --> 00:15:33,516
Hyperframes จะใช้ GSAP เป็นไทม์ไลน์หลัก ใช้ Arc

87
00:15:33,516 --> 00:15:42,311
Motion สำหรับ scan orbs, fake tickers ที่บินออกไป

88
00:15:42,311 --> 00:15:53,260
และหุ่นยนต์กระโดดเล่น ๆ น่ารัก ๆ ใช้ Three.js แบบเลือกสรรครับ

89
00:15:53,260 --> 00:16:03,132
ใช่เลย ผมไม่อยากให้ทั้งวิดีโอเป็น 3D แต่ถ้ามีองค์ประกอบ

90
00:16:03,132 --> 00:16:13,362
3D สักชิ้นก็คงเจ๋งดี ทีนี้ในฐานะแนวคิด ผมว่ามันดีแล้วครับ

91
00:16:13,362 --> 00:16:23,773
ผมถามมันว่า "มีทุกอย่างที่ต้องการเพื่อสร้างสิ่งนี้หรือยัง"

92
00:16:23,773 --> 00:16:37,952
เราน่าจะติดตั้ง dependencies ครบหมดแล้ว แต่ขอเช็คอีกรอบก่อนที่จะเสียเวลาไปเปล่า

93
00:16:37,952 --> 00:16:48,542
ๆ ผมว่าสกิล Hyperframes Keyframes เฉพาะเจาะจงยังขาดอยู่ครับ

94
00:16:48,542 --> 00:16:56,978
เพราะมันเป็นสกิลที่ต้องติดตั้งแยก เป็น workflow

95
00:16:56,978 --> 00:17:05,593
skill ฉะนั้นเราต้องติดตั้ง Keyframes และ project

96
00:17:05,593 --> 00:17:15,645
product launch video ซึ่งน่าจะเป็นอีกสกิลของ Hyperframes

97
00:17:15,645 --> 00:17:24,260
แล้วค่อย generate หุ่นยนต์ สร้าง directory สร้าง

98
00:17:24,260 --> 00:17:33,234
storyboard ก่อน แล้วหยุดที่ preview ให้ผมรีวิวครับ

99
00:17:33,234 --> 00:17:43,465
โอเค ไปกันต่อเลย น่าจะใช้เวลาสักพักในการสร้าง เพราะต้องทำ

100
00:17:43,465 --> 00:17:55,132
image gen แล้วก็เรนเดอร์ทั้งหมดด้วย อย่างหนึ่งที่ต้องระวังเวลาใช้

101
00:17:55,132 --> 00:18:06,260
Hyperframes คือ คุณต้องชี้ให้มันไปยังหน้าเอกสารเฉพาะเจาะจงเสมอ

102
00:18:06,260 --> 00:18:19,542
ผมคิดว่าเคยพูดในวิดีโอก่อนหน้านี้แล้ว แต่ถ้าคุณไม่บอกให้ชัดเจนว่าจะใช้อะไร

103
00:18:19,542 --> 00:18:29,594
หลายครั้งมันจะพยายาม "โกหก" หรือทำเลียนแบบผลลัพธ์แทนครับ

104
00:18:29,594 --> 00:18:46,465
เช่น ถ้าเป็นสกิลเฉพาะ แทนที่จะติดตั้งสกิล มันก็จะพยายามทำผลลัพธ์สุดท้ายโดยไม่ใช้สกิลที่ถูกต้อง

105
00:18:46,465 --> 00:18:57,594
จากประสบการณ์ของผม ถ้าคุณต้องการสกิลเฉพาะหรือเอฟเฟกต์บางประเภท

106
00:18:57,594 --> 00:19:07,825
การให้หน้าเอกสารที่แน่นอนจะช่วยได้มากครับ ทีนี้มันกำลังทำ

107
00:19:07,825 --> 00:19:17,696
image gen อยู่ เดี๋ยวดูกันว่าจะออกมายังไง โอเค มันสร้าง

108
00:19:17,696 --> 00:19:27,030
directory เสร็จแล้วและ preview studio ก็กำลังรันอยู่

109
00:19:27,030 --> 00:19:35,466
ใช้เวลาประมาณ 30 นาทีผมว่า รวม ๆ กันแล้ว 30 ถึง

110
00:19:35,466 --> 00:19:37,440
40 นาทีครับ