Creating the 3D Web
My journey to discover the future of the internet…
I believe I’ve spoken before on what I am sure to be the future of the internet…
But its late and I already am dealing with much emotions… I just want to get this out there…
I am dedicating this month to finally fnishing/creating my own personal site over at elirudite.github.io … My current site is a shameful existence that I dont like showing people … I built it in like 2 days… or really a few hours in order to just have something up there…
But its way past high time to upgrade… and its about time I had a site I am proud to show off.
I am tired of 2d web designs and have talked about the advent and case for the 3d Web whenver possible… but its useless if my own site doesnt replicate that.
I hope to soon flaunt my website as a introduction and ever-evolving example of what the 3D web can/will look like.
SO! I am going to use the New Year Resolution flurry as fuel to push me to do this.
Instead of making a bunch of posts though… I am going to chronicle my journey here. I will come back to edit this everyday to talk about my day’s journey.
I dont expect people to read this… at least not yet… but I really want to record this in a way that gives me some modicum of public accountability.. no matter how small…
It is this aspect of taking small, baby steps as to not be overwhelmed with the task of coding that I believe should help me to actually finish this. Code is scary to me… particularly anything remotely ‘object-oriented’ like JS or ‘real programming’…. But fear not! I will also be doing this 30 Day JS Challenge to help me practice and gain confidence as well.
My goal for these daily additions to my site is simply to do at least one line of code every single day… but preferably add a whole new function, piece, or aspect and talk about what I learned.
I dont even know what I want the final product to look like yet, but I’ll figure out what I will be okay settling on in terms of an acceptable 3d website soon enough.
Without further ado:
Preparations done in 2016
Researched like half-a-dozen JS, physics-based frameworks… searching for simple but powerful and lightweight tools that will allow me to create interactable and/or 3D elements.
I finally settled(?) on aframe.io
It seems fantastic! Beautiful, seemingly (hopefully) intuitive, future-proofed for VR integration, and lightweight. Even creating a basic start was a nice experience… like a light jog through a promising forest path… rather than trying to slog through winds and rain amidst rocky outcroppings beside a steep ravine hahaha…
It was nice.
I didnt want to create a 360 pic… that seemed to much and a start down the wrong path. So I just took a look at the Hello World github code to create this:
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8">
<title>Holodeck Prototype 2.0</title>
<meta name=”description” content=”Holodeck Prototype 2.0">
<script src=”https://aframe.io/releases/0.4.0/aframe.js"></script>
</head>
<body>
<a-scene>
<a-sphere position=”0 2 -2.5" radius=”1.25" color=”blue”></a-sphere>
<a-plane rotation=”-90 0 0" width=”4" height=”4" color=”white”></a-plane>
<a-plane rotation=”0 -90 0" position=”2 2 0" width=”4" height=”4" color=”red”></a-plane>
<a-plane rotation=”0 90 0" position=”-2 2 0" width=”4" height=”4" color=”green”></a-plane>
<a-plane rotation=”0 0 0" position=”0 2 -2" width=”4" height=”4" color=”yellow”></a-plane>
<a-sky color=”black”></a-sky>
<a-entity position=”0 0 3.8">
<a-camera></a-camera>
</a-entity>
</a-scene>
</body>
</html>Starting with just the sphere on one day… then coming back another day to figure out how the planes worked… and then another day to create this:
The sphere was originally nearer the front and the walls started in the middle, at the origin of the box.
I learned that A-Frame starts your origin as if it was facing you and directly on the screen so
<a-plane position=“0 0 0” rotation=“0 0 0”></a-plane> would be right up against the screen… Adding a negative to the position would push it back, down, or left (as the numbers are in XYZ order), and the rotation is in the same order/scheme (so (-90 0 0) would lay it down flat).
What is also interesting is that there is no ‘back’ to these planes… so it matters if you use a negative or positive rotation. You can see for yourself by going to my site and trying to see behind the box… (use arrow keys or ‘wasd’ to move) http://elirudite.github.io/protodeck.html ;P
The walls just ‘disappear’…
Day 1: New Year's Day
Thought about doing this challenge… thought about building a basic site for my Worlds Adrift Alliance members, the Sky Drifters; where I would replicate a pirate ship (and then later our Capn’s Flag Ship) in 3D to have an other-worldly home website!! The best site of any Alliance!
But I figured I should start somewhere… And I really need to design it (on paper and/or google drawings) first to see how I would even make it with polygons and such…
Day 2: Housecleaning
Today I just looked at the code, changed the z-position of the sphere so that it seems to be coming out of the back wall more, and fixed my page names/links to allow for a slightly better navigation. I even added links to my blog and podcast… Huzzah!
(Gotta celebrate the small accomplishments… like publishing 11 podcasts and 100+ blog posts!! :P)
-
Tomorrow I want to add pictures on the ProtoDeck, and/or maybe even a background picture… a starry field gif… likely the one that is the ceiling/background of the (newly dubbed) PsuedoDeck.
Day 3: Images
So images are kinda difficult… or at least non-intuitive…
First of all, one lists the images one will use right on the html page in its own little assets area:
<a-assets>
<img id=”wall_pic_left” src=”assets/images/epiclandscapebg3.jpg”>
<img id=”wall_pic_right” src=”assets/images/research_lab.jpg”>
<img id=”background” src=”assets/images/starsmovingsimple.gif”>
</a-assets>But what happens when I have like 20 images? Or if I want to allow the ability to add images dynamically? I suppose that is what server-side code is for.. I guess.
But more pressingly, I found out that I cant actually see my images in my local environment! After half-an-hour scrambling around the docs, issues forums, and finally finding the right google phrase… I learned (through Stack Overflow of course) that it has something to do with how Chrome serves things up… or something? Some mess about ‘CORS’??? The dang docs only lead me to a wiki page instead of helping me to actually fix this!
I aint got no time to try and read through this mystical thingymaphrase… Im barely able to find the time and will to do this little bit now without having to go and research every little concept and…… <breathe>
</diatribe>
Let me not rant… Point is, I went ahead and just downloaded Firefox. I suppose its been high time I switched back, or at least used it since its heyday, before it became too confusing, ugly, or just not as cool as Chrome was back when I switched a few years ago. And now that I know a bit of code, I should be able to better appreciate it..
But back to today..
So I end up adding the images and the background. But my gifs werent working… something about how aframe renders this stuff.. I was able to find two solutions on the github issues forums. And for the first time in my life… I prefer mayonnaise… By just adding two scripts and a (sort of confusing) line of code… I can haz me animated gifs!
Unfortunately… gifs shouldnt be used this way, or Im not doing this right. My gifs turn out *really* low-res and ugly. And the gifs wrap around the scene in a terrible way. The moving-stars gif that works so well on my 2d holodeck looks dizzyingly horrible here! It looks like some too-fast moving clouds/spots racing around and around… I was nauseous just looking at it, I can only imagine how horrible it would have been for a VR user.
The twinkling-stars gif looks better, it doesnt orbit/rotate… unfortunately, the low-res really destroys the starry night sky I wanted to convey. Bleh.
But here is where I got so far:
BTW… the images look sooo cool when you go up close and see the little details pop up. The way the perspectives change with your position is awesome (in close range, the farther you go out, the uglier it gets)!
I then started to see how the way all the elements sitting right there in the html can get confusing, so I added spacing and comments to clean the code up, visually. (Does that count as refactoring??)
-
Tomorrow, I want to create another room (or two) replicating the 2d designs I had… and maybe fix the background image…
Getting into this really had me thinking about how awesome it would be when I can easily add all sorts of elements and things to turn these assembly of walls into an actual custom lounge room! :D Ready Player One anyone??
Day 4: Room 2
Gah… I ended up spending most of time debugging… first on another dev task (an Angular 2 project… bleh).. then on the non-cool parts of my site (the buttons stopped working in my lab… page), then on the 2d pseudo-holo-deck (aint no mo deck… its all gone… wont show up anymore).
I havent figured any of that out yet… but after I finally starting working on the Protodeck, I found it easy enough to make another room.
What I dont find easy or likable is that there doesnt seem to be an intuitive way to build my own geometric shapes to carve out a wall with a door opening in it… this is their idea of how to do custom geometries:
Like… WTF?!?! Do they really think I should be competent enough to do all that?? To even know what that means?? The NERVE of them!!
Heh… self-deprecation aside,.. idk how any of this actually is supposed to work. I wish there was a stupid simple way to just plot the points or, better yet, draw directly the custom shapes.
But alas…
At least it gives further ideas and validation for Flubbi.
Also, I wanted to see if I can stretch the sphere into a kind of oval to become the back wall of the second room in order to have a cool futuristic-theater type affect.. where the screen jumps out at you and houses cool holograms and what not… But I cant stretch the sphere like that apparently :/
The only thing I could find were these geometry.segmentWidth type things… It seems to… idk… warp the sphere only in the peripheral viewing angles??
Blah… Its cool… but not what I want to do…
Here is what I do gots though:
Weirdly enough… the red wall is NOT slanted… it just *looks* like that because… peripheral angles? Idk… interesting effect.
-
Tomorrow I want to make another room… preferably with a different configuration of walls and pics haha… maybe even a door… somehow.
Day 5: I made a Door!
Imma be honest… I didnt do much today. Was just not feeling it at all…
Nonetheless, I did learn some new things, ranted internally a bit, and accomplished two things I didnt think I’d accomplish.
- I made a door… even though there is no simple way to make custom geometric shapes, I simply put 3 smaller rectangles in the right positions to make an opening in which looks like a door! Hurray for simplicity!!
- I found that there is a
<a-cylinder>element! Thus, usingtheta-length:180I can make a half-cylinder and stick it on the wall to look a pop-out movie screen! Huzzah!!
I also made this happen after misnaming something!
I ranted a bit about why in the *Virtual* World they aint got no kinda wizard to actually plug in numbers or otherwise read details about each of the parameters/attributes for the elements. How am I supposed to know what half this stuff does if you dont let me play around with it right there??
Only way for me to see is to plug in each one…. UGH
All I wanted to do was figure out how to make the cylinder wider, but thinner/less depth than the default… but width doesnt even seem to do anything, and I had to settle for just pushing it back behind the wall a bit… hacks on hacks..
Also, turns out that there is a way to actually curve the images so that they dont look all pixelated and low-res from different angles… but its not exactly as simple as my lil mind can take right now, so I’ll try it tomorrow.
Anyways, here is what I got done today:
Oh… and I added a lil table thingie… Turns out, their cylinder geometry can be used to create cylindrical prisms like a 6-sided table :P
I also tested this for the first time on mobile! Well, on my ipad… It looks amazingly cool!! Cooler than it actually is haha… Just the ability to move the ipad and watch the whole scene/camera move is surreal! Unfortunately, I cant seem to be able to move in any direction, just look…
Idk how to fix that… yet. Perhaps its simply because its not in a VR cradle…do they have something that enables the accelerometer to pick up when/how you move forward? Do ipads/tablets simply not have that ability? I have to check that out.
But not yet.
-
Tomorrow, Im *really* going to create another room… or two… and maybe even mess with the curved-image thing.
Day 6: Room 3
Gah… waited way too long to get working on this… my addled, sleep-deprived mind is not very efficient at tryna break code.
But I at least made a new room despite my being tired… and discovered a cool effect.. where one side of a door is a door.. but the other side of the same wall/door.. is not a door! Simply because of the way planes are rendered, ie they have one-sided by default.
Here is a pic displaying the door
Now look at the other side the same door!
There’s no door! Its because its a whole new <a-plane> element…
It strangely reminds me of the old 007 Goldeneye! Those cool lil vents that looked like walls, but you just phase right through.. haha
-
Tomorrow I want to do more. Its the weekend, so Im going to tackle 3d images, more room designs, add little details and maybe even figure out how to move vertically!
Day 7: Another room
Gah… Didnt do anything over the weekend… some scarey stuff happened..
Just in case you cant see it:
I greatly debated whether or not I would share this story, partly because it happened so recently and also because I didn’t want people to think I was just looking for attention. But after some talking with my boyfriend and my mother, and some deep internal monologuing I’ve decided to share my experience as a PSA and also a call for caution. If you have experienced something similar or worse, I’m going to warn you ahead of this that what I’m about to say may trigger flashbacks or otherwise awful feelings.
Yesterday, I was almost abducted.
I woke up and saw how beautiful it was out and decided I was going to take a late morning winter walk. I left the house bundled up with my phone in my pocket and walked five miles to my younger brother’s high school. The walk there was tranquil and otherwise uneventful except for the two times I almost slipped on the ice, but it was the walk back that spelled difficulty.
A man in a green pickup truck with dirty lawnwork equipment in the flatbed started honking at me. I noticed that his windows were rolled up and tinted, but I could see his figure waving and motioning at me to come to him even though we were on opposite sides of the street. I shook my head no and kept walking, but it soon became apparent that he wasn’t going to let me go so easily. He turned his truck around and started driving ahead of me, eventually passing me and turning down a side street and into the empty parking lot of a daycare. I hoped it was over until I got up near an abandoned car wash and he whipped his truck out of the daycare parking lot across the street and right in front of me. His truck was pulled longwise in the entrance so that I couldn’t see his license plates and I could see that he was looking and waving right at me, motioning at me to come to his truck. By this time, I had already texted my boyfriend that this man was following me and we were trying to call each other, but the connection was really bad where I was.
I managed to walk around his car all while trying to contact my boyfriend (I know, in hindsight, I should’ve called the police, but I was so freaked out that didn’t even occur to me.), then the man rolled down his window.
“Hey, hey! Come here! I just want to talk to you, come here!”
I shook my head quickly, trembling as I looked back at this man. He was white with dark, slim eyes and wore a red, white, and blue baseball cap. He continued to call to me, smiling thinnly and motioning me over. I told him I had to go and made to walk away, all while he kept calling me.
“Hey, what’s your name?” he asked. “Come here and tell me your name!”
I started to put some separation between us, damn near running as I gave up trying to call my boyfriend and called my mom instead. It took four rings for her to pick up and all the while I’m walking and waiting, I can hear his truck engine behind me. I could feel his eyes on my back. When she finally picked up I was bawling and begged her to come get me. In less than five minutes, she and my grandmother were able to pick me up from a gas station that I ran to, and the man in the green pickup truck disappeared. I don’t know where he is or if he’s going to try to lure another girl to his car, and that haunts me.
Just for some context, I live in the metro Atlanta area just twenty minutes away from the country’s biggest sex trafficking hub. I can’t say what would’ve happened to me if he had decided to just grab me, I can only imagine what his intentions were, but when I think about the 60,000 Black girls missing in this country… I can’t help but feel survivor’s guilt. I want to share this story to raise awareness of this very real, very dangerous threat. It can happen to anyone.
If anyone knows of any organizations that help victims of sex trafficking, I’d greatly appreciate it if you could put me in their direction. If anyone who’s gone through this would like to discuss it with me, I’d really love someone to talk to about it. Thank you all for your understanding.
Freaking maddening, fear-inducing, horrible mess…
I really want to do something about it… And I will… I hate that now she fears going outside.. walking by herself.. that so many women and people live this fear … We need to do something about it…
But alas.. it will take a while…
I did make a new room, took longer than I wouldve liked just figuring out how to get the shape and the diagonal walls right.
I’ve stayed up way too late as it is (almost 3am and I have to wake up at 7am)… so I’ll just post what I got and retire:
-
Tomorrow, I want to finally try the curved-images tag and mess around with some better ‘floorplans’…
I want this to be an example of 3D online lounges… where folks can go to hangout out virtually, in a real ‘physical’ (geo-virtual) space. In these spaces, people should still be able to interact with the 2d web via online portals in windows or whatever… But I also want to figure out the best way to show and include interactive data/elements in this 3d environment…
Day 8: Curvedimage(s)
I am/have been terribly tired… and I feel like I’m high on something dangerous… but its just fatigue…
But anyways, here it is.
Tomorrow, I am going to try and get their entire simulation right now…
Day 9: Get some sleep!
Have you ever been SO tired… that even when you’re trying your best to stay awake and get something done, you just end up sayin crazy stuff or just straight getting loopy?? Yeah…
Tomorrow, I am going to try and get their entire simulation right now…
~ Elijah Claude, 2:40(ish)am January 11th, 2017… on 4 hours of sleep for 4 days in a row…
In the interest of ensuring my mind doesnt get any slower or looser… Im going to get me some sleep tonight instead of sacrificing (too much more of) my rest.
But, I will do my bestest to work on this a great deal tomorrow… really want to figure out how to turn these tests/experiments into real sites with content!
