Windows Phone Exploration Journal Part 1: Developing a Demo with Native Javascript

2022/10/31

Categories: Journal Tags: Windows Phone Babylon.JS Crocotile3D Demo Development

Babylon

Preface

I’m collecting notes here about my explorations into creating a demo for the Windows Phone 8.1 platform. I have chosen specifically to attempt this using the Native Javascript app feature found in the latest GDR of Windows Phone 8.1. My reasons for trying this route are as follows:

I started this journey in the summer of 2022. I have dreamed of making a demo of my own and have started the development process multiple times over the years since around 2004 using different platforms. This time I am committed to getting something actually done and this journal is a big part of it. I am also writing this all down so that I may quickly remind myself of things should I have a long pause in between.

The stack and tooling I have chosen for this exploration project is as follows:

Native Javascript

The Native Javascript app feature on Windows Phone 8.1 (with latest GDR) is based on Internet Explorer 11. In my studies, I’ve noticed that my Lumia 920 was missing the latest updates even though it was running the latest FFU image available from lumiafirmware.com. The Windows Phone 8.x based phones can no longer fetch updates on their own, but I found a version of OtcUpdater software that was patched so that it could be used for updating the phone using a USB cable and a PC.

This worked fine, but for some reason did not apply the latest Lumia Denim update on the phone. It is important to note that this OtcUpdate process needs to be done before unlocking the bootloader and unlocking root filesystem access. Otherwise the update will fail with no sensible error message. After updating, the bootloader needs to be unlocked and root filesystem access needs to be enabled so that software can be deployed to the device by Visual Studio.

How did I notice that there was an issue with Native Javascript applications on WP8.1 with updates missing? Well, I first noticed that the WP8.1 emulator had differing results when compared to the actual hardware. I got javascript exceptions and errors that did not happen on the emulator, but happened when running the app on the phone through Visual Studio debugger. I then quickly proceeded to test with another Windows Phone I had laying around (Lumia 640 XL) and with this my small test app worked flawlessly.

Testing with another phone made me realize the updates were missing. I also tried to upload my app to my webhost and use the browser on the Lumia 920 to access it but I got error messages on the browser itself with the browser error pages reminding me of an older version of IE.

As the Native Javascript apps are tied to the IE11 engine, no modern Javascript versions can be used when programming. The engine is forever stuck with ES5 level Javascript support. WebGL support also is not perfect, but once I got my test app running I was positively surprised how fast the 3D rendering was. I was expecting far worse. What I saw proved that my chosen stack could work after all and I would not need to migrate to something like C++/DirectX.

Babylon.JS

I chose Babylon.JS over Three.JS because the first was first developed by MSFT engineers, so it likely has better support for the IE11 engine I am using for what I am doing here. I quickly realized that the latest distributions of Babylon would not work with the IE11 as they were transpiled for a later version. I have yet to learn how transpiling works in practise, but I found that the latest release of Babylon.JS that seems to work on IE11 is 3.1. However, there were some changes to the glTF loader in 3.1 that made it so that the entire model is no longer loaded as a single mesh.

I suppose there might be a way to load the entire model as a single mesh using a loader option, but I will check it out should I need a later version of the glTF Loader. For now, I am trying to use 3.0.0 until I run into an issue that is actually an issue for me. As I am not familiar with how transpiling works, I am using Babylon.JS with Javascript rather than with TypeScript. Perhaps I will have time later on to learn TypeScript.

I found that the Babylon.JS project does not host documentation for old versions of their engine, so I had to find documentation elsewhere. Luckily archive.org had sufficiently old documentation. I also found old Youtube tutorial videos. Links to these can be found on my WP development resources post.

I still have lots to learn about Babylon.JS. I’m making a list here so that I’d remember to study them later, in no specific order:

What I would like to learn more about should I start making more of a game than a demo:

Retroconsole

About Art Style

I have chosen to use Crocotile3D as my main modeling tool. Previously I have used Milkshape3D to make 3D models for various game mods way more than a decade ago. A few years ago I have started learning Blender, but I am still not proficient with the tool as I have not used it much for real work. I should look more into Blender in the near future.

Crocotile3D serves best my artistic vision. My art style could be described as if a Game Boy suddenly got 3D capabilities. I am using only 8x8 tiles, hand-drawn with an Apple Pencil and an iPad. This limitation stems from my endless love for the Game Boy Color system. I am inspired by Asian and Nordic nature and various games from the Game Boy Color era.

Where my own creative output is limited, I am utilizing an AI solution to generate scenery. One place where I am utilizing AI heavily is skyboxes.

Pagoda

Current Status of the Demo Project

At the moment I have a fully working 3D scene running as a Native Javascript application complete with touch controls. As mentioned previously, I am still learning and improving the scene and the demo step by step. I have thus far learned how to:

Here’s a video of how the progress looks like thus far (captured from an emulator, but it does run on native hardware too):

>> Home