常連

unityでWebGLでビルドするとエラーが発生してしまいます。調べて解決しようとしたのですが解決できなかったため質問しました。エラー文は下記のとおりです。
Exception: Failed running C:\Program Files\Unity\Hub\Editor\2020.3.2f1\Editor\Data\il2cpp/build/BeeSettings/offline/bee.exe --useprebuiltbuildprogram --no-colors

Build completed with a result of 'Failed' in 18 seconds (18384 ms)
UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

UnityEditor.BuildPlayerWindow+BuildMethodException: 2 errors
  at UnityEditor.BuildPlayerWindow+DefaultBuildMethods.BuildPlayer (UnityEditor.BuildPlayerOptions options) [0x002ca] in <d6a6a4b561b9431dbfe2c61f7bf0d405>:0 
  at UnityEditor.BuildPlayerWindow.CallBuildMethods (System.Boolean askForBuildLocation, UnityEditor.BuildOptions defaultBuildOptions) [0x00080] in <d6a6a4b561b9431dbfe2c61f7bf0d405>:0 
UnityEngine.GUIUtility:ProcessEvent (int,intptr,bool&)

Exception: Failed running C:\Program Files\Unity\Hub\Editor\2020.3.2f1\Editor\Data\il2cpp/build/BeeSettings/offline/bee.exe --useprebuiltbuildprogram --no-colors

stdout:
[             ] Require frontend run.  tundra.dag no longer valid. FileSignature timestamp changed: il2cpp_settings.json
[        0s] Executed build program. Created build graph with 3 nodes.
[           0s] Freezing tundra.dag.json into .dag (.dag file didn't exist)
*** Bee build failed (0.04 seconds), 0 items updated, 3 evaluated
stderr:

UnityEditorInternal.Runner.RunProgram (UnityEditor.Utils.Program p, System.String exe, System.String args, System.String workingDirectory, UnityEditor.Scripting.Compilers.CompilerOutputParserBase parser) (at <d6a6a4b561b9431dbfe2c61f7bf0d405>:0)
UnityEditorInternal.Runner.RunManagedProgram (System.String exe, System.String args, System.String workingDirectory, UnityEditor.Scripting.Compilers.CompilerOutputParserBase parser, System.Action`1[T] setupStartInfo) (at <d6a6a4b561b9431dbfe2c61f7bf0d405>:0)
UnityEditorInternal.IL2CPPBuilder.RunIl2CppWithArguments (System.Collections.Generic.List`1[T] arguments, System.Action`1[T] setupStartInfo, System.String generatedCppOutputDirectory) (at <d6a6a4b561b9431dbfe2c61f7bf0d405>:0)
UnityEditorInternal.IL2CPPBuilder.ConvertPlayerDlltoCpp (UnityEditor.Il2Cpp.Il2CppBuildPipelineData data, System.String outputDirectory, System.Boolean platformSupportsManagedDebugging) (at <d6a6a4b561b9431dbfe2c61f7bf0d405>:0)
UnityEditorInternal.IL2CPPBuilder.Run () (at <d6a6a4b561b9431dbfe2c61f7bf0d405>:0)
UnityEditorInternal.IL2CPPUtils.RunIl2Cpp (System.String stagingAreaData, UnityEditorInternal.IIl2CppPlatformProvider platformProvider, System.Action`1[T] modifyOutputBeforeCompile, UnityEditor.RuntimeClassRegistry runtimeClassRegistry) (at <d6a6a4b561b9431dbfe2c61f7bf0d405>:0)
UnityEditor.WebGL.WebGlBuildPostprocessor.CompileBuild (UnityEditor.Modules.BuildPostProcessArgs args) (at /Users/bokken/buildslave/unity/build/PlatformDependent/WebGL/Extensions/Unity.WebGL.extensions/BuildPostprocessor.cs:365)
UnityEditor.WebGL.WebGlBuildPostprocessor.PostProcess (UnityEditor.Modules.BuildPostProcessArgs args) (at /Users/bokken/buildslave/unity/build/PlatformDependent/WebGL/Extensions/Unity.WebGL.extensions/BuildPostprocessor.cs:910)
UnityEditor.Modules.DefaultBuildPostprocessor.PostProcess (UnityEditor.Modules.BuildPostProcessArgs args, UnityEditor.BuildProperties& outProperties) (at <d6a6a4b561b9431dbfe2c61f7bf0d405>:0)
UnityEditor.PostprocessBuildPlayer.Postprocess (UnityEditor.BuildTargetGroup targetGroup, UnityEditor.BuildTarget target, System.String installPath, System.String companyName, System.String productName, System.Int32 width, System.Int32 height, UnityEditor.BuildOptions options, UnityEditor.RuntimeClassRegistry usedClassRegistry, UnityEditor.Build.Reporting.BuildReport report) (at <d6a6a4b561b9431dbfe2c61f7bf0d405>:0)
UnityEngine.GUIUtility:ProcessEvent(Int32, IntPtr, Boolean&)

UnityのWebGLでビルドできない

お世話になります。

### 実現したいこと

WebGLで外部のPHPへリクエストしたいです。
しかし、エラーが発生してしまいました。

### 発生している問題・エラーメッセージ

```
localhost/:1
Access to fetch at 'http://xxxx.xxx.xxx.xxx:80/xxx.php?hoge=piyo' from origin 'http://localhost:54658' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
```

### 該当のソースコード

```C#
private IEnumerator TestMethod()
{
    string url = "http://xxxx.xxx.xxx.xxx:80/xxx.php?hoge=piyo";
    WWW fuga = new WWW(url);
 
    yield return fuga;
    HelloString(fuga.text); // Javascript window.alert()
}
```

### 試したこと

マニュアルを見ましてヘッダー情報を足せばよさそうなことは分かりました。
しかし、ヘッダー情報の足し方が分かりません。
https://docs.unity3d.com/ja/current/Manual/webgl-networking.html
どの様なコードでヘッダーを足せますでしょうか。
有識者がおりましたらご教授をお願いします。


WebGLで外部サーバのPHPへリクエストしたい

### 実現したいこと
webglを描画するcanvasを背景にして、その上にpタグやdivタグで作った図形を設置したい。

### 前提
canvasにレンダリング？しているようなのでそのcanvasを、別に用意するテキストなどの下になるように重ねようと試みています。

### 発生している問題・エラーメッセージ

### 該当のソースコード

```html
<!DOCTYPE html>
<html lang="en">

<head>
    
    <script src="https://unpkg.com/three@0.147.0/build/three.min.js"></script>
    <script src="https://unpkg.com/three@0.147.0/examples/js/controls/OrbitControls.js"></script>
    <script>
        // ページの読み込みを待つ
        window.addEventListener('DOMContentLoaded', init);

        function init() {
            // サイズを指定
            const width = window.innerWidth;
            const height = window.innerHeight;

            // レンダラーを作成
            const canvasElement = document.querySelector('#myCanvas');
            const renderer = new THREE.WebGLRenderer({
                canvas: canvasElement,
            });
            // サイズを修正
            canvasElement.width = width;
            canvasElement.height = height;
            renderer.setSize(width, height);

            // シーンを作成
            const scene = new THREE.Scene();

            // カメラを作成
            const camera = new THREE.PerspectiveCamera(45, width / height);
            // カメラの初期座標を設定
            camera.position.set(0, 0, 1000);

            // カメラコントローラーを作成
            const controls = new THREE.OrbitControls(camera, canvasElement);

            // 形状とマテリアルからメッシュを作成します
            const mesh = new THREE.Mesh(new THREE.BoxGeometry(300, 300, 300), new THREE.MeshNormalMaterial());
            scene.add(mesh);

            tick();

            // 毎フレーム時に実行されるループイベントです
            function tick() {
                // レンダリング
                renderer.render(scene, camera);
                requestAnimationFrame(tick);
            }

            // myT canvasを取得
            const board = document.querySelector("#myT");
            const ctx = board.getContext("2d");
            // サイズを修正
            board.width = width;
            board.height = height;
            // 見やすくするため大きさと色を変更
            ctx.font = "48px serif";
            ctx.fillStyle = "Red";
            // 文字を追加
            ctx.fillText("Hello world", 500, 500);
        }
    </script>
    <style>
        #wrapper {
            position: relative;
        }

        #myT {
            position: absolute;
            top: 0;
            left: 0;
        }

        #myCanvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
    <title>Document</title>
</head>

<body>
    
    <div id="wrapper">
        <canvas id="myCanvas"></canvas>
        <canvas id="myT"></canvas>
    </div>
</body>

</html>
```

### 試したこと
https://qiita.com/TR246/items/4b84deadb26f1c450722
からcanvas同士でなら重ねられることを知り、はじめ<p>Hello World</p>とcanvasを重ねようとしていたのですがfillText()を用いて文字列を別のcanvasに移してみました。それらcanvasの大きさは同じになるように揃えたところ、重なる部分でオブジェクトの操作ができなくなりました。
そこでオブジェクトが描写されているcanvasにtextをfillText()で追加してみたのですが今度はtextが描写されなくなりました。
上記htmlのcss部分はこの記事を参考に書きました。

### 補足情報（FW/ツールのバージョンなど）
上記コードでid="myT"のcanvasをコメントアウトすると正常にオブジェクトを操作できます。(querySelector()でnullが返るため少し怒られますが動作に支障はないです)
vscodeの拡張機能であるliveserverを用いてローカルサーバーを立てて実行しています。

[HTML, canvas, webgl, three.js] webglを描画するcanvasを背景にしたい

### 実現したいこと


- [ ]  unityルームでアップロードしたゲームでjsonファイルを読み込みたい
(unityEditorでは読み込めます)

### 前提

 Application.streamingAssetsPathを使っていますが読み込めません。
jsonファイルはアセットの中にstreamingAssetsPathを作って入れています。



### 該当のソースコード

```C#
    //簡略

    string filePath;
    SaveData save;

    private void Awake()
    {
        filePath = Application.streamingAssetsPath + "/savedata/" + "savedata.json";
        save = new SaveData();

        StreamReader streamReader;
        streamReader = new StreamReader(filePath);
        string data = streamReader.ReadToEnd();
        streamReader.Close();
        save = JsonUtility.FromJson<SaveData>(data);

    }
```



### 補足情報

unity 2021.3.13f1


unityのWebGLでjsonファイルの読み込み方

### 実現したいこと
unityのwebGLでアスペクト比を16対9ではなく9対16に変更したい

### 前提
unityのwebGLでアスペクト比を16対9ではなく9対16に変更したいのですが、調べてもやり方が全く出てこずわかりません。
以下のサイトの脱出ゲームではunityを使われてる方が多いのですが、9対16くらいになっており、私もこのようにしたいです。
[アスペクト比9対16の脱出ゲーム](https://escape-game.com/)

どなたかお分かりになる方いらっしゃいましたら教えていただけると幸いです。

### 試したこと
webGLにswitch platformしてビルド前にplayer settingからresolution and presentationのcanvas widthとheightをデフォルトの横幅960高さ600から9対16のピクセルになるように変更しましたが、横幅960高さ600の画面がその幅に切り取られて表示されるだけでした。さらに拡大ボタンが右下にあってそれを押すと16対10になって切り!取られてた部分も写って元に戻ってしまいます。

[設定画面](https://ddjkaamml8q8x.cloudfront.net/questions/2023-05-18/7cfd21af-70f3-4756-93fa-a48fabeebc84.png)





unityのwebGLでアスペクト比を16対9ではなく、9対16にしたい

Unity2019.4.x系で作成したゲームをWebGLでビルドし、サイトにアップロード、プレイしようとしたのですが、タイトルからメインのシーンへ遷移するところで動かなくなり、DevelopmentBiludで確認したところ、上記のRuntime Error, memory access out of bounds　というものが発生していることがわかりました。
このエラーは何が原因で起こるもので、どういう解決策が適しているのでしょうか？
試したこと　テクスチャのMaxSizeの変更
短期間で制作したもので、あまりデータサイズが過大になるようなことはしていないとおもいます。

unity WebGL 実行時のメモリ不足エラー　Rantime Error memory access out of bounds について

### 解決したい事
エラーを正してWebGLが起動するようにしたい。

### 発生している問題
Unityバージョンを
更新前：2019.4.13f1
更新後：2021.3.5f1
に更新した後、WebGL形式でビルドし、chromeで起動したところ、以下のようなエラーにより起動できなくなりました。
（ビルド自体はエラーなく完了します、ブラウザ起動時にブラウザ側でエラーが発生して読み込みが完了しません）

```
exception thrown: ReferenceError: unityInstance is not defined,ReferenceError: 
unityInstance is not defined at _StringReturnValueFunction
```

```
Uncaught (in promise) ReferenceError: unityInstance is not defined at _StringReturnValueFunction
```
```
warning: 2 FS.syncfs operations in flight at once, probably just doing extra work
```
----
原因のスクリプトを排除してビルドしたところ問題なく起動できたため、このスクリプト（正確にはjslib内の記述）が原因だと思います。

エラー原因と思われるスクリプトはC#スクリプトからjslibスクリプトを呼び出し、OSの種類を読み取ってC#スクリプトに返す仕組みとなっています。

```cs
using UnityEngine;
using System.Runtime.InteropServices;

    public class ReadJS : MonoBehaviour
    {
        public GameObject[] PCMode_OnlyObjects;
        public GameObject[] MobileMode_OnlyObjects;

        [SerializeField]
        private bool isDebugDeviceChecke = false;
        public enum deviceMode
        {
            PC, Mobile, Else,
        }
        public static deviceMode DeviceMode;

        [DllImport("__Internal")]
        private static extern void StringReturnValueFunction();

        void Awake()
        {
            #if UNITY_EDITOR || UNITY_STANDALONE
            SetPC();
            #endif

            #if UNITY_WEBGL && !UNITY_EDITOR
            StringReturnValueFunction();
            #endif
        }
        void MobileModeActive()
        {
            foreach(var ob in PCMode_OnlyObjects)
            {
                if(ob != null)
                {
                    ob.SetActive(false);
                }
            }
            foreach(var ob in MobileMode_OnlyObjects)
            {
                if(ob != null)
                {
                    ob.SetActive(true);
                }
            }
        }

        void PCModeActive()
        {
            foreach(var ob in PCMode_OnlyObjects)
            {
                if(ob != null)
                {
                    ob.SetActive(true);
                }
            }
            foreach(var ob in MobileMode_OnlyObjects)
            {
                if(ob != null)
                {
                    ob.SetActive(false);
                }
            }
        }

        public void ChangeController()
        {
            if(DeviceMode == deviceMode.PC)
            {
                DeviceMode = deviceMode.Mobile;
                SetMobile();
            }
            else if(DeviceMode == deviceMode.Mobile)
            {
                DeviceMode = deviceMode.PC;
                SetPC();
            }
        }

        void SetPC()//CheckOS.jslib側で呼び出す
        {
            if(isDebugDeviceChecke)
                Debug.Log("This Devis is PC.");

            DeviceMode = deviceMode.PC;

            if(MobileMode_OnlyObjects != null)
                PCModeActive();
        }

        void SetMobile()//CheckOS.jslib側で呼び出す
        {
            if(isDebugDeviceChecke)
                Debug.Log("This Devis is Mobile.");

            DeviceMode = deviceMode.Mobile;

            if(MobileMode_OnlyObjects != null)
                MobileModeActive();
        }
    }

```

```js
mergeInto(LibraryManager.library, {

    StringReturnValueFunction: function () {
      var returnStr = window.navigator.userAgent.toLowerCase();

      if(String(returnStr).indexOf("windows") != -1 || String(returnStr).indexOf("windows") != -1 )
      {
        unityInstance.SendMessage('DeviceManager', 'SetPC');
      }else
      {
        unityInstance.SendMessage('DeviceManager', 'SetMobile');
      }
    },
  });
```


### 試したこと

エラーに関して調べたところ、1つ目のエラーは[こちらの記事](https://qiita.com/aguroshou0413/items/1451a6779a92acb96b78)に倣って、Player Settings -> Publish Settings -> Decompression Fallbackにチェックを入れました。
2つ目のエラーは1つ目のエラーが発生することで表示される内容だと思います。

3つ目のエラーに関しては調べたところ、ファイルダイアログシステムを使うと出るという記事を散見しましたが、
自分の方では使用していませんが、OSを読み取りに行かせている部分か、unityInstanceの書き方がバージョンアップによって出力形式が変更されたことで問題となっているのかなぁと思っています。
[参考記事](https://qiita.com/ohbashunsuke/items/ed3e533cd9b1f5d66e84)

よろしくお願いします。




【Unity,WebGL】UnityバージョンアップによりWebGL起動時にエラーを吐くようになった

three.jsでOrbitControlsをimportしたところからエラーが出てしまいます。
具体的には、2行目の
import {OrbitControls} from "./jsm/controls/OrbitControls.js";
と53行目の
controls = new OrbitControls(camera, renderer.domElement);を書くまでは球体が表示されているのですが、この2行を書くと下記のようなエラーが出ます。
Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

解決方法を教えていただけないでしょうか。
お手数をおかけしますが、よろしくお願いいたします！！

![イメージ説明](https://ddjkaamml8q8x.cloudfront.net/questions/2022-08-05/1902262c-665b-4598-b70e-63f11be2ea13.png)


index.html
```ここに言語を入力
    <script src="main.js" type="module"></script>
```

main.js
```ここに言語を入力
import * as THREE from './build/three.module.js'; //全ての要素に対してインポートするので*
import {OrbitControls} from "./jsm/controls/OrbitControls.js";

//webブラウザで表示するときには、シーン(scene),カメラ(camera),レンダラー(renderer)が必ず必要

let scene, camera, renderer, pointLight, controls;//ここで書くと、グローバル変数として宣言することになる
//シーンを追加
scene = new THREE.Scene();//Sceneの頭は大文字でかく

//カメラを追加
camera = new THREE.PerspectiveCamera(//PerspectiveCamera(視野角(映す角度),アスペクト比（画面の横と縦の比率。表示する画面サイズを決定),開始距離,終了距離)
    50,//視野角
    window.innerWidth / window.innerHeight,//アスペクト比
    0.1,//開始距離
    1000//終了距離
);
camera.position.set(0, 0, +500);//cameraをz軸のプラスの方向に動かしていく（そうしないとcameraが物体より前に出て映らない）

//レンダラー(カメラで写した要素を変換して、ブラウザに3dとして表示するもの)を追加
renderer = new THREE.WebGLRenderer({alpha: true});//alpha・・透明度を表す。デフォルトではfalse。trueにして透明度を上げると、背景画像が見える
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//レンダラーをhtmlのbodyタグに表示する
renderer.render(scene, camera);//画面にレンダラーが表示される


//ジオメトリを作成
//SphereGeometry・・・球体のジオメトリ
//three.jsの公式サイトで、documentから検索すると、引数に何を書くか分かる
let ballGeometry = new THREE.SphereGeometry(100, 64, 32);//(radius(半径),widthSegment(ポリゴンの数を増やす。値を大きくすればするほど、より球体に近づく。),heightSegment(ポリゴンの分割数を上げる。より綺麗な球体に近づく。))
//マテリアルを作成
let ballMaterial = new THREE.MeshPhysicalMaterial();//粗さ、金属性、反射率等を設定できる。引数には、{color: 色}や、{map: テクスチャ}など。テクスチャでは、地球の画像を持ってきて球体に貼り付けることができる。
//ジオメトリ（骨格）とマテリアル（色）をここまでで作成しました。それをメッシュ化していきます
//メッシュ化
let ballMesh = new THREE.Mesh(ballGeometry, ballMaterial);//引数としてジオメトリとマテリアルを宣言
scene.add(ballMesh);//sceneにポリゴンを乗せて、cameraで撮影する準備ができる

//平行光源を追加してみよう//上から光が降り注ぐ
let directionalLight = new THREE.DirectionalLight(0xffffff, 2)//引数は色(0xは、16進数を描きますという意味）と、強さをとる
directionalLight.position.set(1, 1, 1);//(1,1,1)の位置から光が降り注ぐようになる
scene.add(directionalLight);

//ポイント光源を追加してみよう//地球の周りを動かすためにグローバルで宣言したいので、5行目のとこで宣言している（なんでここはグローバルじゃない？）
pointLight = new THREE.PointLight(0xffffff, 1);//平行光源と同じく、引数は色と強さ
//今の状態だとポイント光源が地球の中に入ってしまっているので、位置を変える
pointLight.position.set(-200, -200, -200);
scene.add(pointLight);//作ったものはsceneにaddする

//ポイント光源がどこにあるのかを特定する//平行光源のヘルパーとかもあるらしい
let pointLightHelper = new THREE.PointLightHelper(pointLight, 30);//第二引数はヘルパー（菱形みたいなやつ）の大きさを表す
scene.add(pointLightHelper);

//マウス操作ができるようにしよう（グルーバル変数で変数を宣言する）
controls = new OrbitControls(camera, renderer.domElement);

//ポイント光源を球の周りを周りを巡回させる//座標を変数にして動的に変える
//リロードしないと場所が変わらないので、常にぐるぐる回らせるために、アニメート関数に入れて、アニメート関数をフレーム単位で変えていく
function animate(){
    pointLight.position.set(
    200 * Math.sin(Date.now() / 500),
    200 * Math.sin(Date.now() / 1000),
    200 * Math.cos(Date.now() / 500),
);
//レンダリングしてみよう
renderer.render(scene, camera);//これもフレームタイムでレンダリングしないと、画面がフレーム単位でレンダリングされないので、アニメート関数に組み込む

//アニメーション関数をフレーム単位で更新するためには、requestAnimationFrameという関数を使う
requestAnimationFrame(animate);//これだけではアニメート関数を呼んでいない
}
//アニメート関数を呼ぶ
//レンダリングもフレーム単位で更新しないと、画面がレンダリングされないので、アニメート関数に組み込む
animate();



```