Raybeem! The first virtual reality concept from Sokay. It’s a step towards my longtime dream of creating a music visualizer. I spent countless hours gazing at the Milkdrop visualizer in Winamp back in the day. I had no clue how it worked – back when I just starting to dive in Flash ActionScript.

My concept for Raybeem started with imagining how great it could be if you didn’t need another person to give you a personal lightshow if you were at a rave. And what if you could take all of that great visual and aural stimuli with you anywhere? What if you never had to leave your couch to experience a spectacular show?

Above is a screen-capture of the playback controls. In the prototype, you can cycle through 5 embedded tracks. I tested using some of my favorite copyrighted tracks. I also got permission from the homies Eezir and Cryptic Circuitry to use their music in the final build. Each track has a different effect on the environment around you. Eventually I’d like the user to be able to load in their own library.

Here is a rough video demonstrating what it looks like on a 2D screen, from within Unity:

The Demo

I’ve been messing around with CSS3’s 3D Transform ability recently. I was looking for a way to achieve some primitive 3D visuals strictly with HTML. I wanted something that would also run on phones and tablets.Continue Reading…

Shortly after I posted my tutorial on creating a Starfield with Away 3D Lite I tried to see how much I could improve performance with Away 3D 4.0, which was Flash 11 and in Beta stage at the time. I got caught up with finishing Donut Get! and working on Unity stuff and forgot about making a post about the demo. Here’s a post about that Away 3D 4.0 demo I made.

This was inspired by playing Kid Icarus on 3DS. During the flying segments, you’re always flying through clouds which is a great effect. I think they do something similar to this, where the clouds are 3d slices of a cloud which you pass through.

I created the clouds with noise. To get “3D slices” I used a 3d Perlin noise generator by Ron Valstar. The regular Flash noise class lets you generate noise on X and Y axis, this allows you to move in the Z axis to create slices.

I used Sprite3Ds for the cloud slices, hoping that that would allow me to use a greater amount of cloud slices. In this demo I’m using 12 separate Sprite3D instances. It takes a while to generate the noise at the beginning, I don’t think this noise generator anywhere near as fast as Flash’s internal one unfortunately. I spent a long ass time adjusting the Generator and settled on this result which I felt was looking pretty good, rather than just settling for something that was fast to generate.

Sprite3D displays like a billboard/plane in 3D space that is always pointed towards the camera. The problem with Sprite3D is that it’s displayed as a point in space, and if the point isn’t within the camera viewport, it doesn’t display at all. You can see this issue as you rotate the camera to the side. I tried a list minute fix to change it to planes but I couldn’t get the planes to display. It may have something to do with the scale of the scene, the slices are like 15,000 width. Not spending any time trying to figure it out so good luck with it if you wanna try!Continue Reading…

Ok, I had a hell of a time figuring out how to load in XML for a Unity project I’m working on and use it to build a level. Fortunately the Unity Community is vibrant and helpful, even though you may have to do digging to find what you’re looking for. It can be difficult getting started, especially when working in C# as many of the examples are coded in Javascript.

Here’s an example of some game xml:

12345678910111213141516171819202122232425

<stageData>

<stage>

<map>1, 2, 3, A, B, C</map>

<map>4, 5, 6, 7, 8, 9</map>

<map>2, 1, 3, 5, 6, 2</map>

</stage>

<map>0, 0, 0, 0, 0, 0</map>

<map>1, 1, 1, 1, 1, 1</map>

<map>A, A, A, A, A, A</map>

<map>3, 3, 3, 3, 3, 3</map>

<map>C, C, C, C, C, C</map>

</stage>

</stageData>

Keep in mind that there’s a million ways to go about doing this. I tried to justify why I did it this way, and the best I can say is “I just felt like it.” Haha!

I ended up using a C# port of this Lightweight XML parser. The benefit of it supposedly is that it’s only 8k compared to a megabyte or so that would be added if you used the native C# class, System.XML. I used the C# port by chirhotec in this post. I had to make a small change, commenting out the “string nodeContents” line because the variable wasn’t used.Continue Reading…

The class uses the Away3D BasicTemplate class, which sets up the view and basic scene super quickly. I believe there’s also a FastTemplate class, but for some reason it doesn’t work with Sprite3Ds so watch out for that! And by default the BasicTemplate has a debug function built in, so you have to switch it off. The BasicTemplate is good for setting up something quick! But I’d rather setup something myself ideally.

It creates 200 Sprite3D objects, which use a white 4×4 square of BitmapData for its texture. Those are then scattered randomly in 3D space and on each frame it pushes them forward 20 units. I added in some keyboard controls so you can mess around with it (arrows and WASD).

I’m releasing the source code for a Papervision3D game I was putting together. This project was meant to be an interactive visual for a party my friend threw last weekend, Friendly Integration. This game was meant to be projected onto a wall and controlled with a DDR pad for each player. There were also plans to have additional panels that could be stepped on that changed the “theme” of the game.

This is my first public Papervision demo. I’m experimenting with some techniques for the next Sokay game. This is also the debut of the main character for the game, designed by Ricky Enriquez. Check out the demo.

My Papervision Demo

This scene is composed of 4 planes — the cop, the sidewalk, the shop, and the city. I positioned them within the scene with code. The animation is handled with code as well. I’m using Tweener to move the cop left and right, as well as his jump animation. The camera is targeting the cop.

I’m going to keep playing with this. I want to push it further by adding some movement to the rest of the scene, perhaps tweaking the rotation of the buildings as the camera moves.

If you’re looking to start with Papervision, there are some excellent video tutorials at gotoandlearn.com that’ll help you get started.

Earlier I found this amazing 3d interactive site in a thread on Flashkit. Completely breathtaking. Needless to say, I couldn’t wait to make a post about this one!

The Eco Zoo

This is the best executed 3d Flash site I’ve seen so far. Just check it out. Apparently this isn’t created with any open source 3d engine out there, it’s a custom engine by this guy.

3D on the web is sort of a gimmick right now, as Flash itself was seen as a gimmick in the past (i.e. your site wasn’t cool unless it had a Flash intro). All it really takes is some progressive individuals to define what’s possible with the advances of the medium — beyond spinning cubes and globes. Right now I see opportunities to tell stories in new and exciting ways. I’m hoping to take design elements from motion graphics and create interactive visual masterpieces. Couldn’t you imagine CartoonNetwork.com as a fully interactive playground? Kids would love that stuff. How come we aren’t seeing that yet??

This demo impressed the hell out of me. It was proof that 3d character animation could be awesome in Flash. I’ve been dabbling in Papervision stuff lately. It’s an extra layer of complication on top of AS3 but the payoff is worth it. I created a model in Maya, textured it, and loaded it into Flash and made it interactive. Unbelievable…

For animation, I figured I could either setup some complicated character rig by separating the character at the joints and linking the pieces together. Setting all of that up and creating a system to animate the keyframes would be much to time consuming. renderhjs, from the Flashkit forum, was creating his own custom system of animating the character in the 3d software and exporting the animation frame by frame and playing through the keyframes. I don’t exactly have time to figure that out either so I found Clint’s post searching Google in distress.

Clint explained to me that his character demo uses .md2 format, from Quake 2. It’s similar to, if not the same as, renderhjs’ method of character animation. He linked to this Papervision md2 parser and recommended that I try loading in some Quake 2 models and seeing how it works.