Masthash

#webgl

Rémi Eismann
3 hours ago

One day, one decomposition
A024898: Numbers k such that 6*k - 1 is prime

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

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

Decomposition into weight × level + jump of A024898 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A024898 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
1 day ago

Decomposition into weight × level + jump of prime numbers:

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

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

#decompwlj #math #mathematics #sequences #NumberTheory #PrimeNumbers #JavaScript #php #graph #3D #classification #primes #threejs #webGL

Decomposition into weight × level + jump of prime numbers in 2D commented with OEIS sequences - classification of prime numbers (log(weight), log(level))
Decomposition into weight × level + jump of prime numbers in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Decomposition into weight × level + jump of prime numbers in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
1 day ago

One day, one decomposition
A024894: Numbers k such that 5*k + 1 is prime

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

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #prime #PrimeNumbers #graph #threejs #webGL

Decomposition into weight × level + jump of A024894 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A024894 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
2 days ago

One day, one decomposition
A024675: Average of two consecutive odd primes

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

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #average #primes #PrimeNumbers #Interprimes #graph #threejs #webGL

Decomposition into weight × level + jump of A024675 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A024675 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
McFunkypants the #gamedev
2 days ago

Live stream starting right now! (friday noon pdt)

https://www.twitch.tv/dotbigbang

- see the games made for the COMBAT JAM (including the one I made!)

-check out new features of #dotbigbang

- hang out with nice folks who #gamedev with #typescript and #webgl

iX Magazin
3 days ago

Rio: Erster Terminal mit WebGPU in Entwicklung

Terminals mit GPU-Support sind angesagt – und jetzt geht mit Rio das erste Projekt auf Basis von WebGPU und Rust an den Start.

https://www.heise.de/news/Rio-Erster-Terminal-mit-WebGPU-in-Entwicklung-9067499.html?wt_mc=sm.red.ho.mastodon.mastodon.md_beitraege.md_beitraege

#Browser #Grafikchip #Rust #WebGL #news

Rémi Eismann
3 days ago

One day, one decomposition
A024619: Numbers that are not powers of primes p^k (k >= 0)

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

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

Decomposition into weight × level + jump of A024619 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A024619 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
4 days ago

One day, one decomposition
A024365: Areas of right triangles with coprime integer sides

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

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

Decomposition into weight × level + jump of A024365 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A024365 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
CodePen.IO :verify:
4 days ago

RT Matthias Hurrle
Re A fragment shader which features an octahedron flying through a procedurally generated crevice.
https://codepen.io/atzedent/pen/PoyLwoW via @CodePen #webgl #shader #animation3d

:sys_twitter: https://twitter.com/softwaretogo/status/1661477692754259969

Rémi Eismann
5 days ago

Decomposition into weight × level + jump of prime numbers:

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

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

#decompwlj #math #mathematics #sequences #NumberTheory #PrimeNumbers #JavaScript #php #graph #3D #classification #primes #threejs #webGL

Decomposition into weight × level + jump of prime numbers in 2D commented with OEIS sequences - classification of prime numbers (log(weight), log(level))
Decomposition into weight × level + jump of prime numbers in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Decomposition into weight × level + jump of prime numbers in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Lat × Long
5 days ago

MapLibre's latest release wraps the transition for WebGL2, introduces a way to manipulate camera view when the camera state is stored externally, better colour interpolation and performance.

https://maplibre.org/news/2023-05-23-maplibre-gl-js-v3/

#opensource #webgl

Rémi Eismann
5 days ago

One day, one decomposition
A023733: Numbers with no 3's in base 5 expansion

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

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #base #expansion #graph #threejs #webGL

Decomposition into weight × level + jump of A023733 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023733 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
CodePen.IO :verify:
6 days ago

RT Ksenia Kondrashova
Have you ever been watched by @threejs' Torus Knot? I've got this silly demo playing with mesh normals and ShaderMaterial
Live demo & source code: https://codepen.io/ksenia-k/pen/gOBqPWX
Hosted on @CodePen
#webgl #glsl #threejs #shader https://t.co/DjGL45Irbr

:sys_twitter: https://twitter.com/uuuuuulala/status/1660983374561918980

Media source: https://video.twimg.com/ext_tw_video/1660982054652092417/pu/vid/1278x720/FOc7XxJcorMunnD7.mp4?tag=12
Ghadeer Abou-Saleh
6 days ago

Just a hybrid between two other
#glsl #shaders I wrote:

https://www.shadertoy.com/view/dty3Wd

I was just bored and curious how it would look like to mix the two shaders somehow.

#shadertoy #webgl

Rémi Eismann
6 days ago

One day, one decomposition
A023705: Numbers with no 0's in base 4 expansion

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

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #base #expansion #graph #threejs #webGL

Decomposition into weight × level + jump of A023705 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023705 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
6 days ago

Had to debug a weird (and annoying) problem on a #Linux laptop on the weekend: when visiting a certain website in #Firefox and scrolling past a certain position, the entire desktop would get _really_ sluggish (like: one frame every 5 seconds). Minimizing the FF window or scrolling away in the tab would fix it again.

Interestingly, the problem disappeared when starting FF in "Safe Mode".

In the end the solution was just to disable #WebGL (about:config -> webgl.disable = true). Yay success!

Paul-Jan
6 days ago

Last weekend at Outline we (Slipstream & TUHB) released a tribute to the classic 2012 invite "Bring me a flower"

So, Much. Singing 🎶.

This tune will remain burned into our brains for a while!

🎬 https://www.youtube.com/watch?v=a7t4sAJwL-Y
🌐 https://tuhb.org/demo/habeasflores/
💾 https://www.tuhb.org/demo/slipstream_tuhb_habeas_flores.zip

#demoscene #webgl

Marcel Wiessler
1 week ago

Create a tiny Needle Engine #threejs scene on Stackblitz with https://engine.needle.tools/new

I'm also experimenting with creating little projects for the docs on the fly: https://engine.needle.tools/docs/scripting-examples.html

#webgl

Rémi Eismann
1 week ago

One day, one decomposition
A023689: Numbers with exactly 7 ones in binary expansion

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

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

Decomposition into weight × level + jump of A023689 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023689 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
1 week ago

One day, one decomposition
A023688: Numbers with exactly 6 ones in binary expansion

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

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

Decomposition into weight × level + jump of A023688 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023688 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
1 week ago

One day, one decomposition
A023271: Primes p such that p, p+6, p+12, p+18 are all primes

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

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

Decomposition into weight × level + jump of A023271 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023271 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
1 week ago

One day, one decomposition
A023241: Primes p such that p+6 and p+12 are also primes

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

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

Decomposition into weight × level + jump of A023241 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023241 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
2 weeks ago

One day, one decomposition
A023240: Primes p such that 10*p + 9 is also prime

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

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

Decomposition into weight × level + jump of A023240 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023240 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
2 weeks ago

One day, one decomposition
A023225: Primes p such that 7*p + 6 is also prime

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

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

Decomposition into weight × level + jump of A023225 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023225 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
2 weeks ago

One day, one decomposition
A023205: Numbers m such that m and 2*m + 5 are both prime

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

#decompwlj #maths #mathematics #sequence #OEIS #javascript #php #3D #numbers #PrimeNumbers #prime #graph #threejs #webGL

Decomposition into weight × level + jump of A023205 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023205 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Bob Williams
2 weeks ago

One bonus of focusing on the #WebGL build of the game is never having to open XCode and Android studio. Not missing that at all. #gameDev

streets.gl una nuova webapp di visualizzazione #3D basata su #webGL ed #openstreetmap molto realistica
Qui per visitare Trento
https://streets.gl/#46.06509,11.12311,45.00,0.00,3952.77

flaeky pancako
2 weeks ago

#godot #webgl #housedesign #prsm
so while in berlin i cant build the house physically so ashy and i are trying to build it digitally while we wait :)
link goes to a godot html5 build to look around the house, should work with mobile, let me know if it works for you !
http://7rnx.net/fleeky-pub/house-mobile/

Rémi Eismann
2 weeks ago

One day, one decomposition
A023204: Primes p such that 2*p + 3 is also prime

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

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

Decomposition into weight × level + jump of A023204 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023204 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Mika
2 weeks ago

Hex grid on a sphere now. I tried to "wing it" but sometimes its best to just rtm: https://en.wikipedia.org/wiki/Spherical_coordinate_system

#CreativeCoding #ElmLang #WebGL

Hexagonal Grid mapped onto a (hemi) sphere demoed by the author by spinning it randomly.
Rémi Eismann
2 weeks ago

Decomposition into weight × level + jump of prime numbers:

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

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

#decompwlj #math #mathematics #sequences #NumberTheory #PrimeNumbers #JavaScript #php #graph #3D #classification #primes #threejs #webGL

Decomposition into weight × level + jump of prime numbers in 2D commented with OEIS sequences - classification of prime numbers (log(weight), log(level))
Decomposition into weight × level + jump of prime numbers in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Decomposition into weight × level + jump of prime numbers in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
2 weeks ago

One day, one decomposition
A023201: Primes p such that p + 6 is also prime (Lesser of a pair of sexy primes)

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

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

Decomposition into weight × level + jump of A023201 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023201 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Rémi Eismann
2 weeks ago

One day, one decomposition
A023200: Primes p such that p + 4 is also prime

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

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

Decomposition into weight × level + jump of A023200 in 2D (log(weight), log(level))
Decomposition into weight × level + jump of A023200 in 3D (threejs - WebGL) (log(weight), log(level), log(jump))
Marcel Wiessler
3 weeks ago

Started adding networking

#threejs #webgl #gamedev

AskUbuntu
3 weeks ago

My PC is using my CPU instead of my GPU and I dont know how to fix it #firefox #gpu #gpudriver #webgl

https://askubuntu.com/q/1467487/612

Iván Sánchez Ortega
3 weeks ago

Aquí, preparando demos (aparentemente) chorras para mi chapa de #Gleo + #WebGL en #esLibre @eslibre

Bouncing dither markers on a blue background
Marcel Wiessler
3 weeks ago

Sneak peek at one of the projects that #prefrontalcortex is working on using #NeedleEngine

It is a research project on digital physiotherapeutic breathing therapy for #LongCovid patients using #VR technology

#webgl #webxr #madewithneedle #madewithunity #threejs

Marcel Wiessler
3 weeks ago

With one of the next updates we're adding tree-shaking for rapier

This is reducing the app bundle size significantly when you don't use/need physics (by roughly 2MB without gzip or ~700KB with gzip)

#needle #threejs #webgl

✪ⓗⓞⓛⓞ✪
3 weeks ago
considering making a new 3d work, this time for a purpose.

I have a new engine in the pipeline, however it is newly started and thus incomplete.

ideally would like to implement animation support into three.js for glb files, though that will require a lot of learning.

#webgl #fediart
Inautilo
3 weeks ago

#Development #Evolutions
I want to talk about WebGPU · What the arrival of the new WebGL means for programmers https://ilo.im/12ph6d

_____
#WebGraphics #WebDevelopment #WebDev #Browser #Frontend #JavaScript #TypeScript #Rust #API #WebGPU #WebGL

Leon Radley
3 weeks ago

New version of create-babylon is out, with vite 4.3 and babylon 6.2

Try it out with:
npm init babylon@latest

#babylon
#babylonjs
#3d
#webgl

Marcel Wiessler
4 weeks ago

Lot's of progress on layouts 😊

#threejs #webgl #needle

Jason Pester (GameDev)
4 weeks ago

My Chromium install just updated to 113.0.5672.64 (WebGPU is now enabled by default)

Demos
https://playcanvas.github.io

I can't wait to dive into this code! 🏊‍♂️💦

#GameDev #3D #VR #GPU #WebGPU #WebGL #WebDev #Chromium #Chromium113 #Chrome #Chrome113 #RealTime #Rendering

Screenshot of WebGPU interactive chess board demo in Chromium 113 Web browser
Screenshot of WebGPU interactive area light demo in Chromium 113 Web browser
Google I/O 2023 WebGPU performance improvement example - AI Stable Diffusion 3X faster rendering compared to WebGL
Verekia
4 weeks ago

🎙 The interview with Steven Yau
from PlayCanvas is out! Read about his journey and insights on web games here: https://webgamedev.com/interviews/steven-yau #gamedev #webgl

Verekia
4 weeks ago

💌 The Web Game Dev Newsletter Issue 015 is out! Read it online here: https://webgamedev.com/newsletter/015, and subscribe to get the next ones delivered right to your inbox! 🚀 #babylonjs #threejs #webgl

heise online
4 weeks ago

Kurz informiert: Pressefreieheit, Monopoly Market, WebGPU, Nokia Drohne

Unser werktäglicher News-Überblick fasst die wichtigsten Nachrichten des Tages kurz und knapp zusammen.

https://www.heise.de/news/Kurz-informiert-Pressefreieheit-Monopoly-Market-WebGPU-Nokia-Drohne-8985788.html?wt_mc=sm.red.ho.mastodon.mastodon.md_beitraege.md_beitraege

#Darknet #Drohnen #kurzinformiert #Nokia #Pressefreiheit #WebGL #news

Don McCurdy
4 weeks ago

happy #WebGPU launch day, to all who celebrate 🥳

#threejs #webgl #gamedev #webdev

heise online
4 weeks ago

Chrome 113 unterstützt als erster Browser WebGPU

Browser lernen, mit den Hardware-Funktionen moderner GPUs umzugehen. Das geht allerdings zulasten der Privatsphäre.

https://www.heise.de/news/Chrome-113-unterstuetzt-als-erster-Browser-WebGPU-8985813.html?wt_mc=sm.red.ho.mastodon.mastodon.md_beitraege.md_beitraege

#Browser #Chrome #Google #WebGL #news

Joxean Koret (@matalaz)
4 weeks ago

I have just read about #WebGPU. So I straight went to check if my browsers supported it and how to disable it if it was enabled at all. If it's as "cool" as #WebGL, this will be a source of vulnerabilities for years to come.

Mark Pesce
4 weeks ago

Fifteen years from #VRML to #WebGL. (ping @auradeluxe)
Fifteen years from WebGL to #WebGPU.

https://cohost.org/mcc/post/1406157-i-want-to-talk-about

Karsten Schmidt
4 weeks ago

@jeffpalmer Thanks, Jeff! There're a few things to consider here:

1) The overall approach is definitely aimed at stateless, pure functions for portability & composability (e.g. all of the ~180 functions in https://thi.ng/shader-ast-stdlib are pure)
2) Since #WebGL / #GLSL is only one possible target (albeit the main one, at current), there's no "magic" uniform handling provided (or even possible, at least not in a clean way from the POV of the library).

If you've got functions which do depend on uniforms (or attributes, varyings, all the same), it means these aren't general purpose anyway and so you can as well define them _inside_ the shader's function closure, as shown in the first code example. If you want to or need to define such functions elsewhere (outside), you can also use another technique, shown in the 2nd example. And since it's all just #TypeScript or JavaScript there're a number of other possible solutions too... If none of that helps, then please use the Github forum or create an issue and we can discuss further there... 👍🙏

#ThingUmbrella

Example TypeScript code showing a https://thi.ng/webgl & https://thi.ng/shader-ast shader specification where the entire shader is written in TypeScript (and will then be transpiled to GLSL at runtime):

defShader(gl, {
    vs: "...",
    // this fragment shader AST function receives symbolic references to
    // important GL globals, all declared uniforms, varyings (`ins`) and output variables
    fs: (gl, unis, ins, outs) => {
        // since this is an inner function, we can directly access `unis` without
        // needing to pass them as arguments
        // Note: Currently the uniforms passed in here are all untyped, but you could
        // optionally declare another helper interface for them here...
        const foo = defn("vec3", "myFuncNeedsUniforms", ["float"], (amp) => [
            ret(mul(unis.color, amp)),
        ]);
        // shader-ast function bodies (AST scopes in general) are always arrays...
        // this is the body of the actual fragment shader program
        return [
            // defMain() is just syntax sugar for defining a `main` function
            // the call to foo will be automatically resolved
            defMain(() => [assign(outs.fragColor, vec4(foo(float(0.5)), 1))]),
        ];
    },
    attribs: {
        // ...
    },
    uniforms: {
        // uniform declaration (incl. default value)
        color: ["vec3", [1, 1, 1]],
    },
});
Another example TypeScript code (similar to previous image):

// helper function which receives object of symbolic refs to all uniforms
// and returns object of shader functions...
const withUniforms = (unis: IObjectOf<Sym<any>>) => ({
    foo: defn("vec3", "myFuncNeedsUniforms", ["float"], (amp) => [
        ret(mul(unis.color, amp)),
    ]),
    bar: defn("vec3", "anotherOne", ["float"], (t) => [
        ret(mix(unis.color, vec3(1), t))
    ])
});

defShader(gl, {
    vs: "...",
    fs: (gl, unis, ins, outs) => {
        // obtain helper function(s) with uniforms injected
        const { foo } = withUniforms(unis);
        return [
            // same as previous example...
            defMain(() => [assign(outs.fragColor, vec4(foo(float(0.5)), 1))]),
        ];
    },
    attribs: {
        // ...
    },
    uniforms: {
        // uniform declaration (incl. default value)
        color: ["vec3", [1, 1, 1]],
    },
});
Marcel Wiessler
4 weeks ago

@herbst did experiment with #webxr image tracking today. Also available now in the latest 3.3 release we made today 🎉

https://docs.needle.tools/getting-started

:needle: #threejs #webxr #webgl #madewithunity #needle

Marcel Wiessler
4 weeks ago

Needle Engine 3.3 adds support for screenspace UI

#threejs #webgl #unity #madewithunity

I learned #blender this weekend and threw together something to demo my models. I made those low-poly trees and the spaceship. 3d is hard, but not as hard as I thought it'd be! I could maybe get the hang of this.

#gamedev #webgl

A short video of a space ship flying through an infinite forest. Everything is low-poly. The trees are brown and green. The spaceship is purple and gray.
Andrew Baldwin
1 month ago

Playing around with rendering Julia sets recently gave me a thought of combining them with my earlier page divide image generators to make some baroque fractal page divide lines

Link: https://thndl.com/baroque-fractal.html

#webgl #fractal

A golden coloured double horizontal line with fractal patterns & edges
Marcel Wiessler
1 month ago

Another one from earlier today:
screenspace camera mode and distance support + switching the camera with buttons & UnityEvents for testing

#threejs #webgl #needle

Marcel Wiessler
1 month ago

Almost properly working screenspace UI built in Unity (just need to fix the text clipping delay)

#webgl #threejs #unity

Marcel Wiessler
1 month ago

Adding a new deployment target

#needle #webgl #threejs

1 month ago

@mcc Ok I don't know if I'm doing it right, but I'm doing something...

Using #dotnet to render #opengl ES using #emscripten and a #webgl canvas

https://lambdageek.dev/dotnet-webgl-demo/

Iván Sánchez Ortega
1 month ago

As a #WebGL developer, I see myself in this meme (via https://www.kdab.com/shader-variants/ )

The "Gru's plan" meme. First panel reads "Upload data to the GPU", second one reads "Tell the GPU to draw the data", third and fourth panels are black squares.
Ben Houston
1 month ago

For increased security and performance, we now recommend that instead of directly including the #webgpu #webgl collector script of https://web3dsurvey.com in your webpages, you create a 1px x 1px iframe and reference our collector-iframe.html. This way, the script runs in a sandbox with no access to the rest of your web page and no ability to impacts its performance or operation. Thank you @gman for the suggestion!

Example code on https://web3dsurvey.com homepage.

Karsten Schmidt
1 month ago

In love with those colors & shapes and can't wait to share more variations... especially animated!

#GenerativeArt #WebGL #ThingUmbrella #Marblemania

Still frame from a generative realtime animation of a composition of smooth, flowing abstract shapes, each with a different color...
Still frame from a generative realtime animation of a composition of smooth, flowing abstract shapes, each with a different color...
Still frame from a generative realtime animation of a composition of smooth, flowing abstract shapes, each with a different color...
Still frame from a generative realtime animation of a composition of smooth, flowing abstract shapes, each with a different color...
Karsten Schmidt
1 month ago

Since some of you've asked privately, here's a wireframe (and generation code) of the underlying _single_ disc geometry used for drawing all of these shapes (each shape in the final composition is a #WebGL instance of that raw disc mesh). Originally, I've just used a triangle fan with a single vertex in the center, but that setup obviously (in hindsight!) doesn't play nice with deforming a disc in the extreme (and extremely concave) ways done here... So the trick was to create a lot more internal points, almost treating this shape as a solid (rather than a boundary representation). FWIW I'm actually using double the internal density since even with the one shown here, there're still some noticeable visual artifacts...

#ThingUmbrella #Geometry #Tessellation #Marblemania

2D wireframe mesh of a triangulated disc (using Delaunay triangulation)
TypeScript source code to generate the disc mesh and prepare mesh data for WebGL:

import { ArraySet } from "@thi.ng/associative";
import { equiv } from "@thi.ng/equiv";
import { centroid, circle, triangle, vertices } from "@thi.ng/geom";
import { DVMesh } from "@thi.ng/geom-voronoi";
import { flatten1, range2d } from "@thi.ng/transducers";
import { mag, type Vec } from "@thi.ng/vectors";

export const defDisc = (res: number, step: number) => {
    const delaunay = [
        ...flatten1<Vec>(rawDisc(res, step, 1).map((x) => x.points)),
    ];
    const verts = [...new ArraySet(delaunay)];
    const indices = delaunay.map((p) => verts.findIndex((x) => equiv(p, x)));
    return { verts, indices };
};

export const rawDisc = (res: number, step: number, r: number) => {
    const c = circle(r);
    const mesh = new DVMesh(vertices(c, res));
    const reps = r + 1e-3;
    // add internal points in grid formation
    mesh.addKeys(range2d(-reps, reps, -reps, reps, step, step));
    return mesh
        .delaunay()
        .map((t) => triangle(t))
        .filter((t) => mag(centroid(t)!) < r);
};
Karsten Schmidt
1 month ago

3M = More #Marbling #Madness...

This proved quite a bit harder than expected to pull off in #WebGL and required a pretty ingenious way of pre-tessellating the single circle/disc geometry to support these concave shape deformations... Altogether, each frame is ~700k triangles (2740 triangles per shape, 256 instances), animated via vertex shader... 💪

(See recent toot for animated version...)

#GenerativeArt #WebGL #Marblemania

Animated GIF of 64 still frames, each showing hundreds of fluidly deformed shapes/strands/cells in different color themes, creating a strange kind of marbling aesthetic...
Don McCurdy
1 month ago

Incredible work from the #babylonjs team — Babylon.js v6 launched yesterday with Havok Physics. I think it’s the first time Havok has run on the web?

https://www.youtube.com/watch?v=nsqpuRCQV28

#webgl #gamedev #webdev

A little #webgl benchmark running inside #Firefox on this #FreebSD laptop - https://webglsamples.org/aquarium/aquarium.html

The best part is that it worked out of the box at 30fps.

Karsten Schmidt
1 month ago

#ReleaseWednesday This round of releases includes (among others):

- https://thi.ng/timestep - new package for fixed timestep simulation updates, discussed in previous tweet
- https://thi.ng/api - added function to simplify typed array initialization from vector data, e.g. super useful for #WebGL / #WASM interop
- https://thi.ng/scenegraph - added .mapLocalPointToGlobal() to map local point from anywhere in the scene hierarchy to world space (e.g. useful for camera controllers, view matrix creation)

Other small additions/fixes to https://thi.ng/color, https://thi.ng/random, https://thi.ng/vectors and https://thi.ng/webgl...

Link to changelogs:

https://github.com/thi-ng/umbrella/blob/develop/README.md#latest-updates

Happy coding! 🤩

#ThingUmbrella #TypeScript #OpenSource

CodePen.IO :verify:
1 month ago

RT Matthias Hurrle
Hammered Steel
The fragment shader creates the illusion of a hammered steel plate inside a dodecahedron using raymarching and voronoise.
https://codepen.io/atzedent/pen/oNaboro via @CodePen #webgl #shader https://t.co/G2EboyocTP

:sys_twitter: https://twitter.com/softwaretogo/status/1646550251862360065

Media source: https://video.twimg.com/ext_tw_video/1646549600289923072/pu/vid/1280x720/5LxZf_eyWhoX0djH.mp4?tag=12
Verekia
1 month ago

💌 The Web Game Dev Newsletter Issue 014 is out! Read it online here: https://webgamedev.com/newsletter/014, and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #webgl

Karsten Schmidt
2 months ago

#Bubblemania - realtime 3D bubble foam sim with basic physics!

Live preview/demo (reload for random config):
https://demo.thi.ng/umbrella/bubblemania/

Free drop incoming for a random selection of existing collectors of any of my #FXHash pieces...

#GenerativeArt #Voronoi #Foam #3D #Graphics #Geometry #WebGL #ThingUmbrella #TypeScript

3D realtime animation of hundreds of bubbles (most of them textured with stripes, rings, dots, gradients), randomly scattered on a plane, each growing and shrinking (with bounce). Their intersections are creating the same structures as soap bubbles/foam. The camera is rotating over the scene, slightly angled top-down view...
Karsten Schmidt
2 months ago

Visually still pretty much the same, but now mostly done in #WebGL. The intersection planes between spheres/circles are pre-computed via k-nearest neighbor lookups (using https://thi.ng/geom-accel) and stored in a texture for the vertex shader, which then applies the deformations. Geometry for a single sphere/circle only (triangle fan), everything else via #WebGL instancing. Next stop: 3D icospheres and lighting...

#GenerativeArt #Voronoi #Foam #ThingUmbrella #Bubblemania

2D foam simulation of approx. 100 bubbles of random sizes and colors (forming an incomplete Voronoi diagram)
2D foam simulation of approx. 100 bubbles of random sizes and colors (forming an incomplete Voronoi diagram)
2D foam simulation of approx. 100 bubbles of random sizes and colors (forming an incomplete Voronoi diagram)
2D foam simulation of approx. 100 bubbles of random sizes and colors (forming an incomplete Voronoi diagram)
Dave Rahardja
2 months ago

Holy crap, #Oxygene remade the original Flip-O demo from the #AtariST as a #WebGL implementation, 30 years later!

Absolutely amazing.

https://flipo.oxygenedemos.com

Karsten Schmidt
2 months ago

So I couldn't stop myself and just recreated the sim using https://thi.ng/geom & https://thi.ng/vectors. Also added support for adjustable gaps... The key parts are now <20 lines of code in total. The maths for 3D require no further changes, so from here to a proper 3D #WebGL version should be fairly trivial...

#GenerativeArt #Geometry #Voronoi #Foam #ThingUmbrella #Bubblemania

2D foam simulation of approx. 200 bubbles of random sizes and colors (forming an incomplete Voronoi diagram)
2D foam simulation of approx. 200 bubbles of random sizes and colors (forming an incomplete Voronoi diagram)
2D foam simulation of approx. 200 bubbles of random sizes and colors (forming an incomplete Voronoi diagram)
2D foam simulation of approx. 200 bubbles of random sizes and colors (forming an incomplete Voronoi diagram)
Asbjørn Ulsberg
2 months ago

A huge step forward for the web platform!

“WebGPU is a new API for the web, which exposes modern hardware capabilities and allows rendering and computation operations on a GPU, similar to Direct3D 12, Metal, and Vulkan.

Unlike the WebGL family of APIs, WebGPU offers access to more advanced GPU features and provides first-class support for general computations on the GPU.

The API is designed with the web platform in mind, featuring an idiomatic JavaScript API, integration with promises, support for importing videos, and a polished developer experience with great error messages.”

I know next to nothing about GPU APIs, but I hope this will have a uniforming effect on the whole GPU API space. It seems suboptimal and unsuitable that every vendor is inventing their own proprietary API.

https://developer.chrome.com/blog/webgpu-release/

#WebGPU #web #gpu #graphics #WebGL #JavaScript #API

Chrome ships WebGPU.

After years of development, the Chrome team ships WebGPU which allows high-performance 3D graphics and data-parallel computation on the web.

Published on Thursday, April 6, 2023
Mark Pesce
2 months ago

If you've ever wanted to simulate the Big Bang in your web browser, I have the site for you. Best of all, it's 100% pure #webgl

https://galaxym.ovh/

(Probably need a reasonable GPU for this)

Don McCurdy
2 months ago

Today I'm sponsoring vanruesc on GitHub Sponsors. If you're using #threejs and have seen or used any newer post-processing effects¹, they are all based on his foundational "postprocessing" library for three.js: https://github.com/pmndrs/postprocessing.

➡️ https://github.com/sponsors/vanruesc

#threejs #webgl #gamedev #opensource

¹see Screen Space Global Illumination (SSGI) and Temporal Reprojection Antialiasing (TRAA) by 0beqz, or Depth of Field (shown below).

Image of the popular "Sponza" 3D scene, with a nearby potted plant in focus, and the hallway receding out of focus in the background.
C:\KKJ\>:idle:
2 months ago

My box rendered in #WebGL then processed by #StableDiffusion

CodePen.IO :verify:
2 months ago

RT Ksenia Kondrashova
Draw GLSL flowers with your cursor! 🌺
One full-screen plane, two render targets, and a bit of shader magic
Live demo & source code: https://codepen.io/ksenia-k/full/poOMpzx
Made with @threejs
Hosted on @CodePen
Special thanks to @bookofshaders
#webgl #glsl #threejs #shader #drawingtool https://t.co/hQ480LjV4e

:sys_twitter: https://twitter.com/uuuuuulala/status/1642889510915563520

Media source: https://video.twimg.com/ext_tw_video/1642884996053516289/pu/vid/1278x720/halPHH4XksAEIVFb.mp4?tag=12
2 months ago

Oh look they used #WebGL to automate that teeshirt the cool girl you like wears: https://pouria.dev/unknown-pleasures

Lucid00
2 months ago
@kitasenjudesign@twitter.com:

The File System Access API can be used to save PNG image sequence from the canvas element, which could be rendered at 30 fps.
Let's use WebGL as a pre-renderer.
#webgl

C:\KKJ\>:idle:
2 months ago
Ben Houston
2 months ago

Today's https://web3dsurvey.com update:

There is now platform breakdowns for every #WebGL & #WebGL 2 extension. (And the website is much faster - query caching FTW!)

For example, etc1 texture compression (below) has poor support on desktop platforms, especially windows.

Rowan Merewood
2 months ago

Feels like the 90s are coming back into fashion, so I feel like I want a big panel van and someone can airbrush this on the side for me…
https://fractious.glitch.me/?x=-0.6514871799162409&y=0.477963339519598&i=2000&h=0.998&s=0.830&z=9.220496146492371e-9
(usual #mandelbrot #fractal #webgl larks)

It's hyper technicolor stoner art. I don't know how else to describe it, sorry.
Verekia
2 months ago

💌 The Web Game Dev Newsletter Issue 013 is out! Read it online here: https://webgamedev.com/newsletter/013, and subscribe to get the next ones delivered right to your inbox! 🚀 #threejs #r3f #webgl #webxr #gamedev

Ben Houston
2 months ago

Today's update to #web3dsurvey:

I've added all Parameters from #WebGL and #WebGL2 as well as frequency of majorPerformanceCaveat:

https://web3dsurvey.com/webgl
https://web3dsurvey.com/webgl2

C:\KKJ\>:idle:
2 months ago

Added Virtual Production like panorama lighting (as option).

New example meshes and environments. Better lighting.

=> https://virtualcurator.p1x.in

#ChatGPT #HTML #AFRAME #XR #VR #WebGL #GLTF

Marcel Wiessler
2 months ago

We released a first version of EditorSync for #Unity to #threejs yesterday 😊

https://needle.tools

#madewithneedle #webgl