Hi guys,
Couple of years ago I had a feeling there is a hole in dev process when it comes to graphics.
Simply put, typing wasnt enough.I needed a tool that interfaces rendered content with the develper in a ore efficient way so I started developing a new IDE.
Heres a preview, some gsap work with DOM and graphics.
What do you use in your stack, and are you satisfied with your current setup?
cool, big respect for the invested effort and passion! 
I hope you’ve used that in production for living, so the work already payed off. #nocode tools are pretty popular nowadays and are getting even more popular in future I think, so it may really make sense to keep working on your IDE, good luck! 
My stack is somewhat standard: WebStorm, Blender, AfterEffects etc. whatever does the job and is in the wild. I’m generally very open to trying out new tools. Up in a while I think it would be nice to have a cool node based three material / shader editor for animated VFX though, something like Blender’s Shader Editor but on top of three.
Pozdrav! 
vscode, but I can’t say that I am happy enough with it, because it’s not support autocompletion in script tags in html. But if you place shaders in .glsl and all the scripts in own files syntax highlights is working.
@cream here issue about node editors in three.js. Several prototypes already exist, community need to polish it and add to the repo.
nope 
but i was aware from the start that its going to be a lengthy project, very wide so Im OK with that. (I was professionally thinking of distancing from programming and IT so this was more like a goodbye party for me :D))
Workflow you mentioned was a problem i wanted to fix, specially when it comes to vectors in the browser(SVG, paths primarily). We have to use a lot of different software to achieve minimal result in the browser. We have 2d, 3d tools lying around for last 40 years, but not for browser dev.
For example : you import 2 objects from blender to three.js enviroment and if you just need a simple alteration (lets say change position of one of them) you have 2 options :
1.go back to blender , make change , reimport
2.make change programmatically, which
makes to code base bigger (just because you wanted to translate an object???).
The workflow problem is same for SVG (which i would like to see replace HTML in the future as latter is a text formatting tool, not something to create GUIs with. If not SVG then a virtual dom rendered on a canvas)
Graphics programming needs a visual tool. Period.
And the tool has to support everything browser supports.
highlighting and glsl file support is working in Bemjax, havent had time for autocomplete and validation, but the architecture is VERY extendable so I hope a user will sort it in the future.
gl pipeline isnt something I excel at
Autocomplete in script tags works fine for me.
In any case, you probably shouldn’t be writing much code inside script tags. The three.js examples are kind of a bad influence in that regard.
bemjaxIDE
Wow, you just type trump and you models started to jump
Autocomplete in script tags works fine for me.
Need to try another settings, thanks.
lolol who knows, maybe “delete” would work also
thanks. I’ve read Dusan’s latest article on Node based shaders with three.js 
will take a better look at what’s already there.
I’m completely with you here. 
I’m not a #nocode guy (anymore), but have spent over a decade with Flash. Lately I was surprised how cool working with something like e.g. Webflow can be (costs and being somehow tied to the ecosystem aside). It’s always a benefit to be able to code, still, a cool #nocode tool can help a lot in certain scenarios. Have to take a closer look at bemjaxIDE. 
I dont think #nocode will happen, ever ( we complicated browser as a platform to much, as a consequence of Internet growing to fast so there was no time to do it differently) but #codeless should of happen already.
For instance if I just want to import a object to three environment why should I setup the scene, renderer etc again and again.
When I realized that there is a big hole in the dev process I started planing.
What a good tool would be like and it came to my mind “Well, you just invented Flash all over again” 
We all know how Flash ended, BUT…the browser has matured in the mean time so it supports APIs that Flash had to introduce 20 years ago.
The problem was that in JS dev we relied on libraries, and everything we need to fix/do/iplement we do on that layer. The layer around that we neglected, thats the IDE.
Majority of IDEs for frontend are just code highlighters with suggestion and FTP.
VS and webstorm are actually the only ones that could carry a name “development enviroment”…and they do not “integrate” much :/.
Bemjax has a distinct workflow, unlike anything else so I really cant wait to see it in the wild.
It handles everything in the same way, and the tools you see in this video are actually user content, its up to thhe user to set it up as he wants so every Bemjax account/instance will be different (according to the user needs)
Its a OS working from the browser, following *nix philosophy, heep everything in small, sustainable simple tools everybody understands.
Nothing to smart :-).
The only thing we are changing in the dev process is that we introduced testing in the start.
Normaly, everything starts with data, we create a interface to change or create data and we make tests to make sure our apps work.
In Bemjax, we test first, to seee what kind of data are we dealing with. You can see this in the begining of the video…i created a greensock tween and passed it to the .inspect() function and IDE recognised it as a gsap tween.
Im ranting already :D, sorry
Soon we will give out first testing accounts to developers with different profiles/dev roles so Im gonna save one for you ( I see on your website you like mixing different tech), if you are interested please PM you e-mail here on or Facebook.
For me, a visual editor where you can also code should be the goal. Like Unity, Unreal etc.
I think the three.js editor is a good start in this direction. However, it needs a lot of work.
For example, there are no docs or tutorials so it’s not appealing to beginners.
I’m using Webstorm. It works very well with picking up all the libraries code snippets. I use to use VSCode but didn’t find it was as useful as Webstorm due to VSCoDe never being able to use code snippets.
Does anyone have an experience using a webgl engine such as https://playcanvas.com/?
My IDE of preference is Visual Code, which i switched to from Sublime.
Literally was about to mention PlayCanvas, I’m actually building a client project with PlayCanvas right now. Was coming through the Three.JS forums on related shader research. PlayCanvas lacks some great features Three.JS has. But, with physically-based rendering and the ease it provides building a scene and tweaking materials is a godsend. Helps me as a developer collaborating with a design team, I can let the designers make it look good, so I can focus on more complex functionalities. Currently, PlayCanvas only support .FBX out of the box, GLTF with manual model loading in-code, so that be a deal breaker (they’re working on it). But, honestly if you’re looking for a something IDE-like with 3D, that sounds a lot like PlayCanvas. Not saying Three.JS doesn’t have decent workflows, I only have hobby experience with Three.JS tbh.
My (mostly web, less 3D) setup is VSCode with several extensions like the Vim emulator, and emmet to make it more to my liking. But, honestly I do most of my debugging in the browser and not in VSCode, so less IDE, more editor.
Edit: PlayCanvas now has built-in glTF support and recommends it over FBX.
Just watched the promotion video, indeed, that IDE looks pretty neat, perfect reference for an open source editor . How widespread is it? Never heard of it to be honest. 
Yeah, it’s pretty much all open-source which is impressive considering it’s still a paid product as well. I’m honestly not sure how widespread, came across it when evaluating solutions. I wouldn’t be the one to know what’s big in the WebGL industry though, personally more of a web dev. But, Mozilla recently did a WebGL 2.0 demo using PlayCanvas, so it may continue to gain momentum if they continue to work on it.
Interesting, i didn’t realize it was open source. I think there were a lot of these engines around at one point built by startups, and all using three.js, but not many of them seem to have survived. Either sketchfab or playcanvas forked three according to some rumors and if memory servers me correctly.
Unity can build for WebGL as a target can this be said it’s analogous to what three.js does? Ie. if three had a GUI editor the same as Unity does, what would be some of the reasons for a user to choose this editor over Unity? I figure it would mostly be licensing? But I also wonder if an open source project such as three.js would ever have as robust of a GUI as a company like Unity can afford to develop?
Blender is interesting, as I see it competing with say Autodesk’s products, but the very nature of such an application is that it requires a GUI, it wouldn’t make much sense to make 3d models of aliens and guns programatically
I like three.js for web development because it’s lightweight, if this could somehow be combined with something as rich as Unity’s editor, that would be marvelous!
Playcanvas engine is open source. The editor is not:
Looks like $280/yr with restrictions or $600/yr without restrictions.
Have we missed the point in this thread that this guy built an amazing editor? @[bemjaxIDE] this is a really cool project, good job. my stack consists of 1: vim and 2: a browser, so a tool like this looks really great. Hope to see more in the future.
Lol tnx for support…We are light years ahead of projects like playcanvas in technical sense (features->capabilities), Bemjax is an OS working from the browser so Its a layer around everything we use today. Playcanvas editor looks nice, at least at a glance but stuff they are showcasing are things any 3d editor would do in the last 30 years, except its rendered on webGL and works in the browser.
From UX point it looks like three*s editor with a little different GUI layout.
Havent looked in the specs but PBR is really neat.
BUT…rendering isnt something i would put my money in because we are in the browser and we will never get close to unreal and simmilar engines, at least not with this setup/stack/browser technology.
Maybe in next years when different browsers/layout engines and languages emerge.
Also with streaming services that render on the server ( nvidia now) I guess we lost that race.
Integration is the key word in IDE, because frontend dev workflow is complicated.
How does this tool fit in your current stack, how it integrates withh other tools, and how it handles other content sound, video and, most important, code.
Im an older guy so Ive been around since Internet wasn’t called Internet and have witnessed a downgrade in tools integration. I could of done more in the mid 90ies (not for browser, but for OS as this was the platform at the time) than I can today with current tools for the browser (libs, IDEs)…things got really complicated.
Bemjax tryes to cope with that on a totally different way. It has a distinct workflow based on different principles. And, most important it handles everything in the same way.
It doesnt matter if you are making a simple list in Vue, a sound player, an SVG animation, 3D game.
Also what it is unprecedented at are the prototyping capabilities.
Actually the only tool in last decade that really amazed me was Unity when it first got out, it was really nice to do something once and cross compile it. Really a game changer at the time.
