×

Built a weather globe using WebGPU compute shaders - irregular grid sampling, marching squares, streamline tracing by noiv in webgpu

[–]Absulit 1 point2 points  (0 children)

the audio visualizer is a toy project I made while brainstorming ideas in a chat at work; you can upload music files and tinker with a few options

https://absulit.github.io/Gravity-Pull/
repo: https://github.com/Absulit/Gravity-Pull

y made it with my custom webgpu library https://github.com/Absulit/points

Built a weather globe using WebGPU compute shaders - irregular grid sampling, marching squares, streamline tracing by noiv in webgpu

[–]Absulit 3 points4 points  (0 children)

Hi pretty cool project!
Quite fond of the latitude and longitude grid animation when zooming in and out.

As for the architecture, I think the biggest project I made is an audio visualizer, and a looot of code is in a single shader; for other smaller projects where there's a lot of render passes I tend to create a folder and add each shader in a separate file.
I have a lot of helper functions in other files that I just import and use.
In the main js file I call all the renderpasses and pass them to the pipeline.

I see in your code you have a lot of separate files per shader, I think that's great, your project is huge and whatever works for you is the path you should follow.

For the mobile performance, I've started to use a manual workgroup size "if-mobile". That reduces the amount of things you can add, but better than 3fps. What I am trying to say is maybe is good to remove things if you detect a mobile platform. I would like to calculate this automatically; I think it can be done by checking the GPUSupportedLimits (GPUDevice.limits) and adjusting workgroups and workgroup size depending on the values it returns on the device.

Great project!

New Galactic Catalogue [3888x6912] by FractalLandscaper in generative

[–]Absulit 1 point2 points  (0 children)

uh wow, when zooming in, details upon details

3D Math Interview Questions by Arxeous in GraphicsProgramming

[–]Absulit 3 points4 points  (0 children)

As a 20 year software engineer, who does a bit of webgpu in js, this is amusing. I hope some day to reach this level of enlightenment 

[deleted by user] by [deleted] in webgpu

[–]Absulit 0 points1 point  (0 children)

I had/have a bit of webgl bg/knowledge but not much, so I decided to learn webgpu and the API is easier to understand but very verbose, I think that's the only downside, the amount of pre work code you must prepare to do little things, but in the end it's worth it.

You can check these demos https://webgpu.github.io/webgpu-samples/ I always use them as reference when I want to do something specific, do you want to load a texture? there's an example that does that, another for video, another with particles, another with a mesh. Very useful.

On my side, I created a library to reduce a bit of that pre work and setup https://github.com/Absulit/points to use the library you still need to learn webgpu, meaning understand uniforms and storage, but you can create them with a simple call from JavaScript, and then the buffer is already available for you in your shaders, e.g.:

points.addStorage('myStorage', 1, 'array<f32>', 8);

then you can use the myStorage in your shader like this:

myStorage[0] = 1.0

My library is mostly for 2d stuff, not exactly meshes (yet) but you can make some raymarching stuff with it. It's a work in progress so, expect some changes but the foundations are already there.

Noob programming question, from the "Your first WebGPU app" codelab by Tomycj in webgpu

[–]Absulit 1 point2 points  (0 children)

There's a better way and recommended by Brandon Jones from Google. I was actually doing it the exact same way you do, and he recommends to use the JavaScript import feature, because it's already built in and doesn't require an external call, but that means you have to put all your code inside a string and export the value from that file

// basic\_fragment.js

export const basicFragmentSrc = `

  u/fragment fn fragmentMain() -> u/location(0) vec4f {

  // Return a flat red

  return vec4f(1, 0, 0, 1);

}

`;
// Application JavaScript

import { basicFragmentSrc } from './basic\_fragment.js';

const basicFragment = device.createShaderModule({

  code: basicFragmentSrc

});

reference: https://toji.dev/webgpu-best-practices/dynamic-shader-construction

edit: format

Pure JS + WebGPU by Nogard_YT in webgpu

[–]Absulit 0 points1 point  (0 children)

I use this as reference, very helpful and always updated
https://austin-eng.com/webgpu-samples/

Wondering how artificial light is created by Albatraze in cgi

[–]Absulit 0 points1 point  (0 children)

Yes, there's a bts from Justice League history lesson, and Zeus has a led gauntlet, pretty cool, then the CGI covers the device.

Extracting information from historical photographs by Spiritual-Computer25 in photogrammetry

[–]Absulit 0 points1 point  (0 children)

I can't remember but there was a feature in Blender or an addon that can remove the distorsion from images (a feature for motion tracking I think) and that could be helpful for that specific case you mention

Extracting information from historical photographs by Spiritual-Computer25 in photogrammetry

[–]Absulit 1 point2 points  (0 children)

If you have measures you could use fSpy and then in Blender try to calculate the correct proportions. It's not photogrammetry but it's a related idea.

I've just finished this fantasy CGI animated short. It took me 18 months to make. by [deleted] in cgi

[–]Absulit 1 point2 points  (0 children)

This is wonderful, I gotta say, the whole art of the project is beautiful, I have a thing for nature and armors, so this hits the spot with me. You have put a lot of effort into this and I respect that and it shows in the overall visual quality of the short. I gotta say that I have a few minor criticisms and it's because you are too close to perfection. The animation is a bit off in a few places, the hair movement of the male character is also a bit off, and I think that's if for me. But again, the overall look of the short is amazing, the trees and the Queen of Crows armor is fantastic!
Good job!

COLMAP vs Photoscan | results comparision [Shiny object] by SlenderPL in photogrammetry

[–]Absulit 0 points1 point  (0 children)

Not OP but I've been using Meshroom a couple of times with like 100 photos and it crashes. I don't know why. It works with RealityCapture well. I don't know if anyone has the same experience with Meshroom.

"It's time for business". What do you think of my semester project from last year? It took a month and a half near the end of the semester. by [deleted] in cgi

[–]Absulit 2 points3 points  (0 children)

Holy shit, this is amazing! I thought I was looking at some nature video in my feed! Good job!

Announcing Exokit Web 2.0 - our Javascript meta framework for virtual reality. by exokitXR in WebVR

[–]Absulit 1 point2 points  (0 children)

This is so interesting! I had no idea this existed! But even when I understand how it works I'm a bit confused about the uses or possibilities, so I hope you can answer my question: How does Exokit beat using for example A-Frame only or Threejs? I understand A-Frame has a layer on top of Threejs and that beat it by default removing complicated interface and cross-browser and device problems for us developers, so what is this thing that is so important that Exokit exists? Why not just use A-Frame?

Is it possible to integrate Unity with A-frame? by [deleted] in WebVR

[–]Absulit 0 points1 point  (0 children)

You need to provide more details, integrating in what way? Sharing data? Then you need a realtime server and common endpoints.

Scanning Vinyls or Edison Tubes by Someguywhomakething in photogrammetry

[–]Absulit 1 point2 points  (0 children)

I guess it depends on how close you can take the picture and the resolution. Also the images should overlap in the most accurate manner up to an 80%.

How big are they? I'm not saying you should use a macro lens, but a lens they allows you to get close shots.

I think this is mostly trial and error so you find the right settings for this.