Three.jsでテクスチャマッピングを適用する方法【実例＆コード解説】
Javascript掲示板 PHPサンプルコード PHP掲示板 MariaDB(Mysql)サンプル Webで3Dコンテンツ Q&A集 Delphiサンプルコード Delphi掲示板 Excel VBA 初めてのAndroid Studio 初めてのFlutter+Dart プロフィール サイトマップ English ホーム JavascriptのWebGLコンテキストで3Dコンテンツを作る(three.jsを使用) Three.jsでテクスチャマッピングを適用する方法【実例＆コード解説】 Three.jsでテクスチャマッピングを適用する方法【実例＆コード解説】 Three.jsを活用すると、3Dオブジェクトにリアルなテクスチャを適用し、より自然な表現が可能になります。 本記事では、TextureLoaderを使ったテクスチャの読み込み方法や、マテリアル設定、影の調整について詳しく解説しま
疑似3Dの仕組み グラフィック編
疑似3Dとは ３次元グラフィックスを使用せず、2D画像を拡大縮小させることによって遠近法で立体的に見せる技術のことです。 3Dを使わないので処理が比較的軽量。 私はいくつか疑似３Dのスクリプトやらゲームやらを公開してきました。 それらを元に、疑似３Dの仕組み説明したいと思います。 今回は主にグラフィック面での仕組みを解説していきます。 全体図 疑似３Dとは、３Dを使わずに平面の画像のみで立体感のある映像を作る手法です。 遠くにある画像は小さく、手前にある画像は大きく表示させることで遠近感を出します。 配置される画像のイメージは↓の図のようなかんじ。 この中で【背景（壁）】と通常の【オブジェクト】の表示方法はだいたい同じです。 手前にあるものは大きく表示し、カメラが移動した際も画面上では大きく動くようにします。 【背景（床）】だけ表示方法が他と異なります。 床だけは形を変えて表示しないと立体
疑似3Dの仕組み 内部処理編
前回、２Dグラフィックの背景を立体的に見せる方法について解説しました。 今回はその背景の動きに合わせてオブジェクトの位置を変える処理の解説となります。 立体的に見せた背景に合わせてオブジェクトを配置することで、まるで３Dのような見た目になります。 サインとコサイン サイン・コサインと言えば中学や高校で習ったであろう三角関数です。 三角関数をざっくりと説明するなら、直角三角形の辺の長さから角の角度を求めたり、角の角度から辺の長さを求めるものです。 とはいっても、どれがどんな式か覚える必要はありません。 今回知っておくことは、サインとコサインが以下のような動きをするということです。 どちらも角度によって-1～1の値を返します。 二つの違いは、縦か横かです。 サインは90度で最大の1、270度で最小の-1です。 コサインは0度で最大の1、180度が最小の-1となります。 これで何ができるのかとい
疑似3Dでかんたんアウトラン
アウトランとは!? アウトランは、1980年代にゲームセンターを大いに賑わせた大人気カーレースゲームです。 今回は疑似3Dで、アウトランの様なスピード感ある演出に挑戦してみます。(せ〜がぁ〜♬) ※重要でない箇所は解説を省略しておりますので予めご了承下さい 完成イメージ ここでは、描画にOpenProcessingを利用します。 使い方に関しては、p5.jsをかじる本を参考にして頂けると幸いです。 疑似3Dとは 疑似3Dとは、3D座標(x,y,z)を2D座標(x,y)に変換する手法の事を言います。 文字通り、"擬似的に3Dを表現する"という意味ですね。 疑似3Dでは、次の手順に従って2D座標への変換処理を行います。 (x座標についても同様に計算します) スクリーンまでの距離を3D空間のz座標で割り算しその比を求める 3D空間のy座標に先程求めた比を掛け算する 結果として求められた値が描画す
Power Apps で疑似3Dシューティングゲームの地面を作成する② - 知識ゼロからはじめるローコーディング開発
JPPGBゲームコンテスト#1で発表をさせて頂きました疑似3Dシューティングゲーム「Power Guardians」の仕組み解説2回目となります。今回は、地平線の中心から放射状に延びる線の描画について解説をしたいと思います。 画面の中心から放射状に延びる線は、より遠近感を感じてもらうために描画しています。遠近感を感じさせるため、前の手順で地面に横線を引いて、奥から流れるようにアニメーションをさせてみましたが、本来ならその線というのは側面にも上側にも適用されていないと、おかしな話ですよね。ですが、今回作成するのは疑似３Dです。あらゆる方向に平面画像で描写をしていては、いくら画像を用意してもキリがありませんので、中央から放射状に延びる線を描くことで奥行を追加表現しているのです。色々なゲームで表現されている手法ですので、今回はこの方法を採用させて頂きました。 地面の放射状の線はSVGで作成してい
mieki256's diary - 疑似3Dの初歩の基礎を(Ruby+DXRubyを使いつつ)書いてみる
_Ruby Game Developing Advent Calendar 2016 の12/19が空欄だったので、「何も入ってないよりは何か入ってたほうがええんじゃないか…」的に、この記事を登録してみました。「Rubyでゲーム制作」というテーマから全然ずれてる内容だよなと思わないでもないですが、DXRubyを使って実験してるし…いいよね？ ダメ？ Advent Calendar って後からこうしてアップ・登録してもいいのかどうかも分かりませんが…。 さておき。なんとなく、2Dゲームにおける疑似3Dの初歩というか基礎をメモしておこうかなと思い立ったりして。 いやまあ、「あらゆるゲームが3DCGで描画されてるこの御時勢にｗｗｗ疑似3Dってｗｗｗちょおまｗｗｗ」と笑われそうな気もしますが。なんかその手の記事をぼんやり眺めてたら、式を求めるあたりで「三角形の相似」の一言で終わらせてる事例が結構あ
疑似３D表示まとめ｜しおち
３D表示の基礎はこちらのサイトで勉強していただくといいかと思います。 https://marina.sys.wakayama-u.ac.jp/~tokoi/ ぶっちゃけゲームに限って言えば、ある程度はデータ構成でごまかしていかに早く表示するかが鍵なので どこかのデータを固定化して計算すれば割と高速にいけます。 で、３D位置情報を固定化すると以下のページの透視変換だけで画面上の位置が計算できたりします。 https://marina.sys.wakayama-u.ac.jp/~tokoi/?date=20090829 今回は決め打ちの三角形を作成して、 透視変換 画面中心を視線、（０点） 写すスクリーンの底辺位置を地面（距離２２４） としてＺ位置を奥に移動させながら２２４，２２３，・・・を求めてその位置のＺを記録していく その際に三角形の縮尺位置も記録する。（スケールした大きさのデータを記録
床井研究室
別に怒ってない 卒業生に、「先生、あの時怒ってたでしょ」って言われることがあります。いや、本当に怒ったことはあるんですけど、たいていは議論しているうちにエキサイトしてきているのを「怒っている」と受け取られるんですね。内心は別に怒ってませんし、議論が終われば平静に戻ります。研究の議論とか、学生さんの提出物に対するレビューなんかは、それなりに真剣にやっているつもりなので、時にはエキサイトしてしまいます。でも別に怒っているわけではありません。それでも、私と議論すると「心を折られる」と言われてしまったのは、私の不徳の致すところなので (パワハラと取られかねませんし) もうちょっと穏便な物言いをしようと思います。昔、MIXI の友達からの紹介文に「笑いながら毒を吐く」と当時の学生さんに書かれてしまいましたから、どこか根性が曲がってるところがあるんでしょうね。学生さん相手でなくても「ブログと印象が違い
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
