【Unity】打包WebGL项目遇到的问题及解决记录

article/2025/7/1 7:25:12

目录

  • Unity中打包时注意事项
    • 切换平台为WebGL平台
    • 设置Player Setting
      • 分辨率预设
      • 其它设置
      • 发布设置
      • 确保项目路径没有中文
    • 选择Assets同级目录打包
  • 打包后将项目部署到IIS上发布
    • 安装IIS并添加网站
    • 为服务器添加 MIME Type 映射和跨域访问权限
      • 添加MIME Type映射
      • 添加跨域访问权限
  • 尝试访问html网站
    • 访问遇到的问题
      • Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico
      • Range Out Of Bounds
      • 不显示中文字体
      • 浏览器不支持WebGL
      • 浏览器提示不支持WebGL2.0

Unity中打包时注意事项

切换平台为WebGL平台

在这里插入图片描述
保证在平台切换后项目能在Unity中运行。

设置Player Setting

分辨率预设

在这里插入图片描述

其它设置

在这里插入图片描述
在这里插入图片描述
取消勾选Strip Engine Code,这个选项标识官⽅⽂档是这样描述它的"如果被选中,unity会默认剥离在项⽬中不会使⽤的组件",也就是说,假如你的项⽬中没有⾳频功能,unity会在封装的时候去掉这部分代码以减少⼤⼩。最好取消勾选。

发布设置

在这里插入图片描述
将压缩禁用,这样打包出来的文件数据后缀为.data。

ps:将压缩禁用后,会导致打包出的包比较大;可选择使用Brotli或Gzip的方式进行压缩,需要注意,如果使用这两种压缩方式,则需要勾选Decompression Fallback选项,这样才能让页面自动解压缩,否则会出现IIS不能识别br或gz文件的情况。
在这里插入图片描述
另外,使用Brotli压缩后打包出来的文件大小会优于使用Gzip打包出来的文件大小,但是代价是更长的打包等待时间。

确保项目路径没有中文

硬盘盘符最好也是英文,接着就能点击Build打包了。

选择Assets同级目录打包

点击Build打包后,会提示选择打包后的包存放路径。
在项目的Assets同级目录下新建一个Pak文件夹,用于存放打包好后的包。
在这里插入图片描述

打包后将项目部署到IIS上发布

安装IIS并添加网站

在本机上安装IIS(Internet Information Services),打开后右键本机添加网站,并添加刚刚打包出的包存放位置。
在这里插入图片描述
在这里插入图片描述

为服务器添加 MIME Type 映射和跨域访问权限

添加MIME Type映射

由于打包出来有后缀为.data的文件,服务器不能解析其为什么类型的。因此,需要在IIS中添加MIME类型。
在这里插入图片描述
双击后右上角找添加。
在这里插入图片描述
为.data文件添加MIME类型为multipart/form-data。
在这里插入图片描述
这时,IIS会自动编写一个web.config文件。

<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><staticContent><mimeMap fileExtension=".data" mimeType="multipart/form-data" /></staticContent></system.webServer>
</configuration>

ps:上述是不压缩的MIME类型设置,若是使用Brotli或Gzip压缩方式打包,则需要为.unityweb以及.unity3d文件添加MIME类型分别为application/binary以及application/octet-stream。
此时的web.config文件如下:

<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><staticContent><mimeMap fileExtension=".unity3d" mimeType="application/octet-stream" /><mimeMap fileExtension=".unityweb" mimeType="application/binary" /></staticContent></system.webServer>
</configuration>

添加跨域访问权限

什么是跨域?
只有当协议、端口、和域名都相同的页面,则两个页面具有相同的源。只要网站的协议名protocol、 主机host、 端口号port这三个中的任意一个不同,网站间的数据请求与传输便构成了跨域调用,会受到同源策略的限制。
解决办法:
添加跨域访问权限。
找到HTTP响应标头后双击。
在这里插入图片描述
同样的,右上角点击添加,加入如下内容。

//名称                           值
Access-Control-Allow-Origin      *
Access-Control-Allow-Methods     GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers     Content-Type

在这里插入图片描述
同样是IIS自动在web.config文件中添加相应设置。

<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><staticContent><mimeMap fileExtension=".data" mimeType="multipart/form-data" /></staticContent><httpProtocol><customHeaders><add name="Access-Control-Allow-Origin" value="*" /><add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /><add name="Access-Control-Allow-Headers" value="Content-Type" /></customHeaders></httpProtocol></system.webServer>
</configuration>

尝试访问html网站

选中刚才添加的Pak文件夹,右侧找浏览 *:80(http)选项,即可访问html网站了。
在这里插入图片描述

访问遇到的问题

在访问的过程中不是那么的顺利,遇到了一些问题,按F12键检查Console的输出以查看是什么问题导致的加载问题。

Failed to load resource: the server responded with a status of 404 (Not Found) favicon.ico

浏览器找不到favicon.ico文件,需要手动在根目录下新建一个。
在这里插入图片描述

Range Out Of Bounds

Unity中资源太大,导致内存溢出。
由于2020版本的Unity在Player Settings中找不到设置Memory Size的地方。
因此在Assets文件夹下新建一Editor文件夹,新建一SetMemorySize脚本用于在菜单栏中手动设置MemorySize和获取当前MemorySize:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;public class SetMemorySize : UnityEditor.Editor
{[UnityEditor.MenuItem("WebGLPak/Set Size")]public static void SetSize(){UnityEditor.PlayerSettings.WebGL.memorySize = 2 * 1024 * 1024 * 1000;}[UnityEditor.MenuItem("WebGLPak/Get Size")]public static void GetSize(){Debug.LogError(UnityEditor.PlayerSettings.WebGL.memorySize);}
}

在这里插入图片描述

不显示中文字体

在这里插入图片描述
由于unity默认使用的是Arial,导致打包成webgl时中文不显示。
需要在电脑C盘下,路径为C:\Windows\Fonts导入一个格式为.ttf的中文字体,将Arial字体替换成导入的中文字体即可。

浏览器不支持WebGL

需在浏览器快捷方式的属性中的目标处后加空格并添加启动项:

-enable-webgl --ignore-gpu-blacklist --allow-file-access-from-files

在这里插入图片描述

浏览器提示不支持WebGL2.0

首先,可以访问该网站以确认该浏览器是否支持WebGL2.0:
在这里插入图片描述
若是提示支持WebGL 2,是由于某个设置没有设置的问题,可以尝试使用以下方式设置:
在浏览器的地址栏输入:

about:flags

浏览器会自动跳转到实验性开发功能。
在这里插入图片描述

接着,在上方搜索栏输入ANGLE后进行检索,找到如下选项后,将后面的Default选项修改为D3D11on12:
在这里插入图片描述


http://chatgpt.dhexx.cn/article/m1Tn4HNK.shtml

相关文章

发布WebGL遇到的问题

本文地址&#xff1a;https://blog.csdn.net/t163361/article/details/129734803 最近准备申请新星创作者&#xff0c;需要2000个粉丝关注&#xff0c;觉得文章有用的&#xff0c;请点一下左侧边栏的关注&#xff0c;谢谢。 以下为发布WebGL时遇到的问题以及解决方案。相同的问…

关于Webgl实际中遇到的一些坑,与大家分享。

我们在webgl的开发中&#xff0c;可能会遇到这样或者那样的问题&#xff0c;在这里与大家分享。 首先&#xff0c;我们要懂得如何找到问题。 打开Firefox火狐浏览器的web控制台。 这样我们更可以知道哪一个环节出了问题&#xff0c;就可以对症下药&#xff0c;解决问题。节省…

个性化推荐系统 - 01简述

前言 在互联网发展的早期,内容比较匮乏,不论在资讯,电商,还是广告行业。那个阶段诞生了搜索引擎。解决了信息查找的问题。随着互联网迅速发展起来,互联网上面的内容几何式增长。用户获取信息的途径不再困难。怎么样在海量的信息中找到用户感兴趣的内容,就是我们现在要解决的问…

4个方面,系统总结个性化推荐系统

作者&#xff1a;Placeless 全文共 7393 字 13 图&#xff0c;阅读需要 16 分钟 ———— / BEGIN / ———— 现在的人们面对信息过载问题日益严重&#xff0c;好的个性化推荐将能够很好的提升用户体验&#xff0c;提高用户使用产品完成任务的效率&#xff0c;更好的留住用户&…

推荐系统基础(2):个性化推荐系统简述

1.推荐系统含义、目标 推荐系统根据用户的历史、社交、上下文环境等信息去判断用户当前感兴趣的内容。 推荐系统的业务&#xff1a; 物料组装&#xff1a;生产广告&#xff0c;实现文案、图片等内容的个性化物料召回&#xff1a;在大量内容中召回一个子集作为推荐的内容物料…

CSDN个性化推荐系统-负反馈测试

文章目录 前言一、uc不感兴趣标签过滤测试1.uc不感兴趣标签获取(uc_unlike_tag_list)1.1个人中心界面1.2从标签中可以发现什么&#xff1f;1.3与研发确认点1.4设计开发1.5接口获取结果 2.推荐流文章标签获取(tag_list)2.1部分代码2.2基本标签校验2.3基本标签校验结果 3.推荐流u…

个性化推荐系统设计(2.1)——推荐算法介绍

协同过滤算法 协同过滤(Collaborative filtering, CF)算法是目前个性化推荐系统比较流行的算法之一。 协同算法分为两个基本算法&#xff1a;基于用户的协同过滤&#xff08;UserCF&#xff09;和基于项目的协同过滤&#xff08;ItemCF&#xff09;。 基于属性的推荐算法 基于…

[推荐系统]基于个性化推荐系统研究与实现(1)

目 录 一、搜索引擎与推荐系统 二、推荐系统原理与算法 2.1 Jaccard系数 2.2 余弦相似度 三、数据定向爬取及电影数据集 3.1 爬取近七日天气预报数据存入DB数据库&#xff0c;分为五步完成。 3.2 爬取豆瓣电影数据集存入CSV文件&#xff0c;分四步。 3.3 电影&#xf…

如何支持研发对CSDN个性化推荐系统重构

目录 大地图工具构建数据治理保持发布重视测试小结引用 一个以内容服务为主的软件&#xff0c;它的推荐系统在数据侧对软件产生着举足轻重的作用。数据的三个方面决定了这个内容软件的档次。 数据的质量好坏数据和用户需求的相关性好坏数据的层次体系好坏 通常&#xff0c;我…

智能个性化推荐系统设计

推荐系统构成 * 召回层 - 对海量的数据进行召回 * 排序层 - 对召回后的数据进行排序&#xff0c;排序结果返回给用户 推荐系统架构 基于物品的推荐系统架构 基于用户的推荐系统架构

个性化推荐系统设计(4.1)——案例分析

在过去的十年中&#xff0c;神经网络已经取得了巨大的飞跃。如今&#xff0c;神经网络已经得以广泛应用&#xff0c;并逐渐取代传统的机器学习方法。 接下来&#xff0c;我要介绍一下YouTube如何使用深度学习方法来做个性化推荐。 由于体量庞大、动态库和各种观察不到的外部因素…

141.如何个性化推荐系统设计-1

141.1 什么是个性化推荐系统&#xff1f; 个性化推荐系统就是根据用户的历史&#xff0c;社交关系&#xff0c;兴趣点&#xff0c;上下文环境等信息去判断用户当前需要或潜在感兴趣的内容的一类应用。大数据时代&#xff0c;我们的生活的方方面面都出现了信息过载的问题&#…

下一代个性化推荐系统

本文结合技术及社会需求发展的大背景&#xff0c;讲述了当前推荐系统的价值及所面临的挑战&#xff0c;并指出了下一代个性化推荐系统的设计思路及需要注意的问题。 作为个性化推荐系统核心的协同过滤&#xff08;Collabora-tive Filtering&#xff09;算法&#xff0c;是Goldb…

基于大数据的个性化推荐系统

随着互联网时代的发展和大数据时代的到来,人们逐渐从信息匮乏的时代走入了信息过载的时代。为了让用户从海量信息中高效地获取自己所需的信息,推荐系统应运而生。 推荐系统的主要任务就是联系用户和信息,它一方面帮助用户发现对自己有价值的信息,另一方面让信息能够展现在…

CSDN 个性化推荐系统的设计和演进

个性化推荐项目 个性化推荐的设计和演进项目概览项目梳理依赖管理实现代码的重构和改进持续演化 个性化推荐的设计和演进 CSDN 的个性化推荐系统&#xff0c;是从既有的推荐项目中剥离出来的一个子项目&#xff0c;这个项目随后移交到了我们AI组。在近一年的时间内&#xff0c…

【个性化推荐系统】简介

个性化推荐系统-简介 1. 推荐系统简介2. 推荐系统产生背景3. 推荐系统的作用4. 推荐系统和Web项目的区别 1. 推荐系统简介 ​ 个性化推荐 (推荐系统) 经历了多年的发展&#xff0c;已经成为互联网产品的标配&#xff0c;也是AI成功落地的分支之一&#xff0c;在电商(淘宝/京东…

个性化推荐系统研究综述

从最初接触个性化推荐系统已过去六天。今天是第七天&#xff0c;完全可以对前六日的学习做出复盘。推荐系统并没有如同网络上那般盛传的玄秘深晦&#xff0c;而是直白到令人一眼看穿。 本文从六个层面总结个性化推荐系统&#xff1a; 在用户建模上&#xff0c;详细总结了用户…

个性化推荐系统实践应用

个性化推荐已经成为现代人们生活的一部分&#xff0c; “猜你喜欢”、“相关阅读”你一定并不陌生。计算机如何做到对用户投其所好&#xff1f;企业在做个性化推荐时要如何精准把握用户兴趣&#xff1f;如何解决冷启动问题&#xff1f;如何避免推荐结果的单调与重复&#xff1f…

新闻个性化推荐系统

新闻个性化推荐系统 一、绪论及背景1.1、绪论1.2、背景1.3、发展历史 二、需求分析2.1、功能需求2.1.1、用户功能需求2.1.2、运营功能需求2.1.3、算法功能需求 2.2、非功能需求2.2.1、性能需求2.2.2、准确性需求2.2.3、稳定性需求2.2.4、可靠性需求 三、详细设计3.1、系统结构设…

【推荐系统】什么是好的推荐系统?个性化和非个性化推荐

最近在写一些关于推荐系统的介绍&#xff0c;找了不少案例及资料&#xff0c;总觉得不够具体及深入&#xff0c;没有一些可作为基础及科普类&#xff0c;于是萌生自己来写一篇试试。 定义&#xff1a;推荐系统是信息过滤系统的子类&#xff0c;旨在预测用户对产品或服务的“评…