質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

解決済

1回答

1289閲覧

UnityWebGL上のテクスチャの差し替えについて

masutake0

総合スコア3

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

ビルド

ソースコードを単体で実行可能なソフトウェアへ変換する過程をビルド(build)と呼びます

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

0グッド

0クリップ

投稿2021/07/15 06:57

編集2021/07/27 11:02

前提・実現したいこと

今回は前回の続きになります。
ローカルフォルダにある画像を入れ替えることで、unityのwebgl上でオブジェクトのテクスチャを自由に変えられるようにしたいです。

試したこと

今回はwindowsアプリで上記のことができないか試してみたところ、無事にファイルを変更することでアプリを起動したままテクスチャを変更することができました。

行った手順を以下に示します。

まず、以下のスクリプトをCubeにアタッチしてビルドしました。

C#

1using System.Collections; 2using System.Collections.Generic; 3using UnityEngine; 4using UnityEngine.Networking; 5 6public class CubeTexture : MonoBehaviour 7{ 8 private float timeleft; 9 //画像リンクから画像をテクスチャにする 10 Texture texture; 11 //テクスチャをマテリアル化するので生成しておく 12 [SerializeField] Material material; 13 //画像リンク 14 string url = " file:///c:/Users/xxx/Desktop/blue.png"; 15 void Start() 16 { 17 //先にマテリアルのシェーダを変更しておく 18 string shader = "Legacy Shaders/Diffuse"; 19 material.shader = Shader.Find(shader); 20 //StartCoroutine(Connect()); 21 } 22 23 void Update() 24 { 25 timeleft -= Time.deltaTime; 26 if (timeleft <= 0.0) 27 { 28 timeleft = 10.0f; 29 StartCoroutine("Connect"); 30 } 31 } 32 33 //テクスチャを読み込む 34 private IEnumerator Connect() 35 { 36 UnityWebRequest www = UnityWebRequestTexture.GetTexture(url); 37 38 yield return www.SendWebRequest(); 39 40 if (www.isNetworkError || www.isHttpError) 41 { 42 Debug.Log(www.error); 43 } 44 else 45 { 46 //textureに画像が入るよ 47 texture = ((DownloadHandlerTexture)www.downloadHandler).texture; 48 //textureをマテリアルにセット 49 material.SetTexture("_MainTex", texture); 50 51 gameObject.GetComponent<Renderer>().material = material; 52 Debug.Log(www.error); 53 } 54 } 55}

画像はデスクトップ上に配置しています。
同じ名前の画像をデスクトップの画像に上書き保存するとアプリ上のテクスチャが上書きした画像に変更することできました。
前回のgifのようなテクスチャの切り替わりが画像を変更することで行えるようになりました。)

###発生している問題
上記のwindowsアプリで行ったことをwebgl上で行いたいのですが、うまくいきません。
webglでビルドしてlocalhostで試してみたところchromeのコンソール上で以下のようなエラーが出ました。

Not allowed to load local resource

そこで、以下のようなファイル構成にして画像リンクを./image/blue.pngに変更しました。

sample ┣ image/ ┃ ┗ blue.png ┗ index.html

これでwebglを起動させると画像が反映されるのですが、アプリを動かしている状態で画像の上書きをしてもテクスチャ変更することができませんでした。

そもそもwebglではアプリ起動中にファイルを参照をすることができないのでしょうか。
知っている方がいれば教えていただきたいです。

###追記
System.IOを使うスクリプトで試してみました。

C#

1using System.Collections; 2using System.Collections.Generic; 3using UnityEngine; 4using System.IO; 5 6public class TextLoad : MonoBehaviour 7{ 8 private float timeleft; 9 //テクスチャをマテリアル化するので生成しておく 10 [SerializeField] Material material; 11 12 void Start() 13 { 14 //先にマテリアルのシェーダを変更しておく 15 string shader = "Legacy Shaders/Diffuse"; 16 material.shader = Shader.Find(shader); 17 //StartCoroutine(Connect()); 18 } 19 20 void Update() 21 { 22 timeleft -= Time.deltaTime; 23 if (timeleft <= 0.0) 24 { 25 timeleft = 10.0f; 26 StartCoroutine(textLoad()); 27 } 28 } 29 30 IEnumerator textLoad() 31 { 32 string filepath = Application.streamingAssetsPath + "/blue.png"; 33 byte[] bytes; 34 var load_texture = new Texture2D(1, 1); 35 if (filepath.Contains("://") || filepath.Contains(":///")) 36 { 37 WWW www = new WWW(filepath); 38 yield return www; 39 byte[] result = www.bytes; 40 load_texture.LoadImage(result); 41 } 42 else 43 { 44 bytes = File.ReadAllBytes(filepath); 45 load_texture.LoadImage(bytes); 46 yield return load_texture; 47 Renderer renderer = GetComponent<Renderer>(); 48 renderer.material.mainTexture = load_texture; 49 } 50 } 51} 52

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

masutake0

2021/07/27 11:05

コメントありがとうございます。 System.IOを用いたWebglでのファイル参照を実際に行ったものを追記いたしました。 提示していただいたものでは確かにWebGLでテキストファイルの参照・変更は行われました。 しかし、追記したスクリプトでテクスチャの参照を試したところエディタ上ではテクスチャの反映・変更ができたのですが、WebGL上ではテクスチャが参照されませんでした。 何か知っていることがあれば教えていただきたいです。
KS-_-SK

2021/07/27 22:50

画像は、「StreamingAssets」(←誤字・脱字不可)というフォルダ内にきちんと配置されていますでしょうか?
masutake0

2021/07/28 01:22

StreamingAssetsのフォルダを作成してその中にblue.pngというファイルを配置しています
guest

回答1

0

自己解決

WebGL上でテクスチャの差し替えることができなかったため、テキストデータを差し替え、テキストデータに沿った描画を行うようにしました。
テキストデータから描画を行う方法に関しては別で質問を行い、回答をいただいています。

投稿2021/08/31 09:34

masutake0

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問