Using the visionOS Simulator to create images for the Resource Library

A meta-post about making images for this website.

One of the core categories that I have on the site is the Resource Library. I collect and curate links that visionOS developers may find useful. (If you know of something that belongs here, let me know!)

When I started this project, I tried to create images for each resource. These images show up several places on the site and as previews when a link is shared on social media. After a few months, I gave up custom screenshots and mocked up a simple title card.

Mediocre underwhelming title card

It’s nothing special, but it did the job. But I hate it… I had an idea this week to use visionOS and the Simulator to create slightly more interesting screenshots. Today I took at first pass at it. Here is an example for a recent post: Metal by Example.

The new image template

I didn’t spend much time on this and the code is very messy. I’ll clean it up later… maybe. The idea is that I can paste a link, run the app in the simulator, enter an immersive space, and take a screenshot. A few notes

  • The web preview is using the new SwiftUI WebView that we finally got this year.
  • This web view is presented in a ViewAttachmentComponent. At first I tried using a window, but I wanted programmatic control of the position and rotation.
  • The immersive space background is the dome from Reality Composer Pro. I changed some colors, removed the grid, and scaled it to get this long corridor effect. I borrowed this idea from some of the work I’m doing in Dark Spaces.
  • A stack of cylinders ads just a little bit of geometry to the scene.
  • I added some particle emitters that can show SF Symbols just to add something playful.
  • I’m using the Simulator itself to take the screenshots.

It’s good enough for now, but there is room to improve.

  • I could add more environments, colors, assets
  • I could have the project jump directly into the immersive space
  • I could probably have the app automatically extract whatever is on my clipboard to show the URL

This app isn’t useful beyond the Simulator. It’s just a simple tool that I’ll use for the Resource Library–at least until I think of a better idea. I updated the latest six resource posts in the library and still have lots to do. Let me know what you think of this small change and odd use case for the Simulator.

Questions or feedback?