Very cool! However, it took me a while to figure out how this was supposed to be used.
For others:
On desktop, at least, you need to click and drag up/down on the left-hand control that says "swipe" with two arrows.
Or click "Autoplay".
laszlokorte -- can I suggest that the up/down icons should also be clickable/holdable? Since they're icons, they look like buttons, not a "swipe area". And also, maybe default to having autoplay on (but still with the controls visible)? Because it was not clear to me, at first, that the whole point of the site is infinite zoom.
- can you build an entire fps shooter game using web gl? how is physics handled? how is collision detection, enemy AI handled? what kind of frame rate can you expect from a counter strike game made in web gl?
- what is the difference between webgl and threejs and babylonjs?
- what is the man hour effort involved for doing something like this assuming you know html, css and js pretty well but not familiar with gamedev
- is open gl the non web version of web gl? or are they completely different?
Yes, you can definitely build an entire fps game using WebGL for rendering. Typically using JavaScript to handle physics, collision, gameplay, etc.
My current WebGL project is rendering high definition terrain, high-poly animated models, thousands of particles, shaders, sound and more over 150 frames-per-second on a 10 year old PC with a RTX 3060. I have found hardware acceleration is often not enabled in the browser, or Windows will default to using the integrated-graphics card when running the browser and that must be changed in the Windows Graphics Settings.
WebGL is a graphics API for talking right to the graphics card, supported by The Browser.
ThreeJS and BabylonJS are libraries that make it easier to render 2D and 3D graphics, both use WebGL and/or WebGPU behind the scenes for rendering.
Development with HTML/CSS/JavaScript and WebGL is my favorite stack to work with. Development is fast, re-loading is quick, errors and debugging is handled directly in the browsers which have great debug information and performance tracking. No compile time and support on lots of devices.
Yes, OpenGL came first. WebGL is a JavaScript binding of a subset of OpenGL functionalities.
You can implement the graphics part of it using WebGL. It's strictly a graphics API for drawing to the screen. But there are specific libraries for eg physics that you can use in your WebGL 2 app, or entire 3D engines (like those you mentioned) targeting WebGL around. Or you can DIY.
> is open gl the non web version of web gl? or are they completely different?
The current version of WebGL, WebGL 2, is like OpenGL ES 3.0.
> what is the man hour effort involved for doing something like this assuming you know html, css and js pretty well but not familiar with gamedev
Almost trivial with Ai. I just started making games with threejs. threejs is pretty much the abstractions you'd end up writing your self if you wanted to use webgl.
The hard part is refining, polish, creating fun mechanics, and creating assets.
I did my own version too: https://www.youtube.com/watch?v=xxLfDHe93_M
Why not include the Print Gallery image? Or - if worried about copyright, the ability to load an image.
Note to other viewers: getting the Escher-esque effect requires tapping a checkbox at the top of the page (easy to miss on a large monitor).
This is awesome! I'd love to be able to upload a custom image too.
Very cool! However, it took me a while to figure out how this was supposed to be used.
For others:
On desktop, at least, you need to click and drag up/down on the left-hand control that says "swipe" with two arrows.
Or click "Autoplay".
laszlokorte -- can I suggest that the up/down icons should also be clickable/holdable? Since they're icons, they look like buttons, not a "swipe area". And also, maybe default to having autoplay on (but still with the controls visible)? Because it was not clear to me, at first, that the whole point of the site is infinite zoom.
Mouse scroll wheel works, too
Nice! Nit: on mobile (ff if it matters) swiping down for some time makes the edges very grainy.
stupid question to webgl experts here?
- can you build an entire fps shooter game using web gl? how is physics handled? how is collision detection, enemy AI handled? what kind of frame rate can you expect from a counter strike game made in web gl?
- what is the difference between webgl and threejs and babylonjs?
- what is the man hour effort involved for doing something like this assuming you know html, css and js pretty well but not familiar with gamedev
- is open gl the non web version of web gl? or are they completely different?
Very few questions are stupid, these are not.
Yes, you can definitely build an entire fps game using WebGL for rendering. Typically using JavaScript to handle physics, collision, gameplay, etc.
My current WebGL project is rendering high definition terrain, high-poly animated models, thousands of particles, shaders, sound and more over 150 frames-per-second on a 10 year old PC with a RTX 3060. I have found hardware acceleration is often not enabled in the browser, or Windows will default to using the integrated-graphics card when running the browser and that must be changed in the Windows Graphics Settings.
WebGL is a graphics API for talking right to the graphics card, supported by The Browser. ThreeJS and BabylonJS are libraries that make it easier to render 2D and 3D graphics, both use WebGL and/or WebGPU behind the scenes for rendering.
Development with HTML/CSS/JavaScript and WebGL is my favorite stack to work with. Development is fast, re-loading is quick, errors and debugging is handled directly in the browsers which have great debug information and performance tracking. No compile time and support on lots of devices.
Yes, OpenGL came first. WebGL is a JavaScript binding of a subset of OpenGL functionalities.
You can implement the graphics part of it using WebGL. It's strictly a graphics API for drawing to the screen. But there are specific libraries for eg physics that you can use in your WebGL 2 app, or entire 3D engines (like those you mentioned) targeting WebGL around. Or you can DIY.
> is open gl the non web version of web gl? or are they completely different?
The current version of WebGL, WebGL 2, is like OpenGL ES 3.0.
> what is the man hour effort involved for doing something like this assuming you know html, css and js pretty well but not familiar with gamedev
Almost trivial with Ai. I just started making games with threejs. threejs is pretty much the abstractions you'd end up writing your self if you wanted to use webgl.
The hard part is refining, polish, creating fun mechanics, and creating assets.
This is awesome. I'd love to see the original escher image scroll through there.