WebGL Website Simulator

A Unity WebGL app that simulates a webpage

Visit my old WebGL Portfolio

Old Porfolio made in Unity WebGL

The core idea was to make a portfolio that stand out from the usual static site drawing inspirations from all those fancy ThreeJS 3D interactive portfolios like Bruno Simon's or Robbi Leonardi's. I wanted to make something like a Game menu as main navigation interface and I though to myself that Unity's WebGL builds are not all that different from those webapps. So since I was already familiar with the engine I just started working on the main features to simulate web pages interactions inside an Unity application.

Full screen template

I created a new WebGL Template that would position my game in a Canvas object that will expand over the whole screen to simulate a FullScreen window.

The build is then hosted hosted on Github Pages and is inspired by it's default static site system to add content in the form of Markdown files.

The template is available in my Github repository

Markdown Parsing

I used the library FancyTextRendering to parse my MD files and store them into text boxes that support Rich Text rendering to speed up the addition of new content in my pages.

Streaming Assets

In order to limit the initial loading time of the project, I moved some of the heaviest files into Unity's Streaming Assets folder, and fetch the file on runtime when needed through HTML requests.

CI/CL

In order to avoid rebuilding the project and deplyong each time a change is made, I set up a quick Github Action that would listen to the commits in the repository using Game CI.

Each time a new push is detected, the action would trigger to make a new WebGL build and deploy it on the gh-pages branch, that is set up as source for the deoplyed website.

Limitations and Future plans

Since the view is effectively just an Unity game window, all the resemblances to a regular website are just simulated in the engine and many of those expected behaviours are still not implemented yet. Some examples are:

  • Text size adapting according to the view setting
  • Not being able to select and copy text
  • Not being able to zoom in and out by pinching and dragging on mobile
  • The back button would make the user leave the game view
  • Scrolling with middle mouse button doesn't work