Skip to content

Latest commit

 

History

History
199 lines (171 loc) · 8.32 KB

README.md

File metadata and controls

199 lines (171 loc) · 8.32 KB
Raw

VICE.js

Versatile Commodore Emulator for JavaScript

JavaScript port of VICE 2.4 using Emscripten.

Demo
VICE
Emscripten

Browser Version Status Note
Firefox 39 :) ok
Chrome 43 :
IE 11 :( broken

Examples

###c64 basic

<!doctype html>
<html lang="en-us">
    <body>
        <!-- the canvas *must not* have any border or padding, or mouse coords will be wrong -->
        <canvas  id="canvas" style="border: 0px none;"></canvas>
        <script type="text/javascript" >
            var Module = {
                arguments: ['+sound'],
                canvas: document.getElementById('canvas'),
            };
        </script>
        <script type="text/javascript" src="js/x64.js"></script>
    </body>
</html>

###auto-run a D64 disk image

<!doctype html>
<html lang="en-us">
    <body>
        <!-- the canvas *must not* have any border or padding, or mouse coords will be wrong -->
        <canvas  id="canvas" style="border: 0px none;"></canvas>
        <script type="text/javascript" >

            function audioDetected() {
                return (typeof Audio === 'function' && new Audio().mozSetup === 'function') ||
                    (typeof AudioContext === 'function') ||
                    (typeof webkitAudioContext === 'function');
            }

            function loadFiles() {
                var base64EncodedFile = '...';
                FS.createDataFile('/', 'disk-image.d64', window.atob(base64EncodedFile), true, true);
            }

            var viceArguments = ['-autostart', 'disk-image.d64'].concat(
                audioDetected() ? ['-soundsync', 0, '-soundrate', 22050, '-soundfragsize', 2] : ['-sound']
            );

            var Module = {
                preRun: [loadFiles],
                arguments: viceArguments,
                canvas: document.getElementById('canvas'),
            };

        </script>
        <script type="text/javascript" src="js/x64.js"></script>
    </body>
</html>

###send keyboard commands

<!doctype html>
<html lang="en-us">
    <body>
        <!-- the canvas *must not* have any border or padding, or mouse coords will be wrong -->
        <canvas  id="canvas" style="border: 0px none;"></canvas>
        <p><button onmousedown="sendSpaceKeyPressedCode()" onmouseup="sendSpaceKeyReleasedCode()">space bar</button></p>
        <script type="text/javascript" >

            var C64_SPACE_KEY_CODE = 32;

            function sendSpaceKeyPressedCode() {
                Module.ccall('keyboard_key_pressed', 'undefined', ['number'], [C64_SPACE_KEY_CODE]);  
            }

            function sendSpaceKeyReleasedCode() {
                Module.ccall('keyboard_key_released', 'undefined', ['number'], [C64_SPACE_KEY_CODE]);
            }

            var Module = {
                arguments: ['+sound'],
                canvas: document.getElementById('canvas'),
            };
            
        </script>
        <script type="text/javascript" src="js/x64.js"></script>
    </body>
</html>

Best Configuration Options

async mode:

  • soundfragsize 2 -soundrate 22050 -soundsync 0

sync mode:

  • soundfragsize 2 -soundrate 22050 -soundsync 0 -ntsc
  • ntsc is important because browser requestAnimationFame is going to deliver 60 fps which means less cpu time is wasted during vsync delay

Development

###How to find key codes

  • in /vice/src/arch/sdl/kbd.c # sdlkbd_press()
  • this line prints key codes to console when key is pressed
fprintf(stderr, "%s: %i (%s),%i\n",__func__,key,SDL_GetKeyName(key),mod);
  • activate by compiling vice with SDL_DEBUG flag

Resources

C64 Wiki
Commodore 64 keyboard matrix layout
COMMODORE 64 ROGRAMMER'S REFERENCE GUIDE
Commodore Manuals
Coroutines in C
requestAnimationFrame setting fps
SDL 1.2 to 2.0 Migration Guide
VICE Manual
VICE options

Tasks

  • try using worker thread (emcc --proxy-to-worker)
    • initial tests show +10% perf in Chrome, but missing SDL Audio
    • discuss proxy-to-worker
    • discuss web audio & web workers
    • nice callback pattern for web workers
    • Proxy SDL Audio
      • \vice\src\sounddrv\soundsdl.c
      • \emscripten\src\library_sdl.js
        • line 1636 creates Audio object
      • \emscripten\src\proxyWorker.js
      • \emscripten\src\proxyClient.js
      • Native audio classes shim proxy option: Create proxies for each Audio class and simply define these classes in proxyWorker.js.
        • proxyClient will feature detect available Audio classes and send this info the proxyWorker
        • proxyWorker will implement Audio classes based on features detected by proxyClient
        • Conclusions
          • A large API needs to be proxied, lots of different Classes some vary by browser.
          • Managing all the audio object proxies (createBufferSource, createBuffer) is complicated.
          • Need to track references to proxied objects.
          • Determining when to free objects can be difficult.
          • postMessage communication would be chatty.
      • Proxy SDL_*Audio C functions
        • Seperate C code from Web Audio API's
          • Re-factor pushAudio function to use data arrays instead of a pointer to heap
        • Copy Web Audio parts of SDL_*Audio functions to proxyClient
        • Detect proxyClient in library_sdl and invoke proxy versions of SDL_*Audio functions
        • Conclusions
          • Code duplication, some code from SDL_*Audio functions exist in both library_sdl and proxyClient
          • extra data copy required by pushAudio function
            • current process
              • copy data from heap directly into Web Audio buffers $expensive
            • new worker process
              • copy data from heap into ArrayBuffer $expensive
              • transfer ownership of data to browser thread
              • copy data into Web Audio buffers $expensive
        • Issues
          • SDL init is synchronous so if there's a problem in the browser context part, worker does not know.
            • Possible solution is to feature detect Web Audio and send the info to worker ahead of time so it can make a better SDL init process.
          • Sound buffer overflows if tab goes to background, probably caused by request animation frame slowing down browser thread but worker is still at full speed.
          • Sound clicks, weird timing
        • Use function addRunDependency(id) instead of custom waitForAudioFeatures logic.
        • Test with \emscripten\tests\sdl_audio_beep.cpp
          • ./emcc -O2 --minify 0 -s DISABLE_EXCEPTION_CATCHING=0 -o audio-beep.html --proxy-to-worker --closure 1 tests/sdl_audio_beep.cpp
        • proxy-dependency-bug
          • ./emcc tests/hello_world_sdl.cpp -o hello.html --proxy-to-worker --post-js hello_world_dependencies.js
  • file issue for Emscripten with patch
    • Chrome has a console in web worker context so detect it before over-writing @ proxyWorker.js line ~81
self.console = self.console || {
  log: function(x) {
    Module.printErr(x);
  }
};
  • add other computers
    • VIC-20
  • fix vice menu ui (F12)