Discover and read the best of Twitter Threads about #WebGL
Most recents (13)
Want to add @threejs / #webgl to your react app, but don't want to code all the 3D?
Here is a @reactjs component for @polygonjs. Just add a <PolygonjsScene> tag, and it will load a 3D scene, which you can design visually.
1/5
Here is a @reactjs component for @polygonjs. Just add a <PolygonjsScene> tag, and it will load a 3D scene, which you can design visually.
1/5
Each scene can be edited separately in a node-based editor. Create custom shaders, geometry processing, object behaviours, animations, and more.
2/5
2/5
And shaders are fun. Specially with SDFs. SDFs are super fun.
3/5
3/5
Last weekend I made a tiny action game about being an alarm clock on wheels.
Presenting: You Are The Snooze Button.
#LDJAM #gamedev #webgl
Presenting: You Are The Snooze Button.
#LDJAM #gamedev #webgl
You Are The Snooze Button can be played in all modern browsers, both desktop and mobile. It only takes a few minutes to finish it.
Play it here: piesku.itch.io/snooze
Play it here: piesku.itch.io/snooze
You Are The Snooze Button is a submission to Ludum Dare 50; the theme was 'Delay the inevitable.' I entered the Compo category, which meant the game had to be made solo, in less than 48 hours, and with original assets only.
ldjam.com/events/ludum-d…
ldjam.com/events/ludum-d…
This weekend I played with 3 things I ♥: machine learning, #generativeart, and the web.
Here's a small neural network running entirely in a #webgl GLSL shader that hallucinates thousands of new handwritten digits in real-time.
How so? 👇🧵
Here's a small neural network running entirely in a #webgl GLSL shader that hallucinates thousands of new handwritten digits in real-time.
How so? 👇🧵
I first learned about CPPNs in "Generating Large Images from Latent Vectors" by @hardmaru back in 2016 (!).
At the time, GANs were stuck at 256px and I was amazed to learn about these fast, high resolution, generators.
blog.otoro.net/2016/04/01/gen…
At the time, GANs were stuck at 256px and I was amazed to learn about these fast, high resolution, generators.
blog.otoro.net/2016/04/01/gen…
The fact that they operate on pixel coordinates makes them particularly good candidates for GLSL shaders.
(figure by @hardmaru)
(figure by @hardmaru)
After a year of intense collaboration with the @expo2020dubai teams, the most ambitious and challenging project we have been lucky to ever collaborate on is now public: an interactive content platform paired with a #webgl 3D replica of the actual expo site in Dubaï.
[ thread👇]
[ thread👇]
2/11
Just the sheer size of it defies what we have been up to until today. 70 custom pavilions, 85 thematic pavilions, 2 parks, 4 main thematic pavilions, 1 exhibition center. All of them re-modeled, textured, lit, and integrated into a sturdy #webgl-based universe.
Just the sheer size of it defies what we have been up to until today. 70 custom pavilions, 85 thematic pavilions, 2 parks, 4 main thematic pavilions, 1 exhibition center. All of them re-modeled, textured, lit, and integrated into a sturdy #webgl-based universe.
3/11
The @expo2020dubai dimensions being so large we had to divide exploration into 5 distinct districts. Each of them harbored dozens of those high-definition pavilions.
The @expo2020dubai dimensions being so large we had to divide exploration into 5 distinct districts. Each of them harbored dozens of those high-definition pavilions.
ESCAPE is a 2.5D puzzle platformer in 13KB of HTML and JS (zipped) by @michalbe and myself. It's a short story about wildlife and nature on Earth after mankind leaves for good. You can play it right now in the browser on desktop and mobile.
#js13k #gamedev #javascript #webgl
#js13k #gamedev #javascript #webgl
In ESCAPE, you solve environmental puzzles as you progress through a misty world abandoned by people. We were inspired by games like @Playdead's INSIDE and movies like @bladerunner, and we tried to convey a sense of loneliness, remorse, and confusion.
#js13k #gamedev #webgl
#js13k #gamedev #webgl
ESCAPE fits into a 13KB Zip, but we built it using fully-featured tools. All our assets, props and scenes are built in Blender and imported into the game as GLTFs. They take up a large part of our size budget, leaving even less space for the engine code and game logic.
#js13k
#js13k
LAUNCH TRAILER
Across The Multiverse
A free in-browser game across infinite universes procedurally generated.
Go from universe to universe and discover the origin of everything.
buff.ly/3z2qd5I
#javascript #threejs #webgl #webdev #gamedev
🔊🔊🔊 buff.ly/3nsPUKg
Across The Multiverse
A free in-browser game across infinite universes procedurally generated.
Go from universe to universe and discover the origin of everything.
buff.ly/3z2qd5I
#javascript #threejs #webgl #webdev #gamedev
🔊🔊🔊 buff.ly/3nsPUKg
So. I have a lot of things to say.
First of all, twitter video resolution will destroy the quality of the launch trailer. So if you want to watch a better quality trailer, fullscreen, here's the official link to the YouTube video.
bit.ly/3k364rK
First of all, twitter video resolution will destroy the quality of the launch trailer. So if you want to watch a better quality trailer, fullscreen, here's the official link to the YouTube video.
bit.ly/3k364rK
Then, i wanna thanks the few people that accepted to play the beta.
@davrous @benjamincode @manekinekko @bruno_simon
Most people ignored my request for help, meanwhile those people help me transform a buggy piece of trash to a playable game.
Thank you very much to all of you.
@davrous @benjamincode @manekinekko @bruno_simon
Most people ignored my request for help, meanwhile those people help me transform a buggy piece of trash to a playable game.
Thank you very much to all of you.
4 years ago I started implementing an entire #linux #wayland display server in the browser because "wouldn't it be cool if ...", but I never really shared my experiences that eventually lead me to implement a #kubernetes powered cloud desktop computer. 🧵👇
I'll try to keep these posts chronologically but most comes from memory so I apologize in advance. ;)
👋🏾 Hello Twitter,
Our website no-fishing.net recently got some awards and got featured in a @AWWWARDS review
So, I thought about compiling a mega thread to describe a bit of our creative process and how we tackled challenges
Let’s go! 🧵👇🏾
Our website no-fishing.net recently got some awards and got featured in a @AWWWARDS review
So, I thought about compiling a mega thread to describe a bit of our creative process and how we tackled challenges
Let’s go! 🧵👇🏾
From the very beginning, we wanted a bold visualization to raise awareness about Sea Shepherd actions.
In the first hour of brainstorming with @LouisAnsa and @Arnvvd_ , we decided to have this planet made of fishing net and those boats «cleaning» the sea.
In the first hour of brainstorming with @LouisAnsa and @Arnvvd_ , we decided to have this planet made of fishing net and those boats «cleaning» the sea.
@figmadesign is always our weapon of choice from ideation to design screens.
Its collaborative features allow us to quickly discuss and iterate on the same base.
First of all, we wanted this website to work on mobile
Its collaborative features allow us to quickly discuss and iterate on the same base.
First of all, we wanted this website to work on mobile
Here's a complete thread over naoz.live the persistent #WebGL-powered digital venue we built for and with the team of @tomorrowland.
👇
👇
Let's start with some high definition screenshots from the cinematic mode (stop moving your mouse on the island level and wait)
We simulated depth of field through the use of a painted blurred skybox, but also a second reflection map to use on the glass materials. Allowing us to create a better sense of realism
🌲🌳🏝️
Starting this thread with more insights about our collaboration with @tomorrowland 's team on papilionem.tomorrowland.com, their first digital edition ever.
Starting with a few stills extracted from the built-in cinematic mode for long inactivity on the map level.
👇
Starting this thread with more insights about our collaboration with @tomorrowland 's team on papilionem.tomorrowland.com, their first digital edition ever.
Starting with a few stills extracted from the built-in cinematic mode for long inactivity on the map level.
👇
Lots of energy has been poured into making sure the whole thing was not only as immersive as possible, but also as usable and optimized as it can be.
A GUI has been built pretty early in the process to allow the design and the dev team to seamlessly collaborate without making the other lose too much time with unnecessary back and forth. We could locally tweak parameters, positionings, textures, etc... #webgl #Tomorrowland2020
Some #webgl / #threejs insights about the initial implementation of the doggo scene on dogstudio.co (thread)
It first started as a weekend experiment based on @thespite 's article on Matcaps / Litsphere / Spherical environment map clicktorelease.com/blog/creating-… with some additional bells and whistles.
Matcaps are very interesting because this technique allows us to efficiently simulate complex lighting conditions, and they can be drawn by hand (as they were on the website) or made by taking pictures of actual/physical spherical objects (as a red marble, see picture).
I am so impressed with @rustlang support for #WebAssembly using the wasm-bindgen tools! Just finished implementing a #WebGL backend to my toy renderer in addition to #OpenGL. This makes it possible to build the same application to both desktop and web!
@rustwasm #rustwasm
@rustwasm #rustwasm
The only difference between the web and desktop version is whether to use OpenGL or WebGL functions (provided by the web-sys crate) and of course window setup and input handling. Worth noticing, the web version seems to perform significantly better than the Mac desktop version!
Live example: asny.github.io/spider-web/ind… (It takes a little while to load, so be patient. Also, it is only tested in Chrome.)
Source code: github.com/asny/Dust (Not really meant to be published - at least not yet - so it is at your own risk!)
Source code: github.com/asny/Dust (Not really meant to be published - at least not yet - so it is at your own risk!)
