Search

Computer House Random
Computer House Random
  • Randomについて
  • ブログ
  • Project
  • 作品紹介
  • 部員紹介

らんだむちゃんライブのパネルを担当しましたが

Three.jsでライブしてみた

ATsU
最終更新 2020/12/25
目次
  • はじめに
  • キャンバスに描画
  • パネルへの適用
  • スクロールシェーダー
  • 今回のあれやこれやの感想
  • 参考資料

↑は縮小版です

はじめに

 見ていただいたのはらんだむちゃんうぃーく!でも紹介されました、踊ってみた動画です。 動画と言いましたが、マウスでカメラ操作できます。 今回の記事はこちらでの2つのパネルの実装についての話です。 Three.jsでの話にはなりますが、考え方自体は他のエンジンでも使えるのではと思います。

作品の曲入りVer.はこちら、 レポジトリはこちらです。

【喋ったり】らんだむちゃんうぃーく!作品紹介【倒されたり】

3週間での共同開発戦争
らんだむちゃん
最終更新 2020/10/29

キャンバスに描画

 パネルの模様はどちらのパネルもcanvas要素に書き起こしてからテクスチャとして読み込んでます。 バックスクリーンは別のカメラでレンダリングした結果を、ツイートパネルでは初めにツイートを読み込み描画したものを別々のcanvasに描いています。 これでUnityでいうRender Textureに当たるものや2D画像アセットができますね。

ちなみにjavascriptって幾何模様やテキストをcanvasに描画できるんですね、色々使えそう… 例えばこんな感じ?

	const ctx = canvas.getContext('2d');
	//// 以下で開始点(0,0), width x heightの大きさの長方形が描けます. 
	ctx.fillStyle = "rgb(235, 235, 255)";
	ctx.fillRect(0,0,width, height);

パネルへの適用

 テクスチャ(模様)の座標と、それに対応するオブジェクト上の座標は[0.0, 1.0]の2次元座標で対応しています。 THREE.PlaneGeometryでは片面のみに割り当てられています。 バックスクリーンパネルではcanvasとアスペクト比の同じパネルを生成し、そのまま貼り付けました。 ツイートパネルでは全ツイートをcanvasに起こしているため、パネルの高さに合うようにテクスチャをy座標方向に拡大しました。 拡大しないで貼り付けると縦方向に圧縮されてしまいますので…

スクロールシェーダー

 これはツイートパネル用に作成したシェーダーです。 前述のようにテクスチャを拡大しているので、y軸方向にスクロールしていって表示を切り替える必要があります。 停止と(1ツイート分)スクロールを繰り返していったのですが、これについて時間は与えられるものとして考えてみましょう。

 まずは全サイクルの時間とスクロール時間を決めます。 以下時間tを[0, サイクル時間)の範囲で考え、何サイクル目かをnowとしました。

float cycle = 120.0;
float stay = 80.0;
float t = mod(time, cycle); // 剰余
float now = floor(time / cycle); // 商の整数値

後は元の位置からt, nowのときにどれだけテクスチャ座標をずらすかを考えればよいので、スクロールする割合が(t-stay)/(cycle-stay)で与えられることより

texUV.y -= now / num_tweet; // サイクル分ずらす
texUV.y -= max(0.0, t - stay) / (cycle - stay) / num_tweet; // 

と書けます。

スクロール部の実装は以上となります。念のためfract(texUV.y)しておけば値が[0,1]の範囲に収まります。 考えたりテストしたりは時間かかったのにできたものは数行…

以下フラグメントシェーダー全体です。

precision mediump float;
uniform float time;
uniform sampler2D map;
uniform float num_tweet;
varying vec3 vNormal;
varying vec3 vPosition;
varying vec2 vUv;

void main() {
	vec2 texUV = vUv;
	texUV.y = texUV.y * 4.0 / num_tweet;

	float cycle = 120.0;
	float stay = 80.0;
	float t = mod(time, cycle);
	float now = floor(time / cycle);
	texUV.y -= now / num_tweet;
	texUV.y -= max(0.0, t - stay) / (cycle - stay) / num_tweet;

	texUV.y = fract(texUV.y);
	vec3 color = texture2D(map, texUV).rgb;
    gl_FragColor = vec4(color, 0.8);
}

今回のあれやこれやの感想

 見てもらえればわかると思うのですがシェーダー触りたてぐらいの実力なんですよね… それに芸術的な関心も薄いのでアート作品の案も浮かばない…まあでも表示に関わる部分ならこんな使い方もありかと感じた次第です。 作品の構成自体は、らんだむちゃんが踊るところにオブジェクトを追加していったシンプルなものになりましたが、ゲームシステムありきでグラフィックを仕上げていっても面白そうですね。

参考資料

  • [Unity3D]ブラウン管風シェーダーを作った

バックスクリーンのシェーダー作成時に参考にさせていただきました。

  • 【Three.js】アニメーションのあるcanvasをテクスチャにして読み込む

パネル作成に参考にさせていただきました。

らんだむちゃん 作品紹介 共同開発 記事を共有
Avatar
ATsU

主にらんだむちゃんをうりうりいじっています。webも触ります。

Computer House Random はパソコンによる創作活動を行っている大阪府立大学の部活動です

Avatar
ATsU

主にらんだむちゃんをうりうりいじっています。webも触ります。

らんだむちゃん 作品紹介 共同開発 記事を共有

News

コンピュータハウスランダムってどんな部活?

【1日目】5分でわかるランダムのこと
NEGI
最終更新 2020/04/18

はじめまして、らんだむちゃんです!

自己紹介と最初の動画
らんだむちゃん
最終更新 2020/03/19

作品紹介

海中探検に出発!

#ライザのアトリ絵
IK
最終更新 2020/12/01

らんだむちゃんライブのパネルを担当しましたが

Three.jsでライブしてみた
ATsU
最終更新 2020/12/25

新入生歓迎イベント備忘録

作品紹介とかも含む
Ryo
最終更新 2020/12/30

Tag Cloud

新歓ブログリレー2020 (37) 作品紹介 (32) 競技プログラミング (24) 競プロ勉強会 (21) 雑談 (15) 新入生歓迎イベント (14) らんだむちゃん (13) ゲーム (11) UNITY (9) グラフィック (9)

最新の投稿

日常生活で生きる競プロ

LT会
pngn
最終更新 2021/02/09

重力付四目並べ

ぺとりこーる
最終更新 2020/12/13

3d one minutes shooting

3dシューティング
kazetta
2020/12/01

ランチャー制作について

反省文
pngn
2020/12/01
READ MORE

関連記事


【喋ったり】らんだむちゃんうぃーく!作品紹介【倒されたり】

3週間での共同開発戦争

Avatar

【らんだむちゃんとしゃべろ】の裏側

ただらんだむちゃんとおしゃべりがしたかった

Avatar

峠,惜しくも越えられず

Paripippi Paper Survival

Avatar

らんだむちゃんの冒険

ugogo

Avatar

【RM】タワーディフェンスゲーム「ペンギン大海戦」

ペンギンが船で戦うタワーディフェンスゲーム

Avatar

【RM】ローグライクゲーム「ランダムダンジョン」

三種類の攻撃でダンジョンを攻略していくローグライクゲーム

Avatar

Random
Randomについて
ライセンス
Privacy Policy
お問い合わせ
部員専用サイト
Project
新歓2020
競プロ勉強会
Web
らんだむちゃん
ブログ
作品紹介
LT会
グラフィック
DTM
タグ一覧
Copyright © 2020 Computer House Random
引用
コピー ダウンロード