Planet Virtual Boy

In this tutorial series, I'm sharing my experiences with creating the VUE-MASTER Demo Reel ...
Both, the template project as well as these HTML tutorials are included in VBDE (since version 1.2.2).




VUE-MASTER Graphics Tutorial – Part 1:
How to prepare 3D images for the VIRTUAL BOY

This part describes how to prepare existing 3D source images for a VIRTUAL BOY ROM. If you want to know more about creating 3D images, please search the internet for further information.

For example:
You could use a 3D camera or 3D software like Blender to create 3D images. Or just shift 2D layers to the left and right to create parallax. And before Morintari has to remind us again: there’s a pixel art tool out there, that even let’s you draw right in 3D ... that's right – I'm promoting ProMotion here!


What you will need:
• editable 3D source images (as separate left and right files or side-by-side)
• a graphics tool, that lets you edit the color table / palette (and apply dithering preferably), like Photoshop or GIMP
• optional: download color table files attached to this tutorial

This hard- and software was used to create the 3D images for the VUE-MASTER Demo Reel:
• The 3D photos were shot with a Fuji W3
• CGI was rendered with Cinema 4D
• Preparing images for the VIRTUAL BOY was done with Photoshop (CS6)


Specifications for VUE-MASTER images

These are the technical specifications, that our images are supposed to meet:
• 3D layout: 2 separate images (left and right 3D view) (duplicate 1 view for 2D images)
• Image Size: 384 x 224 pixels (for each 3D view)
• Color Mode: Indexed (4 colors: black and three shades of red)
• both views together must consist of a maximum of 2033 different tiles (8x8 pixels each)

Note:
Last one can be a tricky part for very detailed images. If your image turn's out to have more different tiles than 2033, please refer to post #2 of this thread. Do not count tiles yourself, VBDE’s GRIT will tell you


Step 1 – 3D layout / Setup Workspace

The final 3D image needs to be exported as 2 separate PNG files for left and right view, but I recommend to import all source files into a single composition file first, for 3D synchronized editing. You could arrange L&R views as layers one above the other or just place them side by side.

Each layout has different advantages …

one above the other:
• quickly copy 2D elements from one view to the other
• quickly compare left and right views by un/hiding upper composition
• compose both views for anaglyph glasses or other 3D previewing methods

side by side:
• always see both views
• if you can do cross-eyed or parallel 3D free viewing, arrange views accordingly
• Photoshop: you can use the Slice Tool* to define left & right views


*Photoshop’s Slice Tool: you can slice L&R views to quickly export them via “Save for Web”


Step 2 – Image Size

Scale down your composition to 384 x 224 pixels (or 768 x 224 for side-by-side layout). In Photoshop, you can also do this when exporting PNGs via “Save for Web”.

Note:
Photoshop recommends „Bicubic“ resampling for downscaling, but I prefer “Bilinear”, as Bicubic creates very hard results and glows along high-contrast edges (similar effect with GIMP’s “Sinc/Lanczos3” interpolation). Compare different resample / interpolation types to find the best results for your image.


Step 3 – Indexed Color & Dithering

The easiest way to do this is to download and import a predefined color table / palette file attached to this tutorial:


• "VUE Emulator" ( #000000, #870000, #b90000, #ff0000 )


• "VUE Blueberry Wine" ( #000000, #73001b, #a50027, #ff003c )


• "VUE Linear" ( #000000, #550000, #aa0000, #ff0000 )

The color table will have no effect on the final color values of the ROM (which will be replaced with standard colors by the VUEngine). It’s primarily for your preview*, so choose a table that looks close to VIRTUAL BOY’s color output on your computer display. I recommend “VUE Emulator” or “VUE Blueberry Wine”.

* Note #1:
The color table DOES have a slightly effect on color distribution and dithering while reducing colors. You can try different tables if you’re having problems to get the dithering results you’re looking for.

Note #2:
If you’re defining a color table yourself, make sure indexes are in correct order:
• #0 must be black
• #1 must be dark red
• #2 must be medium red
• #3 must be bright red


Photoshop: one way to reduce colors and import a color table file is Image > Mode > Indexed Color > Palette: Custom > Load…


Photoshop's “Save for Web” dialog also offers a convenient way, to scale down, reduce colors, preview dithering results and export PNG files in one step. Make sure to “Sort by Luminance” when editing or importing a color table.


GIMP: Import color table files in the palettes window before you convert your image to indexed color mode.


GIMP: Make sure to uncheck "Remove unused colors from colormap" when converting colors, as this option might mess up the color indexes.

If you're not satisfied with the resulting color distribution in your image, undo / cancel indexing colors and try to make some color adjustments to your image before.


Using Dithering

If your image already is a low res pixel art with only a few colors, you wouldn't want to use Dithering.
Also when your image only has 2 colors (like shadow art) you will get the best anti aliasing results when you turn Dithering off.


Shadow Art: turn off Dithering for better Anti Aliasing

If your source image has a hight color depth, Dithering will keep much more details of your image when indexing colors, but therefore will produce more 8x8 tiles. If your image turn's out to have more different tiles than 2033, please refer to post #2 of this thread.


Source image (256 colors)


Image with 4 indexed colors (no dithering)


Dithered image with 4 indexed colors

In Photoshop you will mostly get the best results with “Diffusion Dithering”. “Pattern Dithering" also can create very nice looking results (and will create less tiles too), but small patterns tend to cause unintended 3D effects in stereo images (for further information on this effect please refer to post #2 of this thread).

Try different dithering algorithms and compare the results in 3D, before you REELease your reel.


Original gradient (256 colors)


Indexed gradient (4 colors, no dithering applied)


Indexed gradient with "Diffusion Dithering"


Indexed gradient with "Pattern Dithering"


Indexed gradient with "Noise Dithering"

Note:
I do not use GIMP regularly and unfortunately wasn't able to create dithered gradients with it, that make some sense – hopefully you're more lucky than me


Step 4 – Exporting images

Export separate PNG files for left and right view. Name them like this (as VBDE will search for these files):
• VueMasterImage1Left.png, VueMasterImage1Right.png
• VueMasterImage2Left.png, VueMasterImage2Right.png
• and so on ...

You're ready for the VBDE Tutorial now ...

VUE-MASTER Graphics Tutorial – Part 2:
How to optimize your images and reduce tiles count

This part will give some advanced tips to tackle tiles count and create more optimized and beautiful results.

GRIT is part of VBDE and will automatically cut each view into a pattern of 48 x 28 tiles (8x8 pixels each tile) – that’s a total of 2688 for 3d images. Unfortunately, VUE-MASTER can only load a maximum of 2033 tiles (almost 76%) at a time (due to limitations of the VIRTUAL BOY):



• Tiles pattern for each view: 48 x 28 = 1344 tiles
• Two views needed for 3d images: 2688 tiles in total
• Maximum loadable tiles: 2033

GRIT also tries to solve this problem for you: it automatically identifies identical tiles in your image, so they only must be loaded once! It also finds mirrored instances! I love this tool.

But some images are just having so much individual details, that even GRIT doesn’t find enough twins. In these cases, there are different options to optimize your image …

Easy way to reduce tiles count: reducing image details

To reduce the details of your image, you can:
• crop the image, making it letterboxed (can save many tiles)
• for Photoshop’s Diffusion Dithering, you can use a slider to "Specify the amount of dither” (count of saved tiles depends on your image)

More sophisticated way: use repeating tiles

Tips to find or create more repeating tiles:
• Make your graphics tool show you a grid of 8x8 pixels
• Shifting 2D elements (like text or back plates) by 8px steps between 3d views (this can significantly reduce the count of tiles for larger layers!)
• And keep in mind: you can also use mirrored tiles
• Use Pattern Dithering (carefully) instead of Diffusion …

Use Pattern Dithering carefully in 3D images

Using “Pattern Dithering" instead of Diffusion (GIMP: “Positioned” instead of “Floyd-Steinberg”) will create less tiles, but small patterns tend to be problematic in 3D stereo images, as they can produce random depth allocations:


Looking at Image #3 from the Demo Reel in 3D, you can experience the effects that small patterns are creating in 3D stereo: the pattern dithered background at the right edge of the image can be perceived at different depth levels (depending on your imagination) – it can appear in front of the table for example.

Combine different techniques to find the optimal solution for your image

You can separate your image into fore- and background to use pattern dithering on less important areas of your image only. If you’re using 2D layers, you should even be able to pattern dither them without creating 3d problems: use the same pre-dithered layer in both views. Shift it in 8 pixel steps, to save even more tiles!


The 2D background layer of image #7 also uses pattern dithering, but the dither was rendered only once and used for both views. In contrast to image #3, your brain indicates only one perfect matching depth level for the background. The background was also shifted by 8 pixels (4 pixels in each view), to save many tiles: you can find many tiles in the left view, that are reappearing in the right view, shifted by 8px (= 1 tile).

I also share my graphic source files for the Reel – feel free to use them, if you want to pimp up your REELease post, for example ...

2D files:
• Alpha
• Texture of the Demo Reel
• PSD composition file with editable text layers (CS6)

3D formats:
• C4D
• FBX
• OBJ

The UV layout of the 3D Reel also matches the 2D files ...

Quote:


Image No. 6 in the MARIO KART 7 Reel No. 2 is a good example of how pattern dithering can rescue your image:

• with Diffusion Dithering GRIT counted 2600 tiles
• with Pattern Dithering GRIT counted only 1983 tiles

The background wasn't even separated and pre-dithered in this image. I guess, our brains just know that the sky is located very far away, so pattern dithering doesn't seem to create many 3d problems in this case ...

Thanks for the tutorial.

I got around to using it, and have some images to show up on my VB (emulator) from using it. I didn't attempt to make them in 3D yet: I just took an image and used GIMP to:

- Change resolution to 384x224 px
- Made a 4 color palette and applied it to the image, added dithering (although it looks like only one or two options for degrees of dithering in GIMP).
- Exported the images as PNG files
- But used the same exact image for right and left

Can you tell me if this is correct:
We're using 2D png images, hence the need for us to create different right and left images.

If we were using sprites in a game, does the VBDE automatically create a right and left image based on one of the "32 worlds" or layers of the screen?


Maybe next I'll try to create some pixel art and use it in different places in the "platformer demo".

Maybe you don't know why, but for me, the platformer demo works on an emulator, yet not on my flashboy+. I can't imagine it's larger than some VB games.

Quote:
Yes, the VB is a stereoscopic device and stereoscopic 3D images do always consist of two 2D images (one for your left eye, and one slightly different perspective for your right eye) ... https://en.wikipedia.org/wiki/Stereoscopy

Quote:
If you place just a 2D sprite on a 3D stage project, I belive it will atomatically appear in both displays. It will appear as a flat layer on the 3D stage, but you'll be able to shift it in depth. You can also design 3D sprites, that won't appear flat.

Quote:
Did you pad the ROM to a size of 2 MB before? In some cases you also might need a special padding mode - see the comments below this news article for details:
http://www.planetvb.com/modules/news/article.php?storyid=426

Thanks for the response, and your time in making the tutorial. It helped a lot in understanding how the images are defined in the VDBE, although the meaning of the hexadecimal representation itself still eludes me...

I'll hold ctrl and try option 3 in the padder - Thanks.

Would the 3D sprite you mentioned basically consist of several layers of PNG images over top of each other?

Quote:

I’m mainly guessing, but I think you’d need to be a skilled enough artist to draw two versions of the same sprite, each from a slightly different perspective to represent what something would look like if you only had your left (or right) eye open.

Here’s two slightly different views of a 2d drawing, like a detailed sprite. See if you can spot some of the differences between them.

Cross your eyes so they overlap and your brain will process it as if it were a 3D model.

Source for this graphic: https://hierojux.deviantart.com/art/Cr ... ntress-Bishoujo-354911772

Quote:
Technically, a 3D sprite also consists of two 2D sprites. You can find 3D sprites in the VUE-MASTER template folder under:
assets > images > "Logo", "LogoAa" and "ViewtualBoy"
(the "Logo" left and right sprites also are attached to this post)

But your suggestion is a possible way to create those two sprites: placing several layers on top of each other in your Photoshop or GIMP composition and shifting them left and right.
Actually, I created the low pixel version of the VUE-MASTER logo this way - see the "MakingOf_Logo" attached ...

Quote:
Thank you, but this actually is a pretty good example of very bad 3D stereo ...
There must only be horizontal parallax (view differences) in proper 3D images. In this image, there's huge vertical parallaxe also (see attachement) - please avoid this in your images, as this will cause eye strain to your audience.