GithubHelp home page GithubHelp logo

freezy / vpweb Goto Github PK

View Code? Open in Web Editor NEW
14.0 4.0 4.0 26.45 MB

:joystick: Visual Pinball for the Web

License: GNU General Public License v2.0

JavaScript 78.77% HTML 11.33% CSS 9.90%
pinball pinball-simulation game visualpinball

vpweb's Introduction

Visual Pinball for the Web

VPX-JS is only a library, so there must be something that runs it. This is it. Its current main purpose is to serve as a development tool. It doesn't do much but create a three.js scene and load VPX-JS when a VPX file is dragged onto it.

This is very much work in progress. You have been warned.

Usage

For the ambitious, you'll have to clone both repos. Some time in the future you'll find VPX-JS on NPM.

git clone https://github.com/vpdb/vpx-js.git
cd vpx-js
npm ci
npm run build
cd ..
git clone https://github.com/freezy/vpweb.git
cd vpweb
npm ci
npm start

Quirks

The dragged VPX is locally cached so you wouldn't need to re-drag it every time the page is reloaded. So it parses the VPX file on every page reload. This means that if you want to test a different file, you'll have to clear the application data and refresh the page.

Sometimes it might not work because VPX-JS changed the API on a new branch and that branch isn't merged yet. In this case look for the freshest branch on VPX-JS and use that one.

License

GPL-2.0

vpweb's People

Contributors

dependabot[bot] avatar freezy avatar neophob avatar renovate-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

vpweb's Issues

Port Physics Engine to JavaScript

We have the meshes from vpx-toolbox, now we need to apply rigid body physics on them.

I think it's best to port VP's engine to JS (as opposed to using another engine like ammo.js), because:

  1. VP's physics are very good
  2. We can avoid figuring out how to port parameters from existing tables to a different physics engine

Since the physics engine should run faster than the rendering (preferably at 1000fps), we'll run it as a web worker on its own thread. That means we have two contexts we need to synchronize: The main thread where rendering is taking place, and the worker thread where the calculations are being made.

Main Thread (Rendering)

The main thread contains the rendered version of the three.js scene. It retrieves transformation matrices from the worker and applies them before the each render frame.

It also sends user events to the physics thread (although the physics thread will probably get all its triggers through a third ROM emulator thread)

Worker Thread (Physics)

The physics thread applies world physics to all collidable objects and emits transformation matrices to the main thread so it can render them correctly. These calculations are based on:

  • The playfield parameters (what's been read from the .vpx file)
  • The values of additional dynamic parameters
  • A 3D model of collidable shapes.

Whether the collidable shapes are going to be handled with three.js is not clear yet.

Note that 1000fps doesn't mean running setInterval() at 1ms. We render only at 60fps, so everything in-between doesn't have to be real-time. That means for every rendered frame, we can run 17 physics cycles with dtime spread across 17ms (UE calls this sub-stepping).

Data

The idea is to pass data as transformation matrices to from the physics thread to the main thread, using classic web worker messaging.

However, keeping a shared memory block with updated matrices might would be another way. See:

Install

Hi @freezy nice project but i can't install vpweb because of dev-dependencies. Is this project maintained ?

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

  • chore(deps): update dependency copy-webpack-plugin to v5.1.2
  • chore(deps): update dependency raw-loader to v4.0.2
  • chore(deps): update dependency vpx-js to v1.3.4
  • chore(deps): update dependency bootstrap to v4.6.2
  • chore(deps): update dependency css-loader to v3.6.0
  • chore(deps): update dependency ejs-loader to v0.5.0
  • chore(deps): update dependency http-server to v0.13.0
  • chore(deps): update dependency mini-css-extract-plugin to v0.12.0
  • chore(deps): update dependency webpack-bundle-analyzer to v3.9.0
  • chore(deps): update dependency autoprefixer to v10
  • chore(deps): update dependency bootstrap to v5
  • chore(deps): update dependency copy-webpack-plugin to v12
  • chore(deps): update dependency critters-webpack-plugin to v3
  • chore(deps): update dependency css-loader to v6
  • chore(deps): update dependency escodegen to v2
  • chore(deps): update dependency estraverse to v5
  • chore(deps): update dependency file-loader to v6
  • chore(deps): update dependency html-webpack-plugin to v5
  • chore(deps): update dependency http-server to v14
  • chore(deps): update dependency mini-css-extract-plugin to v2
  • chore(deps): update dependency postcss-loader to v8
  • chore(deps): update dependency rimraf to v5
  • chore(deps): update dependency sass-loader to v14
  • chore(deps): update dependency style-loader to v3
  • chore(deps): update dependency webpack to v5
  • chore(deps): update dependency webpack-bundle-analyzer to v4
  • chore(deps): update dependency webpack-cli to v5
  • chore(deps): update dependency webpack-dev-server to v4
  • chore(deps): update dependency webpack-merge to v5
  • chore(deps): update dependency worker-loader to v3
  • ๐Ÿ” Create all rate-limited PRs at once ๐Ÿ”

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

Detected dependencies

github-actions
.github/workflows/firebase.yml
npm
package.json
  • bootstrap 4.4.1
  • three 0.112.1
  • vpx-js 1.3.1
  • autoprefixer 9.7.3
  • copy-webpack-plugin 5.1.1
  • critters-webpack-plugin 2.5.0
  • cross-env 6.0.3
  • css-loader 3.4.2
  • ejs-loader 0.3.5
  • escodegen 1.12.1
  • estraverse 4.3.0
  • file-loader 5.0.2
  • html-webpack-plugin 3.2.0
  • http-server 0.12.1
  • mini-css-extract-plugin 0.9.0
  • node-sass 4.13.0
  • postcss-loader 3.0.0
  • raw-loader 4.0.0
  • rimraf 3.0.0
  • sass-loader 8.0.1
  • style-loader 1.1.2
  • svg-inline-loader 0.8.0
  • timeago.js 4.0.2
  • webpack 4.41.5
  • webpack-bundle-analyzer 3.6.0
  • webpack-cli 3.3.10
  • webpack-dev-server 3.10.1
  • webpack-merge 4.2.2
  • webpack-pwa-manifest 4.1.1
  • workbox-webpack-plugin 4.3.1
  • worker-loader 2.0.0

  • Check this box to trigger a request for Renovate to run again on this repository

Port Scripting Engine to JavaScript

VP's scripting language of choice is VBScript. I think at some point, IE supported VBScript natively, but this was decades ago. So we need to find a way to run the table scripts in the browser without having to manually rewrite it.

Since browsers today all support JavaScript, the most obvious way would be to transcribe all VBScripts to JavaScript. In order to do that, we need to:

  1. Write a grammar
  2. Tokenize and parse the VBSes
  3. Produce JSes
  4. Implement (or stub) the linked libraries

A VBS grammar can be found here in the BNF format. Depending on which parser, the grammar needs to be ported. There are a few parsers in JavaScript:

Once we have an AST of the script, JavaScript code needs to be emitted. astring is a library doing that, but the AST needs to be ESTree compliant.

Finally, many scripts load Windows DLLs and access their API directly via VBS. These need to be stubbed and implemented where functionality is needed (e.g. VPinMAME). Also, the VBScript's standard library probably needs to be at least partially implemented.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.