BeepleのVJクリップをWebGLで再現した『DIGITAL LANDSCAPES』とクリエイティブスタジオ『Little Workshop』紹介 UZUREA編集部 公開:2018年9月20日(6年前) / 更新:2020年8月24日 コメント 0件 クリエイティブThree.jsVJwebWebGLデザイナー SNS X Facebook B! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 フランス、パリにあるデジタル・クリエイター・スタジオ『Little Workshop』はWebGL、Three.jsなどを用いた、Web用3Dコンテンツ制作を得意とする会社です。 今回は同スタジオによる、特に、モーショングラフィックやクラブVJなどに関わる人達にとって創作意欲を刺激しそうな作品をご紹介いたします。 記事の索引1 Beepleとのコラボレーション『DIGITAL LANDSCAPES』1.1 参考 Beepleによるオリジナル作品2 音楽と映像の融合作品『TRACK』3 まとめ 各種リンク Beepleとのコラボレーション『DIGITAL LANDSCAPES』 『DIGITAL LANDSCAPES(デジタル・ランドスケープ)』は、WebGLとThree.jsを用いて作られた実験作品。 アメリカ サウスカロライナ州のクリエイター『Beeple(ビープル)=Mike Winkelmann(マイク・ウィンケルマン)』によるVJクリップを元に、最新のweb技術で再現しています。 『DIGITAL LANDSCAPES』https://landscapes.littleworkshop.fr/ Beepleの映像を高いレベルで再現しつつも、web上のコンテンツとしてマウス操作に反応し、ある程度のカメラ操作を行えるように作られています。 街並みを連想させる立体物と、その街並みを高速で走り抜ける光が印象的なBitsweep。 #01 – Based on Bitsweep by Beeple ノスタルジックな、ワイヤーフレーム状の山々を走り抜ける様なPotus 3012。 #02 – Based on Potus 3012 by Beeple 雪の降るゼブラ模様の幾何学的な山脈を俯瞰していくMoytains。 #03 – Based on Moytains by Beeple ワイヤーフレーム状の崖?を進んでいくYellowbrick。 #04 – Based on Yellowbrick by Beeple いずれもオリジナル作品の目を引く効果をほぼ完ぺきに再現しています。 前述したように、オリジナル作品の制作者Beepleの手法はCinema4DやAfftereffectsなどによって制作された後、レンダリングされた動画作品ですが、これをweb技術によってインタラクティブコンテンツに落とし込む、というLittle Workshopの技術力も確かなものでしょう。 参考 Beepleによるオリジナル作品 尚、Beepleの作品は、その多くがweb上からクリエイティブ・コモンズの元、商用・非商用問わずダウンロード、利用が可能という形で提供されています。 国内のVJ達にも多く愛用されている同氏の作品は、クラブに足しげく通う人であれば小箱・大箱問わず、その映像を見た事のある人は多いのではないでしょうか。 BeepleのVJ Loop作品一覧はこちら 音楽と映像の融合作品『TRACK』 DIGITAL LANDSCAPESによる作品をもうひとつ、音楽と映像の融合作品『TRACK』もご紹介しておきましょう。 『TRACK』https://demos.littleworkshop.fr/track こちらもWebGL / Three.jsによって作られた実験プロジェクトで、ミュージック・トラックにあわせて、抽象的な空間を1人称視点で進んでいく……Digital Tunnel(デジタル・トンネル)などと呼ばれるような作品です。 さらにマウスで上下左右を眺めながらVR対応の端末であれば、VRモードでの閲覧も可能。 アクセスし、『START』を押すと音楽が流れ始め…… ミュージックトラックに合わせて光が変化するトンネル状の空間を進んでいきます。 区画毎のゲートを越えると、それぞれ違った空間が描画されていきます。 それぞれの空間は、BGMに合わせて描画するようにつくられているそうです シンプルなグラフィックながら、高い創造性を感じる作品 この作品の為にアメリカのエレクトロ・レーベル『Makeup and Vanity Set』のトラック『Implant』を採用し、ビジュアルとビジュアルエフェクトをトラックと同期させています。 個人的に大好きなSEGAのゲーム『Rez』を彷彿とさせるようで、デジタル空間を浮遊する感覚が心地よく、暫くリピートが止まりませんでした。 “Rez”-Gamer’s Guide to… ¥984 (2024/11/21 09:10:53時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す Rez Infinite Original Soundtrack ¥2,549 (2024/11/21 09:10:54時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す まとめ 各種リンク 『Little Workshop』の高いクリエイティビティと、WebGL、Three.jsの可能性を感じるwebインタラクティブ作品を2件ご紹介しました。 同社のwebサイトではこの他にも多くの作品が公開されています。 当記事で紹介したコンテンツに関連するリンクなども下に記載いたしますので、webクリエイティブや、VJ、グラフィックデザイン、モーショングラフィックなど、関連するデザイナーやクリエイターの方は、是非一度訪れてみてください。 Little WorkshopLittle Workshop TwitterBeepleBeeple TwitterMakeup and Vanity Set 初めてのThree.js 第2版 ―WebGLのためのJavaScript 3Dライブラリ ¥4,200 (2024/11/21 09:10:55時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す 映像作家100人+100 – Japanese Motion Graphic Creators ¥4,665 (2024/11/21 20:34:31時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す はじめてのCinema 4D 改訂第2版 3DCGの基本からMoGraph、キャラクターモデリングまで学べる ¥1,375 (2024/11/21 09:10:56時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す After Effects 逆引きデザイン事典[CC/CS6]増補改訂版 ¥3,600 (2024/11/21 09:10:57時点 Amazon調べ-詳細) Amazonでのレビューを見る Kindle Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す