WebGL

ikeryou.jp2021年のあけましておめでとうコンテンツ作りました！ PC、スマホでグリグリしてみてください！今年もよろしくお願いします！

この投稿の内容は会社のアドベントカレンダーにて書いた記事と同じものになっています。 ですが、自分のブログにも同じ内容を残しておきたいので移植させていただいています。 three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴 実装方針 three.jsでの実装 JavaScript GLSL 改善…

~ この記事はTech KAYAC Advent Calendar 2020の18日目の記事になります ~ こんにちは！クライアントワークチーム・フロントエンドエンジニアの深澤です。web や unity の実装を担当しています。 今日は three.js で soft particle （ソフトパーティクル）を実装する方法を紹介していきたいと思います。 ソフトパーティクルを使って、霧のような雰囲気の中をキツネが駆けるシーンを作ってみました。 この動作デモはこちらから、動作デモのソースはこちらのリポジトリからご覧いただくことができます。 ソフトパーティクルについて ソフトパーティクルとは 特徴…

前回までは静止した描画を行ってきました。 gin-graphic.hatenablog.com 今回はp5.jsから変数を渡すことで、動的にGLSLでの描画を変化させ、動画を作りたいと思います。 シェーダー描画を動かす まとめ 参考文献 シェーダー描画を動かす シェーダーの描画を動かすために、p5.js から変数を渡すします。 p5.js でのframeCountに相当するフレームが進むにつれて変化する変数をGLSLに渡せば、時間変化する描画をすることごできます。 GLSLでy方向に上下に動く描画を試してみます。 let vs = ` precision highp float; attrib…

前回はp5.jsからシェーダーを呼び出して、画面全体にGLSLで描画を行いました。 gin-graphic.hatenablog.com 今回はシェーダーの適応範囲を変え、p5.jsで描画した図形を対象にしていきます。 シェーダーを図形に適用 図形を一色で塗りつぶす 図形内にGLSLで描画 p5.jsで図形を回転 まとめ 参考文献 シェーダーを図形に適用 図形を一色で塗りつぶす まずはp5.js側で円、四角形、三角形を描きます。 それらの図形に対して、フラグメントシェーダーから青色で塗りつぶしを行ってみましょう。 p5.jsでellipe、rect、triangle、planeの4種類の図形を…

WebGLでビルドしたプロジェクトを実行しようとしたところ以下のようなエラーが出ました。 wasm streaming compile failed: TypeError: Failed to execute 'compile' on 'WebAssembly': Incorrect response MIME type. Expected 'application/wasm' 解決策 Unity側の不具合っぽいのですが、現状ではPlayer SettingsのName Files As Hashesオプションを解除することで直せました。 EditメニューからProject Settingsを…

「まあ、そりゃそうだ」 という記事なのですが、せっかくやったことはアウトプットしておきたい派です。 Visual Effect Graphはコンピュートシェーダに依存 コンピュートシェーダはOpenGL ES 3.1以降に実装されている技術でVisual Effect Graphはそれを使っています。 Visual Effect GraphのOutput Particle LineとPointCacheを使ってFurっぽい表現テスト。できるだけモバイルで動かしたいから基本的にHDRPではなくURPで試すことにしている。#VFXGraph pic.twitter.com/IpBwrXMDKr— …

WebGLでビルド後にテストプレーしようとしたら見慣れないエラーが出てしまい驚きました。 現象 原因 解決策 対応後 現象 [Unity]+[WebGL]でビルド後ローカルファイルを読み込もうとしたらCOREエラーなるものが発生したため対応方法を検討しました。 [chrome]で[index.html]を開いた際以下のようなエラーが表示されました。 以下エラーメッセージの一部です。 Access to XMLHttpRequest at 'file:///〇〇' from origin 'null' has been blocked by CORS policy: Cross origin r…

Azure Static Web Apps とは? Azure Static Web Apps を使用すると、GitHub の特定のbranchと連動して、自動更新されるWeb アプリケーションを簡単に構築できます。 docs.microsoft.com 同じような事はGitHub Pagesでもできるのですが、 master 以外の特定のbranchを指定できる (運用環境とステージング環境とか) 認証機能を組み込める(json書くだけ) 地理的分散 による高速化 他のAzureリソースと組み合わせやすい プレビュー版なので無料 というところが、良さそうです。 Azure Static We…

ふと魔が差して、Android タブレットを手に入れてしまった。事前に、色々な機種を比較検討したのだが、結果的には、思っていた目的のすべてはカバーできなかった。ただ、思っていたよりも良かった点も多かったが。という事で、使い始めてしばらくのインプレッションなどを書いておこう。 [進化版]Dragon Touch タブレット 10.1インチ Android 10.0 RAM3GB/ROM32GB 1920x1200IPSディスプレイ 2.4G-5GWIFI GPS 5+8MPデュアルカメラ 日本語対応 MAX10 メディア: ちなみに、Amazon ではクーポンで 5000円引き だったのも選択の…

作業内容 ・セーブデータの不具合改修 WebGL上でのみ、ハナモンアドベンチャーでセーブデータの読み書きが場合によって上手くいかない不具合を改修した。 不具合はセーブ後に画面を遷移していないと起こっていたことがわかった。セーブ後は強制的にタイトル画面へ遷移させることで対応することにした。 セーブ後にタイトル画面へ遷移せずに、今いるシーンをもう一度フェードアウトしながらロードする方法に変更するかもしれない。 気になっていたセーブ機能の改修が出来てよかった。webGLでビルドする前提で作っておらず、最初のビルド時には上手くいかなかったので、今日まで出来るかハッキリわからず不安だった。でもwebGL…

Unity×デザインパターン完全版なるプロジェクトを見つけたのでシェアします。 最近はWebGL案件やってた絡みでWebの勉強をしてたのですが、今はUnity案件やってて、デザインパターンの勉強し始めてて見つけました！ コメント部分とか中国語ですが、わかりやすく簡潔に書かれててとてもいいです。 プロジェクトはこちらから入手できます↓ github.com ＊その他よく見ているデザインパターンのサイト↓ 言語はJavaです。 www.techscore.com プロジェクトの中を見てみると、全部で32個のデザインパターンがUnityC#で書かれてます。 また、ひとつのカテゴリの中に複数のサンプル…

・フリーサーバーを用意し、自作phina.js製のゲームをアップロード ・ハナモンアドベンチャーのボスから逃げた際の不具合改修 ・転職活動に向けて、過去に作成したphina.js製のゲームをネットにあげることにした。 サーバーはスターサーバーの無料契約で用意し、FFFTPからゲームをサーバーにコピーしてアップロード。 ・ハナモンアドベンチャーでボスから逃げた際に、プレイヤーの位置がボスと衝突した場所とは違う場所にスポーンする不具合を改修。 すべての不具合が改修出来次第、ExplorerMangerとSceneTransitionManagerをリファクタリングする予定 転職先を探すのにかなり時…

今回はアセットの紹介をしていきます。紹介するのはEasy Performant Outline 2D | 3D。オブジェクトにアウトラインを追加するアセットです。 お得なセール情報！ 現在アセットストアでは年末年始セールが開催中！500以上のアセットが50%OFF! 詳細とアセットの一覧はこちらのバナーからどうぞ どんなアセット？ 実行環境 インポートの確認 セットアップ UniversalRP Assetへの追加 デモシーンの確認 主要コンポーネント Outlinable Drawing Mode Outline Layer Render Style Outline Parameters(B…

ウィズクローン「NIZ」無料公開中です！ ウェブブラウザ版https://wizardarts.net/niz/#summary iOS版https://apps.apple.com/jp/app/id1546187733 Android版https://play.google.com/store/apps/details?id=jp.co.altoterras.niz1 公式ページhttps://wizardarts.net/niz/ 助力を請う請わぬもプレイヤー次第！キャラクター転送用掲示板https://9203.teacup.com/niz/bbs プレイ画面 TypeScript +…

概要 Uncaught SyntaxError: Invalid or unexpected token Uncaught ReferenceError: unityFramework is not defined at HTMLScriptElement.r.onload (XXXX.loader.js:1) Unity 2020.1.17f1 で WebGL ビルドして、 それを「Web Server for Chrome」で起動したところ、 Unity ロゴのプログレスバーが90%ぐらいのところから進まなくなり、 Chrome の Console を見たところ上記のエラーが発生していた …

作業内容 ・WebGL向けにビルドした際に生じた不具合の改修 ・昨日の残りの不具合を改修の続きをした。 攻撃対象、回復対象の名前の表示内容の不具合、会話の選択肢フレームサイズの不具合、会話終了後にプレイヤーがジャンプする不具合、ゲーム全体の日本語が表示されない不具合を改修。 昨日は残りの不具合の改修を終えたら新しいゲームを作り始めたいと考えていたが、不具合がいくつか追加で見つかって新しいゲーム作りを始めることが出来なかった。 WebGLにビルドしてから見つける不具合の原因をUnity上で見つけて解決することに時間がかかったことが原因なので、期限を決めて作業する練習をしようと思う。 就寝

作業内容 ・WebGL上でもゲームがフリーズしないよう不具合改修 ゲームをUnityRoomで動かそうとしても、ボス戦でボスを倒した後に遷移するクリアシーンでフリーズしていた不具合を改修した。原因はDOTweenの警告にあって、警告を消すとゲームが動くようになった。 昨日原因を突き止めて直すと宣言していたが出来なかった。年末の無理が残っていたので休むことに時間を使った。その代わりに今日はゲームが動くところまで直すことが出来た。 思い付きとはいえ、WebGLにビルドしても動くだろうからネットにあげたいと考えたのが甘かった。実際には時間がかかってしまい、次からはちゃんとどのプラットフォームで動くも…

錦です。 Adobeは、昨日12月31日を持って、Adobe Flash Playerのサポートを終了しました。