Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? はじめに 3Dモデルを愉快に動かしたり、視点を立体的にぐるっと変えるような映像は、ユーザーに楽しさや面白さを体験させることができます。JavaScriptのライブラリThree.jsを利用すれば、数十行程度のコードで3Dモデルを表示させたり、それを動かしたりするコードを書くことができます。 Three.jsではできないこと Three.jsでは指定したcanvasに対して3Dモデルや画像を表示させることができます。canvasというのは、HTMLのcanvasタグで作ることができる映像表示用の要素です。 実はこのcanvasですが、そこ

はじめに 計算機のハードウェアの進歩により、最近では3D表現を用いたゲームやプログラムは手軽なものになりました。例えばJavaScriptではThree.jsのようなライブラリを用いることで手軽に3D表現を用いた作品を作ることができます。 今回は上記のようなリッチなライブラリには目もくれず、原始的な3D表現をJavaScriptで実装しようと思います。趣旨としては、簡易的な3D表現の単純さ、JavaScriptエンジンのパフォーマンスの体感、あたりになります。JavaScriptの実行エンジンはとても高度に最適化されており、C言語と同等までには届きませんが、スクリプト言語としてはとても高速に動作することが特徴です。 真面目に向き合わなければならない課題はきちんとこなしつつ、JavaScriptの高速さの影に隠れて楽をできるところは楽してしまおう、という感じで進めていきたいと思います。 作る

疑似3Dとは ３次元グラフィックスを使用せず、2D画像を拡大縮小させることによって遠近法で立体的に見せる技術のことです。 3Dを使わないので処理が比較的軽量。 私はいくつか疑似３Dのスクリプトやらゲームやらを公開してきました。 それらを元に、疑似３Dの仕組み説明したいと思います。 今回は主にグラフィック面での仕組みを解説していきます。 全体図 疑似３Dとは、３Dを使わずに平面の画像のみで立体感のある映像を作る手法です。 遠くにある画像は小さく、手前にある画像は大きく表示させることで遠近感を出します。 配置される画像のイメージは↓の図のようなかんじ。 この中で【背景（壁）】と通常の【オブジェクト】の表示方法はだいたい同じです。 手前にあるものは大きく表示し、カメラが移動した際も画面上では大きく動くようにします。 【背景（床）】だけ表示方法が他と異なります。 床だけは形を変えて表示しないと立体

前回、２Dグラフィックの背景を立体的に見せる方法について解説しました。 今回はその背景の動きに合わせてオブジェクトの位置を変える処理の解説となります。 立体的に見せた背景に合わせてオブジェクトを配置することで、まるで３Dのような見た目になります。 サインとコサイン サイン・コサインと言えば中学や高校で習ったであろう三角関数です。 三角関数をざっくりと説明するなら、直角三角形の辺の長さから角の角度を求めたり、角の角度から辺の長さを求めるものです。 とはいっても、どれがどんな式か覚える必要はありません。 今回知っておくことは、サインとコサインが以下のような動きをするということです。 どちらも角度によって-1～1の値を返します。 二つの違いは、縦か横かです。 サインは90度で最大の1、270度で最小の-1です。 コサインは0度で最大の1、180度が最小の-1となります。 これで何ができるのかとい

アウトランとは!? アウトランは、1980年代にゲームセンターを大いに賑わせた大人気カーレースゲームです。 今回は疑似3Dで、アウトランの様なスピード感ある演出に挑戦してみます。(せ〜がぁ〜♬) ※重要でない箇所は解説を省略しておりますので予めご了承下さい 完成イメージ ここでは、描画にOpenProcessingを利用します。 使い方に関しては、p5.jsをかじる本を参考にして頂けると幸いです。 疑似3Dとは 疑似3Dとは、3D座標(x,y,z)を2D座標(x,y)に変換する手法の事を言います。 文字通り、"擬似的に3Dを表現する"という意味ですね。 疑似3Dでは、次の手順に従って2D座標への変換処理を行います。 (x座標についても同様に計算します) スクリーンまでの距離を3D空間のz座標で割り算しその比を求める 3D空間のy座標に先程求めた比を掛け算する 結果として求められた値が描画す

JPPGBゲームコンテスト#1で発表をさせて頂きました疑似3Dシューティングゲーム「Power Guardians」の仕組み解説2回目となります。今回は、地平線の中心から放射状に延びる線の描画について解説をしたいと思います。 画面の中心から放射状に延びる線は、より遠近感を感じてもらうために描画しています。遠近感を感じさせるため、前の手順で地面に横線を引いて、奥から流れるようにアニメーションをさせてみましたが、本来ならその線というのは側面にも上側にも適用されていないと、おかしな話ですよね。ですが、今回作成するのは疑似３Dです。あらゆる方向に平面画像で描写をしていては、いくら画像を用意してもキリがありませんので、中央から放射状に延びる線を描くことで奥行を追加表現しているのです。色々なゲームで表現されている手法ですので、今回はこの方法を採用させて頂きました。 地面の放射状の線はSVGで作成してい

３D表示の基礎はこちらのサイトで勉強していただくといいかと思います。 https://marina.sys.wakayama-u.ac.jp/~tokoi/ ぶっちゃけゲームに限って言えば、ある程度はデータ構成でごまかしていかに早く表示するかが鍵なので どこかのデータを固定化して計算すれば割と高速にいけます。 で、３D位置情報を固定化すると以下のページの透視変換だけで画面上の位置が計算できたりします。 https://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20090829 今回は決め打ちの三角形を作成して、 透視変換 画面中心を視線、（０点） 写すスクリーンの底辺位置を地面（距離２２４） としてＺ位置を奥に移動させながら２２４，２２３，・・・を求めてその位置のＺを記録していく その際に三角形の縮尺位置も記録する。（スケールした大きさのデータを記録

別に怒ってない 卒業生に、「先生、あの時怒ってたでしょ」って言われることがあります。いや、本当に怒ったことはあるんですけど、たいていは議論しているうちにエキサイトしてきているのを「怒っている」と受け取られるんですね。内心は別に怒ってませんし、議論が終われば平静に戻ります。研究の議論とか、学生さんの提出物に対するレビューなんかは、それなりに真剣にやっているつもりなので、時にはエキサイトしてしまいます。でも別に怒っているわけではありません。それでも、私と議論すると「心を折られる」と言われてしまったのは、私の不徳の致すところなので (パワハラと取られかねませんし) もうちょっと穏便な物言いをしようと思います。昔、MIXI の友達からの紹介文に「笑いながら毒を吐く」と当時の学生さんに書かれてしまいましたから、どこか根性が曲がってるところがあるんでしょうね。学生さん相手でなくても「ブログと印象が違い

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? Scratch ライブラリと Scratch Tips 皆さん、Scratch してますか～？ 私は遅ればせながら今年(2024年) 5 月に初めて触りまして、その楽しさと魅力に気づかされて非常に良い経験をさせていただいております。元は小学生の息子に聞かれた際、色々と答えられるように、という動機でしたが、その目的は概ね達成しつつあります。 そこで、色々な小学生や Scratch をされている方々にとって有益な形で記事がまとめらえないか、ということで、あまり他では見かけたことがない観点「ライブラリ化」をベースに纏めてみたいと思います。 方

Scratch ライブラリ（疑似3Dスクロール） G14 Great Fighter Jerrydog では疑似 3D スクロールを使ってダイナミックな動きを実現してみました。After Burner だし。また、先日 Time Trial On Edge という 3D レーシングも試しに作ってみました。ということで、ライブラリ化できたら似たようなもの量産できそう、という期待に胸を膨らませて、ライブラリ化です。 上記 2 作品はある意味試行錯誤だったのですが、その知見を踏まえ、かなりシンプルに仕上がってます。計算量も少なめにし、より使いやすくしました。 疑似3Dスクロール プロジェクト ここにあります。 Scratch 上だと英語の人が多いので、基本英語のプロジェクトにするようにしました。日本語での説明はこの Qiita の記事で。むしろこっちの方が情報量多いですし。 ライブラリ概要 以下

EXIT で戻って START でゲーム開始です。 発進！ さて、ここからが本番です。 オープニングからシームレスにつながって空母に着艦し、Get Ready? の声が聞こえたら スペースキー を押しましょう。白煙を吹かしながら華麗に発進です。この Get Ready? は Scratch の音声合成の声を録音したものです。 何気にこの着艦～発進までのシーンがカッコ良すぎて、我ながらここだけで見とれてしまいます。 さあ戦いだ 武器はバルカンとホーミングミサイル。スペースキーでバルカン、z キーでホーミングミサイルですが、ホーミングミサイルはロックオンしてないと撃てません。ロックオンすると、おっさん声（私の声を加工したもの）で「Fire!」と言われ、照準が赤く変わりロックオン状態となって敵を捕捉します。なぜおっさん声なのか。Scratch の音声合成だとあまり緊迫感の無い落ち着いた声だったの

ゴンザレスからの挑戦状 どこを探しても何も無い！それもそのはず、そもそもこの3D空間には何も出現するような実装がされてない。なんてこった！これじゃあただ散歩してるだけじゃないか。でもアイテムを出現させるには、その前に敵も出現させないといけないらしい。背に腹は変えられない！いっちょやってみっか！ 今回の目標「敵を描画する」 今までは３D空間の描画やそこを自由に動き回ることだけに集中してきた。ここからはいよいよ敵やアイテムを出現させることに注力していく！ 今回は次のことに取り組むぞ。 3D空間でどうやってプレイヤーと相手の距離を測るか 距離に合わせて敵を遠近感を反映させて描画する方法 どっちもワクワクする課題だよね！3Dゲームの至上命題と言っても過言ではないマスターしがいのある挑戦になるぜ！ メインループに「エンティティの計算をする」を追加する スプライト「プレイヤー」を開こう。 メインループ

The product formerly known as RealityCapture—our professional-grade application for advanced photogrammetry workflows—is now RealityScan, and RealityScan 2.0 is now available for desktop! RealityScan 2.0 features faster workflows, smarter automation, and advanced inspection tools for VFX artists, game creators, survey teams, and anyone who needs to scan and build precise 3D models at scale. The st