How I Created a WebGL Virtual Gallery During the COVID-19 Lockdown

Currently the world is experiencing the COVID-19 crisis which has led to Lockdown being initiated across developed nations. This has led to people self isolating and social distancing becoming the new norm. As a result many technologists have taken to developing technologies to help people adapt or to aid people during these troubling times. This is an overview of how I decided to respond to the crisis using technology.

Art and Technology

I am an artist as well as a web and games developer and initially in noticed during the Lockdown that many galleries and artists were starting to look for workarounds for displaying their work, given that the traditional methods of putting on exhibitions in the real world was now no longer an option. So I decided to resurrect an old project I created some time ago made with the JavaScript / WebGL engine PlayCanvas – an awesome cloud based tool for creating games and interactive browser based experiences.

Image by Chris Godber 2020

Gathering Assets

My first step was to create a gallery environment and gather artists who were interested – gathering assets if you will, which I did via social media and via an art group I am a member of. I mention this as it stresses the importance of utilising your existing social networks when starting a new project.

I used several free to use textures and 3D Models and settled on a slightly worn environment – reflecting the environment the Tunnel art group regularly exhibits in the real world, so that there was a connection to the physical and real, as well as incorporating 3D Models which I felt reflected the mundane feeling of the current Lockdown (an old television set, a worn old bed etc.).

Netflix and Sleeping Image by Chris Godber 2020
The scene for Lockdown Art Show in the Playcanvas editor
Image by Chris Godber 2020

Scripting and Development

Next came the more technical and fraught side of the process – namely scripting, debugging and testing the performance of the virtual gallery experience. I was working alone on this so I spent on average 2 – 3 hours after my normal working hours to create the experience I wanted.

These are some issues I experienced along the way and a little detail on how I overcame them.

  • Movement – Movement needed to support both mobile and desktop environments
  • Video – I wanted my gallery experience to support streaming video and sound for a video piece I wanted to feature in the game
  • UI to present artwork information

Movement for desktop was a relatively simple script to implement – essentially a script that listens for keyboards events and modified the player entity accordingly. WASD movement in PlayCanvas is well documented here so I didn’t really want to reinvent the wheel with this one.

Mobile movement on the other hand proved to be much more of a challenge, and I eventually opted for a solution based on a demo PlayCanvas produced which incorporates virtual sticks and an input script for movement. I still want to improve it as it can be a bit jerky and strange.

Streaming video involved creating a script which open loading takes a video source from URL and then streams to a texture material I called ‘screen1‘. A big issue I stumbled into with this was CORS policy blocking the video from streaming from where the video file was hosted, which I had to fix by editing the .htaccess file and adding to the host for the website for the project. You can read more about CORS Policy here.

CORS is certainly a headache you will experience a lot doing this sort of creative coding so it is useful to read up on.

The UI to present the artists information on the other hand was quite simple – I just created 2 text elements centred to the screen with a script to update their content based on the players colliding with triggers I put in front of the Artwork assets in the scene. I wanted to keep it simple and clear – but this could be added to of course – maybe adding a descriptive field for each Artwork.

The video attached to this article goes much more in-depth into the scripting and the project overall if you are interested.

DIY and Make It Your Own!

Covering all the scripts and using PlayCanvas is beyond the scope of this article, I just wanted to showcase a creative approach to creating an app based on the COVID-19 crisis, perhaps for yourself making a project based on data visualisation would work, or creating a tool which helps people cope with the isolation.

The best thing you can do is experiment and see where it leads. I had a lot of fun creating this project and learnt a lot along the way as well as helping a few artist out with getting their work out there.

You can play Lockdown – art exhibition at www.lockdown-art.com

The Tunnel artists group can be found here, a livestream exploring the virtual gallery  talking to the artists involved can be seen here, and the full Lockdown project on PlayCanvas is here.

Want to experiment with programming and game development? Check out Creating a Two-Player Tic-Tac-Toe Game with Python.

1
0

Related Posts