A very small app to run three.js apps on the desktop with Deno

Overview

3D visualization with Three.js on Deno on Desktop

This is a small Deno app that renders a (webkit) webview on desktop. Along with a page running Three.js

This is mostly just a toy, and it is not really good for any serious application yet.

Name & Identity

I was thinking about "the birb engine" - there are a lot of birbs where I live. hahaha

Quick start

Check out deno.json for some uselful tasks:

  • $ deno task dev:watch will run esbuild in watch mode to watch for changes in ./src/index.ts
  • $ deno task dev:start will do the same and also run the webview window

As of now you will have to run a local server to serve ./dist/index.html, otherwise you will see nothing! This feature is being worked on features/server-client at the moment :D

Usage

You should output a "./dist/app.js" bundle with your complete Three.js app. You probably want to keep all of your app code inside "./src".

The entrypoint is "./src/index.ts". Keep all of your dependencies referenced inside the src folder. There is an appDeps.ts file for that. Otherwise esbuild will attempt to bundle all dependencies into the output file.

Once you write your app you can bundle it with the ./bundle.jsscript, which uses esbuild. deno run -A ./build.js

Dev tools

I'm working into building a workflow for accessing webkit's inspector. As well as implementing a basic inspector with html/css. See the feature/dev-tools branch.

You can open the "inspector" (for now just a sliding panel) with shift + i

How to run

Just run deno run -A --unstable --config ./deno.json ./main.ts

(the --config flag may be ommited if Deno uses the deno.json automatically)

If your three.js app is loading assets, you will need to serve ./dist/index.html from a local server. See the header below!

please note: the example app you can currently find on ./dist/app.js will load assets. So you need to use a local server to run the example.

Loading assets

It is necessaty to run a local server from a deno script, and then run the app. (see issue #8)

Work is ongoing on the feature/server-client


Currently, the only way to support loading assets is to serve index.html via a local server. So serve the files and run the app. It should work fine.

Three.js version

I'm importing Three.js form npm into the project. But I'll manually place it into "./lib/three"

This is the version of Three.js I'm currently using

"dependencies": {
    "@types/three": "^0.141.0",
    "three": "^0.141.0"
  }

Type definitions for Three.js

If you are reading this it is already done! :D

The "./lib/utils/denoify.ts" script will rewrite the import/export urls into Deno-friendly urls. You don't need to run it unless you want to import another version of Three.js.

TODO: there are still some minor issues with this (see issues page)

Dependency locking

Use deno cache --reload --lock=lock.json --lock-write ./deps.ts to write/update the dependencies.

And deno cache --reload --lock=lock.json ./deps.ts to check dependencies for integrity

Three.js itself is bundled with this project, until I figure out a better solution!

Webview debugging

Please note, I am using my own fork of Webview (see ./deps.ts) in which I enabled dubugging on the console. Otherwise the current version of the pakage disables it by default (it's harcoded). I will change back if they enable it :D

Further improvements

The original intent is to have a Three.js bundle built on Deno. Which is can be run inside a Webview window. And adding a couple of scripts to automate the process.

The idea would be to have a "desktop" solution to make games of 3D apps with Deno. Being able to write everything in TypeScript and running a single command to build and run everything :D

License

MIT.

Do whatever you want with it!

Comments
  • Deno complains about the Dom

    Deno complains about the Dom

    The compiler will throw errors because there are no HTML elements (obviously) but that is fine. We are not gonna run three.js on Deno itself, but we will use Deno to bundle it, so it has to compile.

    I’ll need to research how. I’ve read about using /// <reference lib=“dom” /> but it doesn’t seem to work as expected. Maybe I messed something up 🤔

    bug question 
    opened by JorchRL 5
  • Will have to take the local server route for loading assets

    Will have to take the local server route for loading assets

    See issue #8 I had to close it as it seems to be impossible to implement for now.

    Thus, I now need to think of a solution for loading assets from a local server. Also, I can't bind callbacks to webview from deno :cry: I may be able to use webview.init() still, but if we are using a local server, it doesn't really help much anymore.

    However, the solution i think becomes simpler, as everything should work as in the web. I may want to implement some "token" authentication mechanism, to avoid anything other than the app to mess with the server hahaha

    enhancement high priority 
    opened by JorchRL 4
  • Cross origin request are only supported for HTTP

    Cross origin request are only supported for HTTP

    I am getting this error:

    CONSOLE SECURITY ERROR Cross origin requests are only supported for HTTP.
    
    CONSOLE JS ERROR Fetch API cannot load file:///... due to access control checks.
    

    So it seems I can't use any asset files unless I fetch them from a server...

    Either I create a server to serve the assets from Deno, or I have to find some other workaround :(

    bug high priority 
    opened by JorchRL 4
  • Add small

    Add small "REST" API for communicating with the backend

    Given that I am forced to serve my files with a local server, I might as well go ahead and build a rest API to send messages between the game and the backend...

    See #12

    enhancement 
    opened by JorchRL 3
  • Enable developer tools and an inspector

    Enable developer tools and an inspector

    I managed to enable "debug mode" on webview, so i get access to the console and webkit's dev tools. See issue #11

    But I don't have access to the Webkit API itself (webview limitation), so I cannot bind a shortcut to open the inspector.

    But the "right click > inspect element" schema works. As it is implemented on webkit itself. See: https://trac.webkit.org/wiki/WebInspector

    However the 3D view often prevents right click. Which is to be expected. I can make this work it think. Here's the idea:

    • Make an "inspector" panel with HTML/CSS that "slides" on top of the canvas element. And can be enabled or disabled by developers (so end users may or may not have access to the dev tools!) Then right click from there to open the devtools.
    • The "inspector" can be customized similarly to Unity's inspector. Maybe add a @inspectable decorator to certain object's properties? :thinking:

    I'll create a new branch to work on the "dev tools workflow" :sunglasses:

    enhancement high priority 
    opened by JorchRL 3
  • Bundle threejs app to ./dist/app.js

    Bundle threejs app to ./dist/app.js

    i need to find a way to bundle the complete Three.js app on ./src into a single "app.js" file that goes into ./dist

    I'm thinking of using Deno's built-in bundler and built-in task runner for this.

    enhancement high priority 
    opened by JorchRL 3
  • Feature: Implement client-server websocket communication

    Feature: Implement client-server websocket communication

    I already have a local file-server working See #22. Now I need to implement a websocket connection in order to implement a "live reload" feature.

    As well as using it as the basis for client-server communication in the future!

    • I may want to save files to the file system as binary blobs (maybe). Or to an embedded database (ie. sqlite).
    opened by JorchRL 2
  • Add tasks to improve workflow

    Add tasks to improve workflow

    Currently I have to do three things to start working on the project:

    • serve the page from a local server
    • start ./main.ts to open a webview window
    • run ./build.js in "watch mode" to update the app as I save

    I want to automate some of these. So I think I want to setup deno's task runner to do this.

    enhancement 
    opened by JorchRL 2
  • Fix: Reorganize folder structure

    Fix: Reorganize folder structure

    I want to keep all the internals inside /lib and just export a namespace "$engine" or something with import_map.json.

    I also want to have users just run an init script so they don't have to deal with the internals! (similar to what the fresh framework does :sweat_smile: )

    opened by JorchRL 1
  • Feature: Implement a handshake mechanism for the client-server communication

    Feature: Implement a handshake mechanism for the client-server communication

    As I am running a local server to serve the assets, I don't want end users of the games made with this project to be able to mess with the server (that could be used for cheats or other malicious exploits).

    And maybe give devs the option to change the "client" for the game. Either the native webkit window or a browser, or another alternative. As long as they can implement the handshake.

    opened by JorchRL 1
  • Centralize references to paths to avoid hardcoding relative paths

    Centralize references to paths to avoid hardcoding relative paths

    I don't like having hardcoded relative paths. So I was thinking it would be nice to have a "paths.json" file or something, with absolute paths which I could import from anywhere else on the code. :thinking:

    enhancement low priority 
    opened by JorchRL 1
  • Feature: Refactor core app into classes/Desing a public API

    Feature: Refactor core app into classes/Desing a public API

    I want to offer a public API with an interface like:

    const application = new App();
    
    application.run()
    
    application.killSubprocess("client")
    application.killSubprocess("server")
    

    and so...

    So I will work on refactoring all of my scripts into nice modules :D

    documentation enhancement high priority 
    opened by JorchRL 3
  • Feature: Widgeting toolset with Preact/Twind

    Feature: Widgeting toolset with Preact/Twind

    I want to create an API for building "editor" widgets similar to Unity's. And would like to build that on top of Preact and TWind as I am enjoying those a lot while building the website for this project and I know they work fine with Deno.

    I'll do that in a feature/widgets branch

    opened by JorchRL 1
  • Tests needed

    Tests needed

    I’m starting to settle into an architecture, so there is not much trying out stuff left to do. I’m also starting to break things often. So I need to start working on writing some tests.

    enhancement high priority 
    opened by JorchRL 2
  • No docs yet :cry:

    No docs yet :cry:

    This has turned complicated enough to need at least some documentation, if other people are gonna try to use it :sweat_smile:

    So I'll need to get to that :D

    documentation 
    opened by JorchRL 1
Owner
Jorge Romero
I'm switching to software development. From CogSci and Math! I started programming because I wanted to make videogames!
Jorge Romero
This provides an extension integration with Docker Desktop to run k9s quickly and easily through the Docker Desktop interface.

k9s extension for Docker Desktop This provides an extension integration with Docker Desktop to allow k9s quickly and easily through the Docker Desktop

James Spurin 14 Dec 16, 2022
Opinionated collection of TypeScript definitions and utilities for Deno and Deno Deploy. With complete types for Deno/NPM/TS config files, constructed from official JSON schemas.

Schemas Note: You can also import any type from the default module, ./mod.ts deno.json import { type DenoJson } from "https://deno.land/x/[email protected]

deno911 2 Oct 12, 2022
Create Desktop apps with Deno 🦕

?? Astrodon Desktop App Framework (not there yet!) for Deno, based in Tauri Note: Only Windows and Linux is supported at the moment. Feel free to open

Astrodon 797 Jan 8, 2023
A small, but powerful HTTP library for Deno & Deno Deploy, built for convenience and simplicity

Wren Wren is a small, but powerful HTTP library for Deno & Deno Deploy, built for convenience and simplicity. convenient aliases for HTTP responses au

Jakub Neander 69 Dec 12, 2022
Desktop App for mdSilo: Tiny Knowledge silo on your desktop.

mdSilo A mind silo for storing ideas, thought, knowledge with a powerful writing tool. built with React and Tauri. Demo Discord This is desktop app, a

D.Loh 203 Dec 27, 2022
three.js examples. if you are first in learning three.js , this will give you much help.

three-projected-material Three.js Material which lets you do Texture Projection on a 3d Model. Installation After having installed three.js, install i

null 22 Nov 2, 2022
Text Engraving & Extrusion demo based on Three.js is implemented with Typescript and webpack5. Used THREE-CSGMesh as the core tech to achieve engraving and extrusion results

Text Engraving & Extrusion Text Engraving & Extrusion demo is implemented using Three.js, with Typescript and webpack5. Used THREE-CSGMesh as the core

Jiahong Li 3 Oct 12, 2022
A small web app that tries to imitate the desktop web version of amazon site, you can add items to the basket, delete them, and have your user authentication feature thanks to Firebase.

Features Here's the feature's included in this project ??‍??‍??‍?? Login Page ?? Products Page ?? Cart and Checkout Page ?? Sign up function with Goog

Murad Rahmanzada 16 Aug 22, 2022
An exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes.

Stupid Database This is an exercise in building a very minimal (and very stupid) in-memory SQL-like database for educational purposes. None of this co

Fabio Akita 196 Dec 20, 2022
A Very Good Documentation Site created by the Very Good Ventures Team 🦄

Very Good Docs Site Developed with ?? by Very Good Ventures ?? A Very Good Docs Site created by the Very Good Ventures Team. Generated by the Very Goo

Very Good Open Source 8 Nov 2, 2022
Run a command, watch the filesystem, stop the process on file change and then run the command again...

hubmon Run a command, watch the filesystem, stop the process on file change and then run the command again... Install You can install this command lin

Hubert SABLONNIÈRE 7 Jul 30, 2022
A Remix stack setup to run on Deno with support for Rust WASM modules!

Remix + Deno + Rust -> Webassembly - The Air Metal Stack Welcome to the Air Metal Stack for Remix! ?? + ?? This stack is a good choice if you want to

Ben Wishovich 60 Jan 5, 2023
This is a simple boilerplate for a Deno website, deployed with Deno Deploy.

Simple Deno Website Boilerplate This is a simple website boilerplate built using Deno and deployed using Deno Deploy. Demo at simple-deno-website-boil

Bruno Bernardino 15 Dec 3, 2022
TypeSafe MongoDB Atlas Data API SDK for Deno & Deno Deploy

Atlas SDK atlas_sdk is a TypeSafe MongoDB Atlas Data API SDK for Deno & Deno Deploy Links Docs Import Replace LATEST_VERSION with current latest versi

Erfan Safari 20 Dec 26, 2022
Deno bindings for yoga, using Deno FFI.

deno_yoga Deno bindings for yoga, using Deno FFI. Usage flags: --allow-ffi: Requires ffi access to "yogacore.dll", "libyogacore.so", "libyogacore.dyli

迷渡 6 Feb 11, 2022
🛣️ A tiny and fast http request router designed for use with deno and deno deploy

Rutt Rutt is a tiny http router designed for use with deno and deno deploy. It is written in about 200 lines of code and is pretty fast, using an exte

Denosaurs 26 Dec 10, 2022
deno-ja (Deno Japanese community) showcase

Showcase Deno本家よりも気軽に作ったものを公開できるようなShowcaseです。 スクリーンショットの撮影方法 短めのidを決めていただいて、下記のようにスクリプトを実行してください。 deno task screenshot [url] [id] ※エラーが出る場合は、下記を実行してみ

deno-ja 17 Oct 28, 2022
A command-line tool to manage Deno scripts installed via deno install

??️ nublar nublar is a command-line tool to manage your scripts installed via deno install. ??️ Installation deno install --allow-read --allow-write -

Shun Ueda 16 Dec 26, 2022