A 3D sculpting web application
stephaneginier.com
stephaneginier.com
webgl was a good idea and I dedicated years to trying to make interactive browser applications, and now I've concluded that if I want to make product in time, that works for decades, on all platforms, at speed, I will use systems like Qt for desktop apps, not browsers.
For me, that's amazing. There's a lot of value in having options (with low friction) for casual creators like myself.
Agree with your point about dev experience being painful though.
The web rules.
Chromebooks are everywhere these days. They do have to fallback on Android apps and Debian apps sometimes, but this is also what makes them so versatile.
Now I can open a browser and have a 3D sculpting application and nobody needs to care what OS I run. You can denigrate webapps all you want, I won't hear you over the sound of how happy I am that I don't have to dual-boot with Windows anymore.
This is all going through IPC in a command buffer like architecture where the display lists are formed in another process. Where you can have several framebuffers that you can render 2d, 3d and intermix them in a beautiful final output thanks to the sophisticated compositor.
The state-of-the-art on desktop was a in-process direct rendering instead.
Modern browser are wonderful machines, we should be glad we are seing this happening.
Also, Google contantly are being bashed on HN, i know, who like the big man right? i think this we should thank them for pushing the envelope on a open platform, that will probably even eat the closed app platform with time.
Just Dorothy-like hackers would'nt be able to fight back the awful world of closed source applications platform if browsers were not what they are today. We are constantly in danger to get back to where we were in the nineties. If this whole "cloud computer" paradigm were not enough of a threat to a world of global scale control of the digital life of billions by only a few.
Its good to be skeptic and bash the big man, its important to fight back, but lets respect and give them props for the things they do right. A piece of software that has value on its own by the way.
Giving your presented credentials, you should now how and why this is not exactly the same.
Software is constant automation and improvement, and if the things we suffer to do today, that can make someone be considered special and be well payed, will be achieved easily by children in the future, its just because of the hard work of the pioneers that suffered but persisted in the beginning.
The Unix was there in the 70's, and yet we celebrate "the same" old thing today, because its open, its available and even kids can change and compile it in its Linux incarnation.
So while it maybe looks the same under the surface, its definitely not the same, and we should be glad every time technology gets popular and easy, because its not easy to get there.
Edit: Sorry for the way i've started my first commentary, it was rude and unnecessary, rather you knew or not anything about the matter.
this is incredibly better than the "web scenario" which is (and I got burned by this two times - there won't ever be a third time), "you come back to the app two months later, except the company has shut down and all your data removed" or "you come back to the app two months later, but you now have to pay for the superior tier if you want to be able to edit your stuff because some features you were using have been moved in that tier" (hello genmymodel), or "you come back to the app two months later and it's now super slow and has a couple annoying bugs but you can't downgrade because it's a web app" (hello asana).
I don't have any of the problems you describe with updates or installers.
I worked a demo booth for AutoDesk in the mid-90's. We had just released a Gouraud renderer for the Intel Pentium Pro launch and people were amazed to watch it render a few thousand polys (no textures, just interpolated vertex shading) in a few seconds.
This web app made my jaw literally drop.
One of the older popular tools like this on the desktop is called ZBrush and they have a free version called ZBrushCoreMini limited to non-commercial usage scenarios: https://zbrushcore.com/mini/
Clearly one of the benefits of SculptGL despite not having every feature out there, is that it is free for commercial use. One example is Sketchfab using an older version of SculptGL here: https://labs.sketchfab.com/sculptfab/
You can download a standalone version here: https://stephaneginier.com/archive/standalone/
And his mobile app version: https://nomadsculpt.com/
it reminds me of a recent experiment I did with raymarching & sculpting:
https://nico-boo.com/claysculpter/ (warning: only for desktop and not heavily tested)
You're using triangles? Did you make any progress with raymarching? I read you did some experiments.
Nice project!
sculptgl is based on polygons (tris/quads only, and using webgl for rendering).
As for the other project it was just as a quick and dirty experiments :). https://stephaneginier.com/archive/editSDF/ https://www.shadertoy.com/view/WtjXDW On Unity there is Clayxel and more recently Mudbun, both based on implicit surfaces.
And obviously, the Dreams presentation which is an inspirational must see https://www.youtube.com/watch?v=u9KNtnCZDMI
Did you explore splatter rendering?
Before they hired the author, I worked with the Sketchfab team to deliver a version of the app that published to Sketchfab https://labs.sketchfab.com/sculptfab/
We were an early customer of the API and were using it in ways it wasn't designed for so we encountered some problems early on ... the team over there consistently under-promised[1] and way-over-delivered. They were purchased by a competitor, recently (not Autodesk). The company that approached us to build a 3D customization tool on the web specifically required we use Onshape because they were a Solidworks shop and they were loving the web app's compatibility and features.
[0] It's hard to find a good name for what, exactly, it is. Storage-wise, a document in Onshape closely resembles a git repository. Under the hood, much/most/all? appears to be made up of FeatureScript, which is a language expressing transforms/operations on components within one or many documents (I'm not a cad guy/was concerned mostly with the back-end API, not the make-up of the docs, so this is probably partly wrong -- google FeatureScript for more info).
[1] That's not a back-handed compliment -- they were careful to manage expecatations about a major performance issue being resolved in code by a specific date. They often "hinted" at dates, and the dates they hinted at were hit, usually in advance. For the worst of the performance issues, they spent hours with us working out a suitable workaround that eliminated the latency.
They probably killed force touch on the newer models only.
https://www.khronos.org/webgl/wiki/BlacklistsAndWhitelists
And the more detailed list for firefox (though only NVIDIA and Intel GPUs on MacOS are reported to be disabled for security issues):
https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drive...
For the second link > This page was last modified on 9 March 2016
There's no way that I'm aware of to find the complete black/whitelists of each browser. The only way I've been able to figure it out before is to disable the blacklisting and see how performance in a WebGL app fairs.
Two minor suggestions: 1. On mac the undo mappings would normally be CMD+Z. Not sure if it's possible to map this in the browser or not but took me a moment to find Ctrl+Z (via menus).
2. The starting geometry is a circle with a flesh-colored tone. Not sure if this is randomized but it leads to quickly creating weird human-ish shapes. It also defaults to a mirrored circular/spherical brush. May want to consider a different default tone as you'll likely get lots of female anatomy drawn w/ the current settings.
It's amazing what we can do in a browser these days[0] and it's only outpaced by how quickly, it seems, those things become dramatically better.
I worked on a project to build a web-based 3D configuration tool for designing custom industrial objects to be 3D printed (aluminum/various metals and some plastics for prototyping). During the two-year span of developing this solution (which went over due to non-3D-in-the-browser-related issues), the various technologies we were working with went from "we really need to do everything except for the final rendering of the (simplified) object on the client" to "it's less code/moving parts to do most of it on the client-side ... and moar textures". I believe the customer did just that a year later.
[0] 3D Accelerated and it works in Linux on the desktop ... in Firefox ... brilliantly. It's not that I'm surprised Firefox works -- it's always been fine for me on Windows. It's the combination of Linux and Firefox on nvidia hardware that usually results in odd tearing/performance issues in FF for me. Since recent updates and enabling experimental acceleration, it's buttery smooth.
Since the quality is so high, I’ll add this bug report.
Bug report:
- iPhone
- Zoom in to change brush
- Can’t zoom page afterwords
Only critique is you need to allow for the brushes to be bigger. Specifically for the move tool as that is how I was taught to vreate primary forms before going in with any brushes.
You don't need a framework for anything. You need to know your problem and have an idea on how to solve it.
Quick sketch:
- Learn WebGL (or OpenGL and transition)
- Learn some linear algebra, don't worry, all you need is 4D matrices, so you don't need to know proofs, just how to use it.
- Create a 3D graphics engine like this: https://www.youtube.com/watch?v=PH6-dLvZEiA (that's mine, I haven't progressed since in this area, so this is the level I'm at, enough to know what fields are needed to learn this but not enough to know all the specific techniques)
- Look up names/techniques people have used to create something specific like OPs post, see [1]
- Learn that stuff as well / related math
- Build it in WebGL
[1] https://www.youtube.com/watch?v=J9CExYF8yrU&ab_channel=V%C3%...
To do something like this, you need to know a bit of WebGL and a bit of JS. No frameworks really needed at this level. The best guide to WebGL I know of is this:
https://webgl2fundamentals.org/
Complexity starts when the height map isn't enough and you want to make arcs or otherwise arbitrarily shaped structures. This is where you'd need a framework, unless you want to implement all the math and glsl yourself.
And as always, the idea is really the 1% of the work. Anyone can say "it's just a height map on a sphere". 99% of the work is materialising the idea, debugging glsl, fixing ugly bugs on smartphones and esotheric browsers, dealing with partial WebGL API and so on.
How do you even start? I started with `three.js` about two years ago and a ton of documentation. I didn't write a sculpting tool, but I wrote a PoC for a tool that "renders" custom tessellated data, pan/tilt/zoom, by the documentation from their site in about a weeks' time[0].
[0] I do more back-end than front-end, but I did the PoC in React/TypeScript with a kludge for the Canvas and a few ugly functions for handling loading/camera positions.