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 BOYThis 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 imagesThese 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 WorkspaceThe 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 SizeScale 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 & DitheringThe 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 DitheringIf 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 imagesExport 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 ...
Edited by STEREO BOY on 2018/2/18 21:56
Edited by STEREO BOY on 2018/2/18 22:02
Edited by STEREO BOY on 2018/2/18 22:40