This is a quick post to share my experience with Virtual Reality (VR) visualization, which I recently explored for scientific data representation.

I did this a good while ago, but I think it is still relevant today. VR visualization can provide an immersive experience that allows users to interact with data in a more intuitive way.

This is what we are going to do:

  • first of all we need the 3D model of the object we want to visualize; in my case this was an HEP event from a Delphes simulation, but it can be anything else (a molecule, a building, etc.);
  • then we need to convert this 3D model into a format that can be used in: glb or gltf; I used Blender and/or Python.
  • then we need to make sure to produce the right QR code and to process it in a way it works.
  • when you will scan the QR code with your phone, it will open a webpage that will load the 3D model in VR mode, which you can explore in VR.

This is the precise steps I followed:

  • create the .glb/.gltf file using Blender or Python (e.g. using the pygltflib library) (I give a python example to extract from Delphes and convert to glb below)
  • upload the .glb/.gltf file to a web server or a cloud storage service (in my case github pages)
  • produce the .html which loads the 3D model on github.
  • make a public link to the .html file, for example using https://raw.githack.com/ remember to use the raw version of the html file, and to use “production” mode in the link when you are done testing.
  • generate the QR code that points to the .html file
  • process the QR here https://hiukim.github.io/mind-ar-js-doc/tools/compile so that you get a .mind file. When you scan the QR code, it will both open the webpage, load the 3D model and use the QR code itself to anchor the VR view.
  • upload and link the .mind file in the same html folder and link it in the html code.
  • Have fun visualizing in VR!

The python code to extract from Delphes and convert to .glb is the following: link to the full code

My repo with some example: https://github.com/fabnap/VRjsTest

Edit: sometimes the target image is not good enough to anchor the VR view, so you might want to try with different images or QR codes.

Edit2: another solution to visualize the 3D model is to just view it online, see the html example here: https://github.com/fabnap/VRjsTest/blob/main/VBS_2.html