#WebGL

https://antimatter15.com/splat/

@lobau Well obviously we had to go looking for a web example.

#webgl

Iván Sánchez Ortega

https://ivansanchez.gitlab.io/gleo/repl.html

In further #gleo news: More minimalist demos in the REPL.

I'm still impressed how well symbol decorators work, at a technical level.

#gischat #WebGL

A code editor in the left half, and a map interface in the right half

One day, one decomposition
A045746: Numbers whose sum of divisors is a triangular number

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/A045746.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/A045746.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #sum #divisors #triangular #graph #threejs #webGL

Decomposition into weight × level + jump of A045746 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A045746 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

Marcel Wiessler

Added support for #blender viewport worldopacity and viewport color today to decide if the camera background should use the environment map or use solid clearflags

Already available via https://docs.needle.tools/blender

#threejs #webgl #needle

#webgl #gamedev #indiedev

Realised characters didn’t look where they were going. Now they do, and go back to idly glancing around after stopping.

(Making a 2D character ”look” at things in a 3D world is a bit of a mindbender, but I hope the way it works here makes good enough sense.)

Forested waterside area in a stylized world. Tiny player character runs around. A portrait frame showing a feminine face with grey hair looks around somewhat convincingly as the character moves.

#webgl #gamedev #indiedev

Random gameplay while I test some video capture settings

Tiny player character illustrated with a portrait of a blue-haired, feminine face. Running in a stylized world across forests, a threshold between drier red terrain and lush green terrain, over a road leading to a glitchy town, and finally to a shore.

One day, one decomposition
A045716: a(n) is the binary order (A029837) of the n-th primorial number, A002110(n)

3D graph, threejs - webGL ?? https://decompwlj.com/3Dgraph/A045716.html
2D graph, first 500 terms ?? https://decompwlj.com/2Dgraph500terms/A045716.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #binary #order #primorial #graph #threejs #webGL

Decomposition into weight × level + jump of A045716 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A045716 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

Brian Jackson

https://glitch.com/~polite-playful-wool

One last update, I added a cloud layer. It isn't volumetric, it's just a flat texture on a third sphere sandwiched between the other two. But using the same cloud texture as an alpha map, bump map, and light map (inverted for ground shadows) really makes this little #WebGL demo pop!

Michael

We’re chugging along with our MR first UI library. Here’s our built in implementation of hand matting!

A good spatial experience is gives a sense that virtual content is truly in the room. If you put your hand in front of an object and it appears behind it, it instantly breaks the illusion.

Hand matting is key to this. Our implementation isn’t perfect, but a little goes a long way!

#spatialweb #spatialcomputing #mr #xr #mixedreality #webXR #webGL #web #webdev #volumetrics #mrjs

A demo of hand matting in MR.js. The video shows the user passing their hands through and around a virtual object. The hands are clipped from the virtual content whenever they’re placed between the object and the user.

Brian Jackson

#shaders #programming #WebGL

Throw some textures on a ball and suddenly it feels a lot more real! Tweaked the atmosphere shader and cleaned up the project if you want to take a look at the #threejs and #glsl #shader code: https://glitch.com/~polite-playful-wool

#FundamentalTheoremOfArithmetic #math #maths #mathematics #sequences #OEIS #NumberTheory #PrimeNumbers #JavaScript #php #graph #3D #classification #primes #threejs #webGL #integer #decomposition #arithmetic #numbers #theory #equation #graphs #sieve

My first, favorite and most important sequence, the weights of prime numbers
➡️ http://oeis.org/A117078

We see prime numbers classified by level and by weight on the graph.

This sequence has led to the decomposition into weight × level + jump ➡️ https://oeis.org/wiki/Decomposition_into_weight_*_level_%2B_jump

@tao

#FundamentalTheoremOfArithmetic #math #maths #mathematics #sequences #OEIS #NumberTheory #PrimeNumbers #JavaScript #php #graph #3D #classification #primes #threejs #webGL #integer #decomposition #arithmetic #numbers #theory #equation #graphs #sieve

#decompwlj
The decomposition into weight × level + jump of natural numbers is the fundamental theorem of arithmetic ; applied to prime numbers, it leads to a new classification of primes

1000 sequences decomposed with 3D graphs (threejs webGL), 2D graphs - CSV, dump, img to download
⬇️ ⬇️
https://decompwlj.com

➡️ OEISWiki page: Decomposition into weight × level + jump : https://oeis.org/wiki/Decomposition_into_weight_*_level_%2B_jump
➡️ arXiv:0711.0865 [math.NT]: Decomposition into weight * level + jump and application to a new classification of primes: https://arxiv.org/abs/0711.0865

@tao

#decompwlj ➡️ https://oeis.org/wiki/Decomposition_into_weight_*_level_%2B_jump

Decomposition into weight × level + jump of prime numbers:

in 3D, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/Prime_numbers.html

a new classification of primes ➡️ https://decompwlj.com/primedecomp.php

@tao

#FundamentalTheoremOfArithmetic #math #maths #mathematics #sequences #OEIS #NumberTheory #PrimeNumbers #JavaScript #php #graph #3D #classification #primes #threejs #webGL #integer #decomposition #arithmetic #numbers #theory #equation #graphs

https://phoboslab.org/wipegame/

4 days ago

One day, one decomposition
A045708: Primes with first digit 2

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/A045708.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/A045708.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #primenumbers #primes #first #digit #graph #threejs #webGL

Decomposition into weight × level + jump of A045708 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A045708 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

Mi Go (teno)

4 days ago

Perhaps you will enjoy playing the original wipEout in your browser.

#webgl #wasm #gaming #ps #playstation #racing #wipeout

5 days ago

One day, one decomposition
A045707: Primes with first digit 1

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/A045707.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/A045707.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #primenumbers #primes #first #digit #graph #threejs #webGL

Decomposition into weight × level + jump of A045707 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A045707 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

Jure Triglav

5 days ago

Alright, making a new digital home. Who should I follow around here to get the latest and greatest in #webgl, #webxr, #threejs, #r3f, #webgpu any _anything_ in between?

Marcel Wiessler

Creating product #microsites right from #blender

:needle: #needle #threejs #webgl #b3d

One day, one decomposition
A045699: Numbers of the form p^2 + q^3, p,q prime

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/A045699.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/A045699.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #form #primes #primenumbers #graph #threejs #webGL

Decomposition into weight × level + jump of A045699 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A045699 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

Jure Triglav

Gave my #JS13K entry a life of its own: https://1k257.com

If you ever played Galcon then this concept should be familiar, but now in 3D and VR.

#webxr #webgl #threejs

Marcel Wiessler

#webgl #glitch #gamedev #portal #threejs

Here is a bit #workflow footage in #unity and #three.
Funcionality is mainly all builtin Needle Engine with #physics, #animation #audio etc + a firstpersoncontroller script from our samples and a little extra script to apply forces to the clicked Rigidbody

I was just in a hurry so it is really not *the* best material 😅 but it was fun and I'm happy with the result given the small time investment

Try live https://lyrical-abrasive-bolt.glitch.me/

#decompwlj ➡️ https://oeis.org/wiki/Decomposition_into_weight_*_level_%2B_jump

Decomposition into weight × level + jump of prime numbers:

in 3D, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/Prime_numbers.html

a new classification of primes ➡️ https://decompwlj.com/primedecomp.php

#FundamentalTheoremOfArithmetic #math #maths #mathematics #sequences #OEIS #NumberTheory #PrimeNumbers #JavaScript #php #graph #3D #classification #primes #threejs #webGL #integer #decomposition #arithmetic #numbers #theory #equation #graphs

#maths #sequences #numbers #graph #sieve #3D #theory #Mathematics #primes #PrimeNumbers #classification #arithmetic #NumberTheory #graphs #OEIS #threejs #webGL #math #integer #decomposition #FundamentalTheoremOfArithmetic #maths

#decompwlj
The decomposition into weight × level + jump of natural numbers is the fundamental theorem of arithmetic ; applied to prime numbers, it leads to a new classification of primes

1000 sequences decomposed with 3D graphs (threejs webGL), 2D graphs - CSV, dump, img to download
⬇️⬇️
https://decompwlj.com

➡️ OEISWiki page: Decomposition into weight × level + jump : https://oeis.org/wiki/Decomposition_into_weight_*_level_%2B_jump
➡️ arXiv:0711.0865 [math.NT]: Decomposition into weight * level + jump and application to a new classification of primes: https://arxiv.org/abs/0711.0865

rich

Nick Shelton (sheltron) has an inspiring blog on his adventures with graphics projects covering #webgl,#vr,#fractals,#dataviz,#generative etc etc! - well worth a dive
https://nshelton.github.io/about/

One day, one decomposition
A045636: Numbers of the form p^2 + q^2, with p and q primes

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/A045636.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/A045636.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #form #primes #primenumbers #graph #threejs #webGL

Decomposition into weight × level + jump of A045636 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A045636 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

#webgl #gamedev #indiedev

Subtle art trick: terrain rim highlighting. Edges facing away from the camera get a little brighter.

Since this art style is watercolour-inspired, I’m letting the “paper colour” shine through as the highlight, as if the edges aren’t quite fully coloured in.

Stylized game world at the edge of taiga and tundra biomes. Patches of woods, and tall cliffs. Desaturated and foggy. A player character portrait with white hair and greenish skin in the middle.

Same as previous image, but now with white highlights on forest patches and ledges facing away-ish from the camera.

Ok, let’s say the haircuts are once again “not broken”. They still look oddly wiglike, but at least curliness works much better than before. The code’s full of magic numbers, so perfection is not in the books either way.

#gamedev #webgl

An array of player characters with much better wigs… I mean haircuts than before. Some are even curly.

#newsletter #webdesign #javascript #webdevelopment #uidesign #ux #css #webgl #technews #ai

Fresh #frontend #news for you!

Collective 783 is out: https://tympanus.net/codrops/collective/collective-783

🎮 From WebGL to WebGPU
📝 A (more) Modern CSS Reset
🌌 Astro + View Transitions Photo Gallery
🍱 Sticky popout bento effect

One day, one decomposition
A045572: Numbers that are odd but not divisible by 5

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/A045572.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/A045572.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #odd #divisible #graph #threejs #webGL

Decomposition into weight × level + jump of A045572 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A045572 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

Kote Isaev

An any #marketing specialist explain me why Nvidia driver installer for windows need to create account, need to ask for my birth date and email?
I mean, what is real use even for NVIDIA from this information?
really, are they hope to sell me some GPU accelerated CUDA stuff (a niche product) or AI crap?
Hey, #NVIDIA I am a WEB DEVELOPER!! and don't interested in all that!
I just wanted to get working a #webgl for testing an app in linux firefox for webgl compatibility via #WSL 2.0 🤯

Wanted to screenshot a neat art trick I found, but I also seem to have broken the hair renderer, which is making the characters look a little… distracting. #gamedev #webgl

Player character portraits with weird, broken, blobby, spiky, multi-color, helmet-like haircuts.

One day, one decomposition
A045542: Sub-perfect powers: perfect powers (squares, cubes etc.) minus 1

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/Sub-perfect_powers.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/Sub-perfect_powers.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #powers #squares #cubes #minus #graph #threejs #webGL

Decomposition into weight × level + jump of sub-perfect powers in 2D (log(weight), log(level))

Decomposition into weight × level + jump of sub-perfect powers in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

David Neto

https://developer.chrome.com/blog/from-webgl-to-webgpu/

Heyo, new blog post "From WebGL to WebGPU".
It highlights key differences between the to web graphics APIs. It's meant to give a flavour. I found it interesting. Take a look.

#WebGPU #WebGL

One day, one decomposition
A045468: Primes congruent to {1, 4} mod 5

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/A045468.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/A045468.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #primes #primenumbers #congruent #graph #threejs #webGL

Decomposition into weight × level + jump of A045468 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A045468 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

Michael

#hiring #jobs #webdevelopment #gamedevelopment #webxr #webgpu #webgl #spatailcomputing #mixedreality #virtualreality #extendedreality #AR #VR #MR #XR #web

Hey folks! we’re hiring!

We’re an early stage startup working to build the #spatailweb

We understand that this is a new space, so we encourage everyone to apply regardless of #xr experience. We want a strong engineer first, XR experience is just a plus.

https://volumetrics.io/careers/

Iván Sánchez Ortega

In today's #gleo news: A bunch more demos in the REPL. There's a minimalistic example for (almost) every symbol in the library.
(I hope to add demos for GeoJSON, vector tiles and clusters a bit later)
https://ivansanchez.gitlab.io/gleo/repl.html
#WebGL #gischat

A code editor in the left, and a map interface in the right.

Inautilo

#Development #Releases
WebKit features in Safari 17.0 · HTML ‘search’, CSS ‘font-size-adjust’, JPEG XL, and much more https://ilo.im/158tl3

_____
#WebDev #Browser #Safari #Frontend #HTML #CSS #JavaScript #WebAPI #WebGL #Video #Audio

https://gltf-transform.dev/

⚠️ glTF Transform v3.7.0 was just published, including upstream fixes to libwebp. If you're processing glTF 3D models or textures from untrusted sources, this is a critical update.

Thanks to @lovell for bringing the fixes in from libwebp to sharp.js so quickly.

#CVE20234863 #libwebp #webp #security #threejs #webgl #gltf #gamedev

Iván Sánchez Ortega

In today's #gleo news: a working REPL, intended to be a showcase for the different symbols.
Still gotta add trivial examples of most symbols, but the complex bits (dynamically loading JS modules without a bundler) are solved.
https://ivansanchez.gitlab.io/gleo/repl.html
#WebGL #gischat

A code editor in the left half, and a map interface on the right half.

Kevin Karhan :verified:

@lea thx.

That soulds like a cool game.

Q: Any "#WebGL #Benchmark Mode" planned?

Lea Rosema

Adding the hashtag #gamedev and #webgl as well as #pixelart ☺️

Also, the webgl renderer is testable here: http://boulders.netlify.app/tests/webgl-renderer/

Randomly generated portrait testing! #webgl #gamedev #screenshotsaturday

An array of player characters standing on a cliff by the sea, each with a pseudo-3D portrait above them, styled somewhere between anime and French comic art. Various skin and hair colors, masculine and feminine features, shifting expressions, wonky hair shapes. Forested island with cliffs in the background, more forests in foreground.

#webdesign #webdevelopment #inspiration #coding #threejs #webgl #javascript #css #technews

Fresh #frontend #news for you!

Collective 782 is out: https://tympanus.net/codrops/collective/collective-782/

🌌 A Gentle Study of Raymarching
🚀 Vue3 + TresJS Starter
🕵️‍♂️ Scroll-Driven Animations Debugger
🌐 Realtime Planet Shader

Kevin Karhan :verified:

@lea makes sense.

Wzat got @fuchsiii a bit excited is #Bun in regards to #WebDevelopment.
https://www.youtube.com/watch?v=dWqNgzZwVJQ

But then again #WebGL basically makes your #Browser and #HTML5 your "#GameEngine"...

:rss: Hacker News

Phaser: A fast, fun and free open source HTML5 game framework
https://phaser.io/
#ycombinator #phaser #html5 #games #framework #library #canvas #webgl #animation #sprites #physics #audio #collision

One day, one decomposition
A038873: Primes p such that 2 is a square mod p; or, primes congruent to {1, 2, 7} mod 8

3D graph, threejs - webGL ➡️ https://decompwlj.com/3Dgraph/A038873.html
2D graph, first 500 terms ➡️ https://decompwlj.com/2Dgraph500terms/A038873.html

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #primes #primenumbers #congruent #modulo #graph #threejs #webGL

Decomposition into weight × level + jump of A038873 in 2D (log(weight), log(level))

Decomposition into weight × level + jump of A038873 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))

Selkcip

I've been working on another project that's not going to make it past the prototype stage: Siege the Means of Production. An RTS/survivors-like about an anarcho-syndicalist commune on legs destroying capitalism.
https://selkcip.itch.io/smp
#itch #game #gamedev #indiedev #indiegame #webgl #anticapitalism

Wijfi

So my @maplibre custom shader layer is *mostly* working except at certain zoom levels where the tesselation from earcut either breaks or isn't being loaded into the buffer correctly. Anyone out there on mastodon have any ideas? Happy to share the repo. #webgl #webgis

Metamere

This last week I've focused on ensuring the #WebGL framebuffer would work for all cases in my #WindsweptInfinity project. There was a rare case where the strokes would sometimes make the pixels permanently maximum opacity and unable to blend. It turned out the opacity was being set to undefined. I was also able to optimize the performance and fix several other important bugs, as well as add an alternating row zone and an offset to the center zone. Here are some examples of those.

#GenerativeArt

offset center zone, and sine wave motion only on every other row.

alternating row zone along with a middle band zone.

alternating row zone for certain motion elements

offset center zone for a more interesting composition.

Lea Rosema

https://codepen.io/learosema/pen/poqbxbM

I created an infinite loop of an animated checker pattern for my #anydayshaders challenge. #webgl #digitalArt

Fresh #frontend #news for you!

Collective 780 is out: https://tympanus.net/codrops/collective/collective-780/

🎨 Bézier Curves
⚙️ CSS Loaders
🌿 Elysium
🔮 Refraction in Three.js

#newsletter #webdev #webdesign #coding #ux #js #css #webgl

Karsten Schmidt

Blog post:
https://github.com/thi-ng/blog/blob/main/2019/20190310-of-umbrellas-transducers-reactive-streams-pt3.md

#HowToThing #011 — Creating a WebGL2 multi-pass shader pipeline using https://thi.ng/webgl to simulate 2D Cellular automata on the GPU. Here we use the classic Game of Life (yawn! ), but the setup allows for easily configurable rules/outcomes...

This new example (#127) is also available as part of the https://thi.ng/umbrella monorepo now...

Demo:
https://demo.thi.ng/umbrella/webgl-game-of-life/

Source code:
https://github.com/thi-ng/umbrella/blob/develop/examples/webgl-game-of-life/src/index.ts

#ThingUmbrella #CellularAutomata #Generative #TypeScript #JavaScript #GLSL #WebGL #Tutorial

Screenshot of the TypeScript source code of the linked example...

Screenshot of the Game of Life simulation in action...

Metamere

Some Bits: Nelson's Linkblog

After my #WebGL framebuffer experiments turned out so well, I decided to switch my #WindsweptInfinity project to that method to get that sweet floating point blending. This allows for lower opacities and for smoother motion since I don't need to skip frames for some elements anymore. Here's a comparison with the outline stroke opacity reduced by 25% and 50%. The strokes would have just disappeared before. I settled on the middle setting to keep it vibrant without being excessive.

#GenerativeArt

the default 2D blending mode which uses unsigned integers for the blending math. Lower opacities end up with odd things going on in the blending, and it can cut out at lower opacities.
2.0 opacity factor

WebGL framebuffers with floating point blending,
1.5 opacity factor

WebGL framebuffers with floating point blending,
1.0 opacity factor

WebLLM: Run an AI in your browser with hardware acceleration
https://webllm.mlc.ai/
#llama2 #webgl #llm #ai #+

#lazyweb #webgl #javascript #webdev

This feels like a stretch but – does the browser give JavaScript any way to read the original color space of an HTMLImageElement or ImageBitmap object?

I can't find anything, without separately loading the whole image into a byte array and parsing file headers. The browser knows, and internal WebGL APIs use the ICC profile. We (#threejs) are working on support for wide gamut color, and this significantly complicates the user-facing API.

CodePen.IO :verify:

RT masuwa | artdirector
#threejs #webgl #glsl #creativecoding
shaderball
@CodePen
https://codepen.io/ma_suwa/pen/QWzwWKo

:sys_twitter: https://twitter.com/masuwa1018/status/1693250501301985726

Media source: https://video.twimg.com/ext_tw_video/1693250147780804608/pu/vid/1316x720/WgynPceZNgvWUDfj.mp4?tag=12

https://github.com/mrdoob/three.js/issues/26479

The new “AgX" tone mapping (available in Blender 4.0 alpha) is an excellent direction. Thanks to @troy_s and all involved there. I'm very interested in seeing a similar option come to three.js, proposed at the link below.

#b3d #blender3d #threejs #webgl #gamedev

Two columns of images, “Filmic” on left and “AgX” on right. Images formed with AgX show better handling of oversaturated highlight, Filmic shows “notorious six” in several cases.

Ben Houston

Updated https://web3dsurvey.com with the new draft #WebGL/#WebGL2 extensions: EXT_clip_control, EXT_depth_clamp, WEBGL_polygon_mode, EXT_texture_mirror_clamp_to_edge, EXT_conservative_depth, NV_shader_noperspective_interpolation, OES_sample_variables, EXT_render_snorm, OES_shader_multisample_interpolation, WEBGL_render_shared_exponent, WEBGL_stencil_texturing.

Fresh #frontend #news for you!

Collective 779 is out: https://tympanus.net/codrops/collective/collective-779/

🖼️ deck․gallery
⚡ Lightning CSS
📝 TextFX
🌌 Opendream

#newsletter #webdev #webdesign #coding #ux #js #css #webgl #threejs

ednl 🇪🇺

If you like #art, #painting or the #Rijksmuseum in #Amsterdam, have a look at @reindernijhoff 's new #WebGL project https://rijkscollection.net/

Inautilo

#Development #Techniques
WebGL image processing · Color correction, image filters, and image effects with GPU shaders https://ilo.im/14uvga

_____
#WebDev #Frontend #WebGL #GLSL #GpuShaders #JavaScript #Images #ImageEffects #ImageFilters #ColorCorrection

Brandon Jones

Had some fun re-visiting an old #WebGL project over the weekend and updating it to #WebGPU (with some improvements).

Not sure if I'm going to take it any further, but I find it's therapeutic to take some small chunk of older code and redo it with all the accumulated tooling and experience you've gained since.

https://github.com/donmccurdy/KTX2-Samples

I published a small collection of KTX2 sample textures. KTX2 textures used in glTF models are simpler — 2D textures and Basis Universal — but KTX2 has more advanced features:

- 1D, 2D, 3D, array, and cubemap textures
- float16 and float32 “HDR” textures
- ASTC, ETC1/2, BC6H, BC7 and other GPU formats
- wide gamut primaries including P3 and BT2020
- …

I compiled samples for many of these, and expect to add more:

#gamedev #webgl #threejs #graphics @thekhronosgroup

Metamere

I was kind of stuck on how to execute my ideas for the #CreativeCoding challenge this week, but since it was my suggestion that was selected for the topic for the #wccChallenge, I had to do something. So I tried using the new #p5js framebuffer feature (thanks @davepagurek!). The way that colors get blended with it is so satisfying. It simplifies things a lot as well. I wish it could work outside of #webGL mode, but I guess I'll start using that mode more.

Watch it here:
https://openprocessing.org/sketch/1986901

A large circle is formed by rotating a smaller circle around the central point. Two smaller circles trace paths in a cycloid and along the outer circle. The texture on the smaller circles comes from the background layer, which has a rotating cube with multi-colored sides, though it is hidden in the background layer behind the large circle. The colors are blended in a swirly manner due to the rotation of the cube and scaling of the buffer and the movement of the circle. The rotation uses perlin noise, so it will never show the same scene twice. The webGL mode allows for floating point calculations for the color blending, which provides much smoother color blends than the default mode.