8 ms·
Global Illumination in WebGL
- echelon 7y agoHas anyone done video compositing in WebGL? I'm very interested in moving video editing tools to the cloud where the heavy rendering can be offloaded and the browser can do lightweight work and scaled down approximations. As a side effect you'd be able to use such an editor on Linux, which while not a central motivator, is compelling.
- BubRoss 7y agoThis has been done but holds very few advantages. Nuke and davinci resolve already run on linux. In either case local bandwidth and multiple cores are the biggest factors. Transferring images back and forth to a server is a waste of time when it takes longer than the processing time.
- antoineMoPa 7y agoI'm working on a web based movie sequencer with special effects as a side project right now and the development of this thing is absolutely doomed. There are tons of problems on this path (codec/browser compatibility, browser bugs, slow performances, firefox unable to go to a desired time fast enough during render, etc.)
- _bxg1 7y agoAmazing. Would be really cool if this got integrated with Three.js, which last I checked doesn't really have a global illumination story.
- mrmaxm 7y agoYou can make demo like this in Three.js already. Difference is, how much labour it takes. None of existing WebGL engines offers real GI.
- bot1 7y agoHonestly, Unity WebGL GI looks way better and probably is also easier to integrate into your mesh modelling/texturing workflow. edit: plus unity is basically free to use
- adam12 7y agoPlease provide a link to a Unity WebGL GI example. Thanks edit: PlayCanvas has a free tier.
- codesushi42 7y agoYep, I don't know why anyone would bother to write their own engine instead, unless it's out of pure curiosity.
- pcwalton 7y agoThis rubs me the wrong way. If people enjoy writing graphics engines, even if it's not economically rational to do so, then they should do that! This is an especially pointless complaint when it comes to video games, because, from a purely economic standpoint, few programmers capable of writing production-quality global illumination should be working on games at all as opposed to getting a job doing something else. (This is a hard pill to swallow, but it is nevertheless true.) The market, especially the indie market, is oversaturated, and, as a result, most people who are highly skilled and involved in game development are, to varying degrees, in it for fun as opposed to money. Since game developers are doing it for fun, why not encourage them to do what they enjoy most?
- ovenchips 7y agoAwesome use of PlayCanvas. Nice job!
- sroussey 7y agoIs the WebGL 2? Does not render in Safari.
- ovenchips 7y agoPlayCanvas uses WebGL 2 by default and falls back to WebGL 1 when it's not available. So in Safari, the renderer will use WebGL 1. Just tried the link on a recent MacBook Pro and an iPhone X and XS and it works fine. What is your OS and Safari version?
- sitharus 7y agoI had that problem, but I'd turned on the experimental WebGL 2.0 support. Turned it off and it ran fine.
- sroussey 7y agoAh! I had that turned on. Thanks! What is the default for these experiments? I can see me turning that one on, but a lot of others are enabled that don’t make sense to me.
- keyle 7y agoThis runs fine in Safari 13.0?
- skocznymroczny 7y agoWorks on my Safari with WebGL 2 off.
- gavanwoolery 7y agoNeat, dont have time to dive in the source right now but whats the trick? Light probes? Edit: Ah, nevermind its one click away: "Illumination technique used here is: Realtime direct shadowmapping with time blended lighmaps for global illumination on: walls, ceiling and floor. For furniture we use spherical harmonics L2 with spatial and time blending for ambient light. Reflections made with time blended box projected cubemaps for image based lighting on physically based materials. Post processing done with color grading by LUT (lookup tables) and vignette."
- westoncb 7y agoI'm surprised I never see playcanvas on HN. It's great technology that should be better known IMO. I first came across it working on a project where I needed to load and animate a number of complex .fbx character models. Spent loads of time trying to do this with three.js (in 2017) + all manner of converters to different formats. I tried every supported loader and they were all broken in various ways. Then somehow I found playcanvas and had the models loaded and working flawlessly in a very short period of time. That experience extended to basically everything else I tried with the system—it's well polished. The editor UI is very nice, and yet remains lightweight in a way where I still feel more like I'm working with something like three.js than e.g. Unity. I personally still prefer three.js for most projects I work on, but it would be a very good option for certain projects and I always keep it in mind. It's also open source: https://github.com/playcanvas https://github.com/playcanvas The downside is for the free tier you get their logo on your app, and you can't hide the source (and anyone can fork your project). On the up-side, the pricing was something like $15/month last time I checked. For a very simple example, here's an asteroids game I spent a few days making with it: https://playcanvas.com/project/479850/overview/rocks https://playcanvas.com/project/479850/overview/rocks (you can play or jump into the editor and modify from that link.)
- crazygringo 7y agoAhhh, your game reminds me of Maelstrom -- even though all the sprites were prerendered, the sprites were rendered in 3D and I spent so many hours on it... https://en.wikipedia.org/wiki/Maelstrom_(1992_video_game) https://en.wikipedia.org/wiki/Maelstrom_(1992_video_game) https://www.youtube.com/watch?v=stxgF2fBq9c https://www.youtube.com/watch?v=stxgF2fBq9c
- westoncb 7y agoNice! That looks like fun. I'd really like to do a more complete asteroids remake and put proper time/thought into the design + aesthetic—it's one of my favorite games strictly for gameplay. I actually did another version 15 years ago, too—incidentally it was my first ever OpenGL app "JAVAsteroids": http://symbolflux.com/statichtml/oldprojects/javasteroids.html http://symbolflux.com/statichtml/oldprojects/javasteroids.ht...
- redka 7y agoVery cool seeing PlayCanvas on HN! I've been using[1] their framework for a several years and I have to say it's the best out there. Only babylon.js comes close for 3d game engines for the browser but PlayCanvas has the Editor[2] which makes a world of a difference. [1] https://redka.games https://redka.games [2] https://developer.playcanvas.com/en/user-manual/designer/ https://developer.playcanvas.com/en/user-manual/designer/
- 1ark 7y agobabylon.js has an editor. http://editor.babylonjs.com/ http://editor.babylonjs.com/
- redka 7y agoThat's true but the editor for babylon.js is very simple. There's a big difference between the two. Apart from the much better UI the Editor for PlayCanvas is well featured with things like uploading and auto-conversion of 3D models and textures, cloud save, light mapping, sprite editor, comprehensive engine configuration, texture compression and much more.
- danmaz74 7y agoI was just researching about babylon and playcanvas for a hobby project I've got in mind - any additional suggestions about why one should choose one instead of the other? For info, I'm a very experienced developer, but I've never really done 3D before.
- wetpaws 7y agoI'm trying to imagine seeing this 10 years ago and my mind gets blown.
- werdnapk 7y agoCrashed my Firefox tab. :(
- solotronics 7y agoAdam Weishaupt strikes again!
- sprash 7y agoThis shows again that the RTX feature on NVidia cards is completely pointless. With some clever hacks you get the same visual fidelity with traditional OpenGL ES and with one order of magnitude better performance.
- thrax 7y agoIt's only pointless to you. It showcases the cards general compute capability. Just because they use it to raytrace doesn't mean you can't use it for physics/mining/ml etc.
- pjmlp 7y agoThis is a tiny demo, not something continuously pushing 4HD soft real time at 90 FPS. Clever hacks are not a replacement for the real deal.
- deleted 7y ago[deleted]
- onion2k 7y agoOnly because the scene is static though. If you wanted good reflections of interactive models on a volumetric blob with a shiny material (eg the T1000 from Terminator 2) in real time you're going to need ray-tracing.
- sprash 7y agoThe Terminator 2 movie is a prime example of using envroinment maps which are supported by OpenGL since day one. There is zero raytracing used in this movie. This shows again that from a psychovisual viewpoint 100% accurate reflections are utterly pointless. Hardware manufacturers should focus on things that really matter which is texture resolution and geometric detail.
- onion2k 7y agoT2 was rendering static environments, not interactive ones in real time. And they used something like 600 SGI computers and months of rendering time to do it. To get that level of graphics in an interactive environment you can't fake it. You need ray-tracing or something similar. As for texture resolution and geometric detail... improvements there are great as well. It's not a "one or the other" choice. Not that any of this matters with regard to Playcanvas because there's no way to access the RTX's ray-tracing pipeline from WebGL.
- ridaj 7y ago20 years ago this kind of stuff took minutes per frame on state-of-the-art SGI workstations. Now I get > 25 fps in my phone browser. Wow.
- mixedbit 7y agoIs the explanation text correct that direct shadowmapping is used only on walls, ceiling and floor? The shadows on furniture also look like they would require shadowmaping.
- mrmaxm 7y agoShadowmapping is used on everything. But GI lightmapping only on walls ceiling and floor.
- mleonhard 7y agoThe color palette makes it look like a video game.