WEB Prototype

[hrgdavor]

This prototype is moving to another repo to allow another developer/s to contribute and to even release some official versions until it is ready to be contributed back to jscad. Repo is https://github.com/hrgdavor/jscadui

current work is in hrgdavor/jscadui#9

it is about making actual usable components for users to combine jscad into an application, vanilla-js and a React example.

bandicam.2022-12-06.23-25-59-113.mp4

parameter form is working 2023-01-21

bandicam.2023-01-21.18-58-23-661.mp4

right renderer works and orbit controls (both threejs) plus making a camera navigation gizmo
more details here: hrgdavor/jscadui#10

---

I will change this text and also post replies so those interested can follow the progress.

Disclaimer:

• whatever code is good will be copied to final version, rest will be left behind :)

branch: https://github.com/jscad/OpenJSCAD.org/tree/proto-web2

Looking at the code

• goal is to take advantage of tools available, so for example VSCode can provide as much autocomplete support
• doing tweaks so it integrates nicely in VSCode

checklist [2022-05-07]

copied from readme in the prototype branch, and it will grow as more is clear what I plan to play with there

• index page that can be loaded by starting a web server
• make gui skeleton with few buttons
• integrate translations from jscad web
• initial layout (top buttons, editor panel, empty model panel)
• toggle editor
• toggle settigns
• store settings to localStorage
• integrate themes from jscad web (only for 3d view)
• themes for UI (dark/light)
• EDITOR codemirror 6
• EDITOR javascript syntax higlight
• ELECTRON: load same index page as electron app
• VIEWER - regl renderer
• VIEWER - Three.js renderer
• VIEWER - Babylon renderer
• WORKER - run script
• VIEWER - parameters
• WEB - file upload and changes syncing with worker
• ALL - generalize file access
• ELECTRON - allow working with local files
• ELECTRON: recognize when in electron
• ELECTRON: if in it, enable saving, not just reading script
• DEMO-WEB: generate web page so proto is available for playing with as-is

feature	regl	Threejs	Babylonjs
get/set camera	✓	✓	✓
get/set camera pan	✓		✓
theme background	✓	✓	✓
line segments	✓	✓	✓
mesh	✓	✓	✓

nice to have or to consider if worth doing

• extract reusable OrbitControls to be used with different renderer (regl,three, babylon)

progress

support for paramaters

bandicam.2022-05-08.00-09-10-271.mp4

[hrgdavor]

• checklist is growing and layout is taking shape
• codemirror 6 is being used
• esm modules feel good to use, works nicely in vscode
• not planning to use typescript, still nice completions are available in vscode with JS and esm

electron app just works, same as test web page

later on when file handling is implemented electron app will need a bit special handling to take advantage of real file access.

[z3dev]

@hrgdavor how goes the new application?

I took a look at the code and the build. Looks really interesting and compact. I’ll continue to keep watch so let me know if there are any questions. Also, if there are some nice improvements then let me know and I’ll try things out.

Sadly, I’m back at full time work again, and don’t have a lot of time for JSCAD. So, please be patient.

[hrgdavor]

@z3dev Hi, I am glad you are following the branch. I was mostly playing with jsx and what I can do with plain js without plugins so the superfast esbuild can be used. Also looking to what extent can the JS code there be friendly to autocomplete in vscode.

On top of that there are few other thing I am discussing in discord channel to bring into jscad on discord.

• OCCT
• another CSG engine (to test if it can be better than csg.js in some aspects)
• SDF (signed distance fields) ... maybe maybe in some way

I have a tendency to go sideways like that, but the main reason development was slow last few weeks is project deadlines ... end of the year is nearing and invoices need to go out before holidays, and stuff finished before that :).

also check a hot new drawing and diagramming app: https://www.tldraw.com

good luck on your new job, and may it be such job that u do not get burned-out, and have time for jscad :)

[hrgdavor]

@z3dev mini update: I have been playing more with my ui lib, but finally started to assemble code for new worker.
I am testing drag and drop, an forwarding the dropped files to worker.

This is a tricky step to get right as I want also to support same file access in electron app. this will take some time, so I will tackle it in multiple iterations while working on execution and render for single script that is edited in the embeded editor.

[z3dev]

Definitely tricky so take your time.

There are probably a few design decisions to make as the automatic reload of files will allow users to use an external IDE or editor to make changes. The ability to use a debugger in the electron application is also desirable.

[hrgdavor]

The dev tools that you have in chrome is also shipped with electron apps by default. The F12 keyboard shortcut is reserved, but there is an alternative keyboard shotcut: CTRL+SHIFT+i

Fun fact, you can get dev tools for Discord app and Github desktop (they are obviously also electron apps)

[z3dev]

So,is VSCODE from Microsoft. Ha ha ha!

[hrgdavor]

Yes, Atom was also an attempt to better than sublime that I was following, but was not impressed.

I am not fan of MS at all, but I am impressed how well vscode works and is made in JS as electron app.

They also have an online version of vscode...

I will likely look into supporting vscode as inline editor for jscad web as alternative for codemirror ... it is worth exploring.

Currently I am finding it pretty useful while making the prototype. As mentioned here more than few times, I still have no plans to switch to Typescript, but I am keen to get any benefits of code completion in vscode with plain JS. Pressing a shortcut to jump to a function declaration is fun :)

[hrgdavor]

it has been slow 2 months, still here is something to look forward to:
https://doc.babylonjs.com/divingDeeper/materials/advanced/transparent_rendering#order-independent-transparency

threejs and babylon have some level of support for better transparency rendering.
so supporting all 3 engines gives choice to use what fits purpose for given case

[hrgdavor]

small progress update. Finally finding some time to continue working on the prototype.

• regl renderer implemented with orbit controls
• showAxes option integrated vith viewer
• showGrid option integrated with viewer
  
  

it is not much, but finally moving fwd :)

[hrgdavor]

new progress :) @z3dev ;)

• inital implementation of regl renderer and threejs renderer
• switching renderer live
• works in web and electron

bandicam.2022-02-03.21-47-32-200.mp4

[hrgdavor]

bybylon.js basic scene with grid and axes ... needs more tweaking, but it works.. babylon view is currently 6.7 mb , but it should go down in size when customized closer to 1MB..

bandicam.2022-02-04.22-47-43-172.mp4

[hrgdavor]

after setting up threejs and regl basic scene with grid and axis, babylon is taking some time to tune to match camera view

One major difference is handiness
https://forum.babylonjs.com/t/unexpected-behavior-for-z-up-right-handed-coordinate-system/1090/7

also default fov in babylon is 0.8 which is not exact match to regl and threejs default, but easy fix camera.fov = Math.PI / 4

after playing around the views are getting closer

bandicam.2022-02-21.21-50-41-659.mp4

[z3dev]

Now why would Babylon go with left handed system, and Y up? That is just lame. They gave no reason for that decision other then saying… “Maya did it”. The users are correct… it’s a mind F

[hrgdavor]

I was trying to use library specific code to render grid and axes, but both threejs ang babylonjs implementations are missing things that would enable me to make all 3 look the same.

The most robust way to get grid and axis to work and look the same it to generate properly colored line segments. I will switch to model where jscad(web ui) will generate axis lines and grid and give it along with models from executed jscad script,

I will try make it so all 3 engine wrappers support grouping of objects and multiple scenes to be rendered on a section of the screen.

this will also mean no need to reimplement things in wrappers if we add support to different grid types in jscad.

Threejs and sharing of objects:

You can share geometry along different Scenes.
You can't share meshes along different Scenes.
You can't share geometry/meshes/scenes along different Renderers (yet).

[hrgdavor]

Code that used grid and axis for the specific library (regl,threejs,babylon) was removed and implemented a manually generated grid and axes

Even though opacity in jscad theme is 1 for color1 and 0.5 for color2, the closest match to the color on the website
is 0.2 and 0.1

this is also the start of supporting line-segments geometry type in renderer (currently only threejs viewer)

Opacity per line-segment is tricky and was added only in threejs 127. so splitting the grid into 2 separate set of lines
allows to have different opacity for grid and subgrid via opacity attribute and keep rgb colors. Also this removes the need to use
color per line-segment (no need for an additional buffer with colors).

It remains to be seen if using bunch of lines is a good choice for grid (if it has some perf penalty)

This is also first step towards defining common format for geometries (that uses TypedArrays). https://github.com/jscad/OpenJSCAD.org/blob/proto-web2/packages/web2/geom.format.md

[hrgdavor]

Nothing visual to report as I have recreated succesfully grid and axis in babylon and screen above is representative, but soon the grid and axis will be consistent for all 3 engines. This also will open posibility to allow for more types of grids or axis visualization.

there are 2 major geometries to display:

• mesh
• lines

lines now work in Threejs and babylon but some interesting implementation details came-up.

The minor issue is with a use-case that not used in jscad yet: color per vertex for lines but will likely be present in mesh too.
It seems like colors data buffer uses 4 channels regardless if alpha is used or not. this means worker will need this type of information when producing buffers. Also this info should be included in output. I have plans to test all 3 engines in parallel at some point, so code needs to be aware if there is need to convert color buffer from/to 3 o4 channels.

Looking at the code, it is definitely 4 channel in babylon.
Threejs changes channels per color depending vertexAlpha.
Regl, I need to see what is or not supported in the shader.

[z3dev]

Colors are convert to RGBA so everything should be fine.

[hrgdavor]

Colors are convert to RGBA so everything should be fine.

Yes, it is not a problem really.
I am just looking to allow for a optimized path so that buffers created by worker can be used without additional convert step.
There are also some differences I think how each handles when general color is used in combo with color per vertex.

[hrgdavor]

ok, this is too freaky so I have to write it down.

I used lines to draw the grid based on the theme, and was getting strange result. babylonjs and threejs were blending the semi transparent grid lines correctly but regl looked different and visually not correct. ... after trying all sorts of things, and inspecting the different it looked like regl was blending twice, once towards white and once more correctly .... after smashing my head on the keyboard for some times the solution that seems to work is:

canvas.style.background = 'black'

I hope this really fixes the issue.

the color [0,0,0,0.5] should not blend like this to the brown background

it should be like this (and it is with the above mentioned trick)

[hrgdavor]

finally one further step was made:

• support for lines (and alpha)
• support for multicolored lines (will need to make a PR for jscad, as it is not properly supported on master)

video shows

• theme switching,
• switching render engines without noticable visual change (that is a good thing :) )

bandicam.2022-04-10.22-39-20-826.mp4

[hrgdavor]

I have just made another step forward: mesh support (but with some quirks ATM)
I have some lighting to fix, and also babylonjs for some weird reason uses left handed system (this adds a bit of complexity to the worker to support it properly) https://forum.babylonjs.com/t/vertexdata-computenormals-in-right-handed-system/25195

Also when switching viewers, if they are different orientation currently I need to run the script again manually to get properly oriented triangles

bandicam.2022-04-17.21-54-43-627.mp4

[hrgdavor]

after 20 days, another small update

support for paramaters is integrated (there will be UX changes) and work for the purpose of testing worker communication and parameter updating

this also demonstrates how nice it is when worker is not killed, but reused. fast scripts have an option to give instant feedback on param changes and I think this will be also a nice incentive to make faster scripts.

bandicam.2022-05-08.00-09-10-271.mp4

[hrgdavor]

Last missing piece is closer to be ready: Reusable orgit contros, and a bonus a nice camera gizmo.

bandicam.2022-12-01.23-04-12-843.mp4

I have gathered a lot of experience with Monaco, and runnig code with imports in workers. I am able to run code taht usese require but also new ES modules imports, and it is done by convertin ES modules via babel into code with require.

[hrgdavor]

Themes in all 3 engines

bandicam.2022-12-06.23-25-59-113.mp4

[hrgdavor]

some more progress with prototype. Loading of folder projects works, it can handle ESM modules, cjs scripts (require) and even typescript projects. Also worker improvements that allow script developers to optimize execution when parameters change and cache expensive operations.

current jscad

bandicam.2023-01-21.19-05-31-375.mp4

my new prototype is still ugly, but things are progressing bit by bit

It was my mission from the first attempt at making a new jscad prototype to allow script developers to optimize for performance and bling.

in this example I took a complex model and added caching so that model is kept in case only View Options parameters change. Those only affect rotation of the parts.

also I enhanced parameter definition to allow for live updates for any of the parameter (it is not default, but opt-in)

bandicam.2023-01-21.18-58-23-661.mp4

[z3dev]

@hrgdavor have you seen this? Wow!

https://firepad.io/

or this!

https://etherpad.org/

[hrgdavor]

@z3dev it is great to see there is not one but at least two tools like that.

I personally do not have a use-case where I would collaborate on jscad code in this way, but will be willing to assist if someone wants to to set it up.

Thanks for the links, both are very useful in general and it is good to know they exist in case I need a setup like that.