【unity发布webgl】遇到的问题和解决办法

article/2025/6/30 16:06:43

1.发布部署出来的链接放到手机上测试。
ios：20秒读条然后闪退；vivo:9秒读条闪退；小米：15秒进入
然鹅，资料只有130kb的图片。

2.报这个警告，修改Build文件夹里的UnityLoader.js取消
移动端展示弹出提示框，点击OK后继续打开webgl
please note the unity webgl is not currently supported on mobiles.press ok if you wish to continue anyway.
请注意，手机目前不支持unity webgl。如果仍要继续，请按ok。
修改UnityLoader.js：

compatibilityCheck:function(e,t,r){UnityLoader.SystemInfo.hasWebGL?UnityLoader.SystemInfo.mobile?t():["Firefox","Chrome","Safari"].indexOf(UnityLoader.SystemInfo.browser)==-1?t():t():e.popup("Your browser does not support WebGL",[{text:"OK",callback:r}])},Blobs:{},loa...(省略)

请添加图片描述
3.自适应屏幕修改和手机端强制横屏index.html
因为浏览器的分辨率不一样，所以我上面的button都不在原位置，而且分辨率小的浏览器显示的画布都不全，就得做自适应。
还有PC端是横版的，要是手机端是竖版的就得做两套UI，判断webgl是运行在PC端还是手机端，然后jslib本地插件从浏览器获取屏幕分辨率数据再把数据传回unity再通过screen.Resolution()函数设置画布的大小有点麻烦，我们直接就手机端强制横屏了。（测试最新判断unitywebgl运行在PC还是手机端的方法报了五个错打出来的空包，老办法PC是cube 手机端是sphere还是可以的）

<!DOCTYPE html>
<html lang="en-us"><head><meta charset="utf-8"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Unity WebGL Player | TestConnection</title><link rel="shortcut icon" href="TemplateData/favicon.ico"><link rel="stylesheet" href="TemplateData/style.css"><script src="TemplateData/UnityProgress.js"></script><script src="Build/UnityLoader.js"></script><script>var gameInstance = UnityLoader.instantiate("gameContainer", "Build/num3.json", {onProgress: UnityProgress});function ChangeCanvas(){document.getElementById("gameContainer").style.width = window.innerWidth + "px";document.getElementById("gameContainer").style.height = window.innerHeight + "px";document.getElementById("#canvas").style.width = window.innerWidth + "px";document.getElementById("#canvas").style.height = window.innerHeight + "px";}</script></head><body onResize="ChangeCanvas()"><div class="webgl-content"><div id="gameContainer" style="width: 100%; height: 100%"></div></div><style type="text/css">@media screen and (orientation: portrait) { /*竖屏*/.webgl-content {position:absolute; width: 100vh; height: 100vw; top: 0; left: 100vw; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); transform-origin: 0% 0%; } }@media screen and (orientation: landscape) {html{width : 100vw;height : 100vh;}body{width : 100vw;height : 100vh;}.webgl-content{width : 100vw;height : 100vh;}}</style></body>
</html>

.webgl-content * {border: 0; margin: 0; padding: 0}/*添加 width: 100%; height: 100%;*/
.webgl-content {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('progressLogo.Light.png') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}.webgl-content .logo.Dark {background-image: url('progressLogo.Dark.png');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}/*如果你要保存 footer模块, 然后又要让footer显示在最顶部,这样处理*/
.webgl-content .footer {margin-top: -45px; margin-left: 5px; margin-right: 5px; z-index: 1; position: relative; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;} 
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;} 
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

4.logo替换成gif进度加载的样式、背景图替换

.webgl-content * {border: 0; margin: 0; padding: 0}
.webgl-content {position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}.webgl-content .logo, .progress {position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);}
.webgl-content .logo {background: url('person.gif') no-repeat center / contain; width: 154px; height: 130px;}
.webgl-content .progress {height: 18px; width: 141px; margin-top: 90px;}
.webgl-content .progress .empty {background: url('progressEmpty.Light.png') no-repeat right / cover; float: right; width: 100%; height: 100%; display: inline-block;}
.webgl-content .progress .full {background: url('progressFull.Light.png') no-repeat left / cover; float: left; width: 0%; height: 100%; display: inline-block;}.webgl-content .logo.Dark {background-image: url('person.gif');}
.webgl-content .progress.Dark .empty {background-image: url('progressEmpty.Dark.png');}
.webgl-content .progress.Dark .full {background-image: url('progressFull.Dark.png');}.webgl-content .footer {margin-top: 5px; height: 38px; line-height: 38px; font-family: Helvetica, Verdana, Arial, sans-serif; font-size: 18px;}
.webgl-content .footer .webgl-logo, .title, .fullscreen {height: 100%; display: inline-block; background: transparent center no-repeat;}
.webgl-content .footer .webgl-logo {background-image: url('webgl-logo.png'); width: 204px; float: left;}
.webgl-content .footer .title {margin-right: 10px; float: right;}
.webgl-content .footer .fullscreen {background-image: url('fullscreen.png'); width: 38px; float: right;}

在这里插入图片描述
背景图在webgl.json里改，再替换unityloader.js

{
"companyName": "DefaultCompany",
"productName": "HidedenObject",
"productVersion": "1.0",
"dataUrl": "webgl.data.unityweb",
"wasmCodeUrl": "webgl.wasm.code.unityweb",
"wasmFrameworkUrl": "webgl.wasm.framework.unityweb",
"graphicsAPI": ["WebGL 2.0","WebGL 1.0"],
"webglContextAttributes": {"preserveDrawingBuffer": false},
"splashScreenStyle": "Dark",
"backgroundUrl":"bg.jpg",
//"backgroundColor": "#231F20",
"cacheControl": {"default": "must-revalidate"},
"developmentBuild": false,
"multithreading": false,
"unityVersion": "2019.4.35f1c1"
}

在这里插入图片描述


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

相关文章

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

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

目录 Unity中打包时注意事项切换平台为WebGL平台设置Player Setting分辨率预设其它设置发布设置确保项目路径没有中文 选择Assets同级目录打包 打包后将项目部署到IIS上发布安装IIS并添加网站为服务器添加 MIME Type 映射和跨域访问权限添加MIME Type映射添加跨域访问权限 尝试…
阅读更多...
发布WebGL遇到的问题

发布WebGL遇到的问题

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

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

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

个性化推荐系统 - 01简述

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

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

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

推荐系统基础（2）：个性化推荐系统简述

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

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）——推荐算法介绍

个性化推荐系统设计（2.1）——推荐算法介绍

协同过滤算法 协同过滤(Collaborative filtering, CF)算法是目前个性化推荐系统比较流行的算法之一。 协同算法分为两个基本算法&#xff1a;基于用户的协同过滤&#xff08;UserCF&#xff09;和基于项目的协同过滤&#xff08;ItemCF&#xff09;。 基于属性的推荐算法 基于…
阅读更多...
[推荐系统]基于个性化推荐系统研究与实现（1）

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

目 录 一、搜索引擎与推荐系统 二、推荐系统原理与算法 2.1 Jaccard系数 2.2 余弦相似度 三、数据定向爬取及电影数据集 3.1 爬取近七日天气预报数据存入DB数据库&#xff0c;分为五步完成。 3.2 爬取豆瓣电影数据集存入CSV文件&#xff0c;分四步。 3.3 电影&#xf…
阅读更多...
如何支持研发对CSDN个性化推荐系统重构

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

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

智能个性化推荐系统设计

推荐系统构成 * 召回层 - 对海量的数据进行召回 * 排序层 - 对召回后的数据进行排序&#xff0c;排序结果返回给用户 推荐系统架构 基于物品的推荐系统架构 基于用户的推荐系统架构
阅读更多...
个性化推荐系统设计（4.1）——案例分析

个性化推荐系统设计（4.1）——案例分析

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

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

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

下一代个性化推荐系统

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

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

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

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、系统结构设…
阅读更多...
推荐文章

Copyright @ 2022~2023