repost @eziraros
on IG
Turtle Vision #146
April 11, 2023

#generativeart #webgl #fxhash

Did you know that you can attach behaviors to meshes in Babylon?

doc.babylonjs.com/features/fea...

#3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

幽霊さシェーダ

Ghostiness Shader

#しろぽと #shirospot
#ゲーム制作 #gamedev #indiedev
#threejs #webgl
#screenshotsaturday
#スーパーゲ制デー

Babylon.js 9.0 adds several new features that make geospatial graphics WAY easier. This includes an all new GeoSpatial Camera!

#Babylon9Release #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

Built an interactive WebGL visualization of Roots pump mechanics. Explore the rotors and fluid dynamics in real-time from every angle.

Three.js + Blender = technical understanding that actually clicks.

https://www.youtube.com/watch?v=aAeilhp_Gog #WebGL #ThreeJS #Blender

2 weeks to go until the launch of Babylon.js 9.0!!!

#Babylon9Release #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

Built a 3D sales dashboard using React + React Three Fiber

→ Interactive bar chart with drag, zoom & hover
→ Entrance animations + auto-rotation
→ Metallic materials with glow effects
→ Responsive metric cards

All client-side, no backend needed 🚀

#ReactJS #WebGL #FrontendDev

Experimenting creating low-poly trees in #blender with multiple levels of detail and billboards for use in #VR worlds. I'm pretty happy with the results. What do you think?
#indiedev #gamedev #webgl #threejs #blender3d

ColrStudio just got a major update: dozens of bug fixes plus SVG effects like blur, displacement, lighting, and projection.
To make it run smoothly even on mid-range devices, I built a custom WebGL render engine.
Have fun trying it out. app.colrstudio.com
#webgl #svg #fonts #typography

Babylon.js 9.0 makes Area Lights even better with the addition of Textured Area Lights!

#Babylon9Release #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

You asked for it, you got it! Volumetric Lighting is coming with Babylon.js 9.0!!!

#Babylon9Release #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

Collectif Parcelles | Pour un web créatif, éco-responsable et accessible Parcelles, collectif d’artisan·es du web, crée des sites créatifs, éco-responsables et accessibles pour un avenir numérique plus désirable.

That's it. Turns out creative + responsible + accessible is doable. Just takes the right constraints from day one.
→ collectifparcelles.com

Also open for freelance from April : Performance, accessibility, creative web. 👋

#WebGL #a11y #Vuejs #sustainableWeb

[9/9]

Creative Web Development with Three.js and Blender Learn Creative Web Development with Three.js and Blender. freeCodeCamp just posted a beginner-friendly course that will teach you to create an immersive 3D portfolio. You'll begin by diving into Blend...

Creative Web Development with Three.js and Blender

www.freecodecamp.org/news/creativ...

#blender #threejs #webgl

This was more just an experiment to see what a coding agent can do. This used Opus 4.6 to convert my game written in MX2/Vulkan to JavaScript WebGL v2 to run on a browser/cell phone browser. I think it turned out pretty damn close.
#webgl #javascript #puzzlegame #puzzle

Been making some web experiments. tangentlab.github.io/playground/

#webxr #webgl #threejs

Babylon.js 9.0 brings fantastic new updates to the robust new Audio Engine v2! And they're less than a month away!

#Babylon9Release #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

Created a stylized water shader for an upcoming game

#threejs #gamedev #webgl #indiedev

UPSETTER - BIOHACKER [ DUSTRIAL NETART GLITCH MECH CHVRCH ] Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.

Biohack the planet
#art #visuals #processing #webgl #javascript #glitch #dither
https://www.youtube.com/watch?v=vD7vmYBwYj0

Check out the different types of cameras available to you in Babylon.js!

doc.babylonjs.com/features/fea...

#3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

Babylon.js 9.0 is bringing support for OpenPBR helping to ensure your 3D objects look the same everywhere!

#Babylon9Release #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

Cute❤

#しろぽと #shirospot
#ゲーム制作 #gamedev #indiedev
#threejs #webgl
#screenshotsaturday

Table showing the tree-shaken bundle sizes for spark.js with WebGPU and/or WebGL.

I fixed the shader imports to work with static analysis, so you can estimate bundle sizes for WebGL and WebGPU.

In practice, though, shaders are imported dynamically. You only pay for what you use, so the overall size is tiny.

#webgl #webgpu #sparkjs

Supercharge all the particles with Babylon.js 9.0! This next version of the Babylon platform brings particle attractors...invisible forces that push and pull particles to create that perfect effect!

#Babylon9Release #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

Calling all programmers!

Khronos Group is hosting "3D on the Web" -- an evening of talks, demos & networking around #WebGL #WebGPU, #glTF & #Gaussian splats.

March 11 · 5:30-9:30 PM PDT
Easy 12 minute walk from GDC in
San Francisco

Learn more and register: khr.io/1ng
#WebDev #3D #GDC2026

Join us for 3D on the Web on March 11 in San Francisco

Calling all programmers!

Khronos Group is hosting "3D on the Web" -- an evening of talks, demos & networking around #WebGL #WebGPU, #glTF & #Gaussian splats.

March 11 · 5:30-9:30 PM PDT
Easy 12 minute walk from GDC in
San Francisco

Learn more and register […]

[Original post on fosstodon.org]

In just 3 short weeks we'll be releasing Babylon.js 9.0, marking the next evolution in computer graphics on the web!

#Babylon9Release #3D #WebDev #gamedev #indiedev #WebDevelopment #webgl #gamedevelopment #IndieDevs

repost @marioecg on IG
Seven

#creativecoding #creativecodeart #glsl #shaders #webgl #computergraphics #generative #genart #procedural #algorithm

Announcing spark.js 0.1 I'm excited to announce spark.js 0.1, now with WebGL support!

I'm excited to announce the release of spark.js 0.1 now with support for WebGL!

www.ludicon.com/castano/blog...

#webgl #webgpu #sparkjs

Announcing spark.js 0.1 I’m excited to announce spark.js 0.1, now with WebGL support! spark.js has been evolving since I released it last summer. Since then, the WebGPU ecosystem has matured considerably. WebGPU is now more stable and widely supported across browsers and platforms. However, users kept telling me the same thing: even though targeting WebGPU is practical today, most teams have codebases that still rely on WebGL, and that made adoption difficult. For that reason I committed to adding WebGL support. This felt like the right moment to bump the version number to 0.1 and signal that spark.js is production ready, not just experimental. That said, I expect the API to continue evolving based on the features developers need and the friction points they encounter. ## WebGL Support Support for WebGL is the main feature of this update. For a long time I believed WebGL could not update the contents of a block compressed texture from the GPU. I thought it lacked support for Pixel Buffer Objects and didn’t support `EXT_copy_image` either, making it impossible to implement Spark without a CPU read-back. Turns out I was wrong, PBO support is there! I’m not entirely sure where that misconception came from. I was possibly confused because PBO support in WebGL is somewhat limited compared to OpenGL. That may have been reinforced by Unity’s documentation, which reports that WebGL does not have texture copy support, making me think that these limitations imposed a more severe constraint. However, in practice, WebGL provides everything needed to implement copies from UINT textures to block-compressed textures. That said, these copies are more expensive compared to WebGPU and native APIs like Vulkan and D3D12. In WebGPU the shader can output to a buffer and then copy its contents to the compressed texture, and in some native APIs the shader can write to the compressed texture directly. The process in WebGL is far more convoluted. Compute shaders with buffer stores and raw image copies aren’t supported, so the codec has to run as a fragment program and output compressed blocks to a render target, then copy the render target to a pixel buffer object, and the PBO to the final compressed texture. Even with this overhead, real-time compression remains practical and fast enough for most applications. ## Cached Temporary Resources Another issue I wanted to address is the driver overhead when compressing many textures. In my initial implementation I created temporary resources for each texture and destroyed them afterward. To reduce this overhead I added support for caching of the temporary resources. This is particularly critical in WebGL where you need to have both, temporary buffers and render targets. In order to use the feature you have to opt-in when creating the spark object, and you can free the resources explicitly when done: // Create spark object with temp resource caching enabled. const spark = await Spark.create(device, { cacheTempResources: true }) // Load and transcode a bunch of textures at once. const textures = await Promise.all( imageUrls.map(url => spark.encodeTexture(url)) ) // Free cached resources. spark.freeTempResources() ## Other Features Another way to reduce overhead is to allocate the output texture once and reuse it across updates. This is useful for textures whose contents change frequently, and can be achieved by passing the output texture as an option: persistentTexture = spark.encodeTexture(renderTarget, { outputTexture: persistentTexture } ) In the future I’d like to extend this option to support other use cases, for example, encoding regions of a larger texture, which would be helping to support virtual texturing applications. The mipmapping improvements I discussed in my previous post have now been merged. One unexpected issue I encountered is that alpha-weighting and the magic kernel did not play well together. The negative lobes of the kernel would sometimes produce zero or near zero alpha values. These would then cause fireflies when un-pre-multiplying. For now I’m using the alpha-weighted box kernel for textures with alpha. In the future, the right solution is probably to apply the sharpening filter after undoing the alpha pre-multiplication. If you’ve tackled this problem before, I’d love to hear how you approached it. Finally, I’ve also started publishing the examples automatically with a github workflow, so you can explore them without having to checkout the repository or install the required development tools: https://ludicon.github.io/spark.js ## WebGL Demo With WebGL support in place, I’ve updated the gltf-demo to support it. WebGL is used automatically when WebGPU is not supported, but you can also choose it explicitly using the `?renderer=webgl` URL argument: https://ludicon.com/sparkjs/gltf-demo/?renderer=webgl ## Integration with 3D Tiles Renderer To really showcase this release, I wanted to take an existing WebGL application and add real-time texture compression, and I thought there was no better stress test than the 3D Tiles Renderer. Integrating spark.js turned out to be extremely straightforward. The `TilesRenderer` uses three.js’s `GLTFLoader`, and spark already provides a plugin that handles image transcoding automatically, so the initial integration required just a couple of lines of code. There was one gotcha: `TilesRenderer` tracks memory used by loaded tiles to decide when to stream in new tiles or unload existing ones, and it does this by assuming textures have an associated image bitmap. That assumption breaks when transcoding textures with Spark, since the resulting textures are `ExternalTexture` objects. To handle this, the Spark GLTF Plugin now stores the byte length in the texture’s `userData` field: const texture = new THREE.ExternalTexture(textureObject.texture) texture.format = textureObject.format texture.userData.byteLength = textureObject.byteLength And the memory footprint calculation handles this special case: if ( tex instanceof ExternalTexture && tex.userData?.byteLength ) { return tex.userData.byteLength; } The results speak for themselves. Texture compression doesn’t just reduce bandwidth and power consumption, it frees up memory for higher-resolution textures with mipmaps (improving aliasing) and increased geometric detail. As they say, a picture is worth a thousand words: Spark OFF Spark ON Spark OFF Spark OFF Spark ON Spark OFF You can check out the full code changes in our fork of the 3DTilesRendererJS repository: https://github.com/NASA-AMMOS/3DTilesRendererJS/pull/1497 ## See You at GDC Finally, if you would like to see spark.js in person or chat about texture compression, I’ll be at GDC next week and I will be presenting at the 3D on the Web Khronos event: https://www.khronos.org/events/3d-on-the-web-2026 Hope to see you there!

I'm excited to announce the release of spark.js 0.1 now with support for WebGL!

www.ludicon.com/castano/blog/2026/03/ann...

Built interactive 3D visualizations for Manafarms' vertical farming pitch. WebGL + Three.js bringing indoor farm systems into real restaurant/hotel environments. Helps stakeholders understand hyperlocal cultivation impact. #WebGL #Blender

https://go.bsky.app/AtwYZbE