An exploration of a surveillance tech-fueled present. The name, concept and references in the piece are largely inspired by the work of Chris Gilliard and David Golumbia on what they call "luxury surveillance."
I made the 3d models in Blender over winter break 2021. Winter break of this year (2022) I finally got around to transforming them into a web app. (A lot has changed in a year, but a lot has stayed the same. Last year, I named this project "subtle dystopia"; it was intended to be "an exploration of a surveillance tech-fueled future." But as Gilliard writes about surveillance tech in The Atlantic, "It would be a bit glib—and more than a little clichéd—to call this some kind of technological dystopia. Actually, dystopia wouldn't be right, exactly; Dystopian fiction is generally speculative, whereas all of these items and services are real.") I made the images in the piece in Sketch and used three.js for the web stuff.
- Takes a few seconds to load <3
- Use the arrow keys, dragging and pinching/scrolling (zooming) to look around. (Screenshot of the room below~)
- Photosensitivity warning — the CSS objects sometimes flash when rendering.
- Alt text for the room: Two adjacent grey walls and a grey floor form a corner. The room is awash with dim red-pink light. Along the wall on the left are a lamp in the shape of a small potted tree plant; a glass table with a speaker, tablet (showing a "doorbell cam"), monitor (showing a "WARNING: CHEATING; Keep your face in view of your webcam" message) and a chair; and a blue light in the shape of a cloud. Along the wall on the right are a lofted bed with a blue blanket and red and green pillows, underneath which are two drawers; a shelf with an icosahedron-shaped lamp, a Rubik's cube, two books and slippers; a TV cycling through three fake ads ("no more bad dates," "NEVER COOK AGAIN" and "SELL YOUR DATA YOUR WAY"); and a mirror with glowing text that reads "body scan mode." In the middle of the room is a blob-shaped rug on which a robotic orange cat stands. Above the two walls are links to this repo and its README.
(If you're trying it on Safari, be sure to go to Menu > Develop > Experimental Features and check WebGL 2.0.)
TODOs / bugs:
- Loading indicator
- Safari CSS object offset (possibly relevant: this)
- Sound randomly stops playing / doesn't work
Inspiration for various parts of the piece:
- A Detroit community college professor is fighting Silicon Valley’s surveillance machine. People are listening. — Will Oremus for The Washington Post
- Surveillance shift: San Francisco pilots program allowing police to live monitor private security cameras — Johana Bhuiyan for The Guardian
- Cheating-detection companies made millions during the pandemic. Now students are fighting back. — Drew Harwell for The Washington Post
- The mirror is inspired by the Amazon Halo body fat scanner.
- The speaker is playing lofi music made in the Google Magenta Lo-Fi Player, which incorporates machine learning (e.g. to generate new melodies). It's inspired by a tweet I saw a long time ago and can no longer find, which I think was roughly about how lofi and a few other tech-y cultural artifacts exemplify the way Silicon Valley colonizes culture and makes things boring. I'm explaining this terribly, but one of the replies cited Kyle Chayka's Verge essay Welcome to Airspace, which tackles this topic (roughly, I don't remember the tweet that well) and explains it much better than me.
Credits:
- The YouTube tutorial series that helped me learn how to use Blender
- Room design inspired by Bruno Simon's "My Room in 3D"
- Initial three.js experimentation: GabrielRamirez's threejs-gltf-template
- Later experimentation and project setup: mrdoob's three.js webgl_loader_draco example
- CSS3DRenderer.js, DRACOLoader.js, GLTFLoader.js, OrbitControls.js and three.module.js from three.js
- Google Magenta Lo-Fi Player
- Flickering neon lights in CSS (for the monitor and mirror screen contents)
- Incorporating CSS objects: followed this example
- Cat meow sound effect from Pixabay
- Improving performance: followed this documentation
- Fixing URLs not clickable: followed this
Random notes on process:
- Created model in Blender with colors, textures, lights, etc.; fiddled with it until it looked nice when rendered
- Baked textures in groups, by material, following this tutorial
- 4096x4096, reduce light bounces to speed it up, make sure Image Texture is selected in the shading editor and the dropdown is filled with the relevant image
- Connected baked textures to corresponding materials in shading editor, exported as .glb
- Switched to using cdn when deploying
- The CSS objects render on top of the other objects, which is kind of annoying. Experimented with adding image textures to the screens but it was kind of a hassle. Didn't plan ahead for this, but for future projects do this in Blender (e.g. a lot of the screens are static so there's no need to do them in three.js). (TODO: try to find workaround.)
