Home > Blockchain >  How to upload WebGL Build to my own website
How to upload WebGL Build to my own website

Time:11-03

I have tried to get information on this for hours, but cannot find any. How should upload the WebGL build of my unity game to my personal Node js based Web Application. I'd just upload it in itch.io but I want it to interact with the Database controlled by the node js. Any resources that might be helpful will be appreciated.

CodePudding user response:

Result of your WebGL build in Unity is a bunch of static file (html, js, css). What you need is a web server where you put your static files and then your game will be accessible using an address of your server (IP or domain name). WebGL games are just websites. To add DB integration you just need an additional server where the DB will be running and then you can make queries to your DB using the address of the server and credentials to your database. So you can open a connection and make some queries to your DB. Or you can also use some ORMs to access your DBs.

I would recommend you to research more on the following topics:

  1. WebGL and how it works not only in terms of Unity.
  2. How to deploy your website to a server. It will help you understand how to operate your WebGL builds and how to make it accessible using different environments like DigitalOcean or AWS or you can even run the server on your local machine and make it accessible for others (but it is not secure).
  3. How to work with database programmatically. How to configure your user, make some queries etc.
  4. Architecture of web applications and web based games. It will help understand how to split the logic of your game correctly. I would recommend to use a separate service which will work with your DB and expose access to DB only for that server. And configure communication between your game and this service. It is the correct way. Don't send request to DB directly from your game.
  5. You can also research on how popular solutions for servers work for example NGINX. It is a simple web server which will help understand principles of work of most web servers.

Your question is very generic but I would recommend to take a look on Game Engine Architecture by Jason Gregory. This book covers all the topics you need and you will be able to quickly apply your knowledge in terms of Unity.

CodePudding user response:

The 3D applications running in browsers are an unstoppable trend, and demand in this direction is also increasing. A web version of the lab was released a while ago. I have no problems publishing to iis on my machine, but I can't test it on the server. . After all, there is no way. Customers on external networks can only have iT do port mapping on my computer.

I recently discovered that this kind of little program doesn't have a very powerful background system. A simple nodejs server can meet all my needs. The server says it's a bit high, but it's actually a script, but with practice, I found out why the test didn't work well on other iis servers --- (assetbundle package has no suffix and corresponds to ".*". There is no way, it can be treated directly as a folder)

Let's implement one below.

1. Install node server program https://nodejs.org/en/download/

You can go in, download it according to your platform and install it on this machine. When the installation is complete, you can directly run the js code you wrote using the command line.

2. Create a static file node server

var http = require("http");
var fs = require("fs");
var url = require("url");
var path = require("path");

var server = http.createServer(function(req,res){    
    var pathname = url.parse(req.url).pathname;
    if(pathname == "/"){
        pathname = "index.html";
    }
    var fileURL = "./"   path.normalize("./static/"   pathname);
    var extname = path.extname(pathname);
    fs.readFile(fileURL,function(err,data){
        if(err){            
            res.writeHead(404,{"Content-Type":"text/html;charset=UTF8"})
            res.end("404,Request file does not exist:"   fileURL);
        }      
        getMime(extname,function(mime){
            res.writeHead(200,{"Content-Type":mime})
            res.end(data);
 console.log("extname:"   extname);
        });
    });
});

server.listen(80,"10.0.0.51");

function getMime(extname,callback){
    fs.readFile("./mime.json",function(err,data){
        if(err){
            throw Error("./mime.json:"   extname);
            return;
        }        
        var mimeJSON = JSON.parse(data);
        var mime =  mimeJSON[extname]  || "text/plain";
        callback(mime);
    });
}

3. After unity3d publishes webgl in mime.json folder, add the required types.

".memgz":"application/octetstream", ".datagz":"application/octet stream", ".unity3dgz":"application/octetstream", ".jsgz":"application/x-javascript ; charset=UTF-8", ".*":"application/octet stream"

4. Run the test

If there is no server, test on this machine and change the ip to 127.0.0.1. Put all your packaged webgl files in a static folder. Now everything is ready. In cmd mode, cd into the directory with your server script js, then write node , ( stands for the script name, no js) and press Enter.

If the cursor blinks without errors, it means that the server started successfully.

To access the application, you can use the network program by writing the IP and port in a browser that supports advanced webgl features such as firefox or chrome.

  • Related