Load Unity WebGL in Flask
Question
I'm a total neewbie in Web and Unity. What i'm trying to do is to run my Unity WebGL build inside my Flask server.
Here is my folder hierarchy:
web\
templates\
Build\
UnityLoader.js
WebBuild.json
TemplateData\
style.css
TemplateData.js
index.html
app.py
app.py has 3 roots, to load all my js files asked by index.html :
app = Flask(__name__, static_url_path='/templates')
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
@app.route("/")
def index():
return render_template("index.html")
@app.route('/templates/Build/<path:path>')
def send_Buildjs(path):
return send_from_directory('templates/Build', path)
@app.route('/templates/TemplateData/<path:path>')
def send_Templatejs(path):
return send_from_directory('templates/TemplateData', path)
if __name__ == "__main__":
app.run(port=4555, debug=True)
index.html is the default generated file by Unity for WebGL application with some slight modifications:
<!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 | VisualNN</title>
<link rel="shortcut icon" href="{{ url_for('static', filename='TemplateData/favicon.ico') }}">
<link rel="stylesheet" href="{{ url_for('static', filename='TemplateData/style.css') }}">
<script src="{{ url_for('static', filename='TemplateData/UnityProgress.js') }}"></script>
<script src="{{ url_for('static', filename='Build/UnityLoader.js') }}"></script>
<script>
var gameInstance = UnityLoader.instantiate("gameContainer", "{{ url_for('static', filename='Build/WebBuild.json') }}", {onProgress: UnityProgress});
</script>
</head>
<body>
<div class="webgl-content">
<div id="unityContainer" style="width: 960px; height: 600px"></div>
<div class="footer">
<div class="webgl-logo"></div>
<div class="fullscreen" onclick="unityInstance.SetFullscreen(1)"></div>
<div class="title">VisualNN</div>
</div>
</div>
</body>
</html>
In my Firefox browser icon is loaded, all js files are loaded too. I get 202 and 304 response messages for icons and js files. But the unity game is not loading, no box just empty. Nothing is showing in the Firefox console. I'm guessing that Build/WebBuild.json is not loading? As anyone has an idea what is the problem?
EDIT
Some extra info while I load the page from the Flask Server console:
127.0.0.1 - - [10/May/2019 18:34:55] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/TemplateData/style.css HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/TemplateData/UnityProgress.js HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/Build/UnityLoader.js HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/TemplateData/webgl-logo.png HTTP/1.1" 304 -
127.0.0.1 - - [10/May/2019 18:34:55] "GET /templates/TemplateData/fullscreen.png HTTP/1.1" 304 -
1 answers
solution1
0 ACCPTED 2019-06-26 08:42:10
I'll share my answer found on Reddit:
https://www.reddit.com/r/flask/comments/ab7i9d/how_to_make_the_unity_webgl_build_work_with_flask/
solution2
0 2020-02-23 04:21:31
Here is a most simple solution, you just have to change your static folder and template folder paths on your app.py, here is an example:
`app = Flask(__name__, static_folder="./", template_folder="./")
@app.route('/')
def home():
return render_template("index.html"), 200
if __name__ == "__main__":
port = int(os.environ.get("PORT", 5000))
app.run(debug=True, host='0.0.0.0', port = port)`
With this you don't need to change anything on your index.html everytime you do a release. PD: You can hardcode any path you want, not just static folder, in my case it is my root project
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.