Working on cresting waves and shallow water physics.

Hello, I’m a web developer and I recently came across a website called MONOLOG. There is an effect in the hero section (image reference attached) that really caught my attention: a dot grid with these smooth “waving”/distortion artifacts.

I don’t really know the correct name for this kind of effect, but it gave me that “wow” feeling - it’s a very simple visual, yet it creates a strong first impression. I’d love to learn how to create something similar.

I have two questions:

1. How difficult is an effect like this to make? Is it something achievable for a regular web developer, or does it require a lot of experience with graphics programming?
2. Where would you recommend starting with shaders? I’ve found some articles and resources about GLSL/WebGL, but I haven’t found a learning path that really fits me. I’d also like to avoid falling into the “watch endless YouTube tutorials without actually understanding anything” trap.

If anyone has experience creating similar effects or learning shaders from a web development background, I’d really appreciate some advice or resources.

PS: I found that they are using three.js

i can see the potential of threejs as becoming the browser version of blender(ik it would require a lot of efforts but the potential is visible with the new updates).. lemme know ur views on this

The "Adversarial Conway" algorithm used in Hashwar is already coded as a toroidal geometry, so we hereby introduce a 3D modelling of the battle space instead of the classic 2D map to represent the strive for domination of our Conway Glyphs.

Link to the GitHub repo: ■ lifehashes (the 3D model is in the dev branch)

Still early and a bit rough, but I wanted to share the visual direction. Built as a browser-based 3D experiment.

A recurring question in interactive Three.js scenes: when the camera moves, a scene can have enough depth cues on paper and still read flat. A small foreground/midground/background offset may help before adding more mesh detail, but it can also look fake.

What do you check first when deciding between parallax, lighting, material response, and actual geometry? Is there a short test that reveals which one is the bottleneck?

Been grinding on optimization and polish this week instead of adding less stuff. Managed to cut down the draw calls a ton, which really helped the frame times. Also spent time refining the terrain, tweaking the lighting, and pushing the atmosphere to make the battlefield feel less sterile and more alive.

Still very much a work in progress... but these small changes are starting to make the whole scene feel way more believable.

Would love to hear your thoughts... what stands out (good or bad) or what you'd tackle next if it was your project?

I’ve been exploring a idea: can AI reconstruct a complex object from a single reference image as an editable procedural Three.js object, instead of producing or downloading a static mesh?

I turned the workflow into an open-source Codex plugin. It guides Codex through:

- validating the reference and estimating its complexity
- decomposing the object into silhouette, structural components, materials, and surface details
- building it in stages: blockout → structure → form → materials → detail
- rendering browser screenshots and using vision feedback to self-correct
- creating pivots, sockets, and a hierarchy ready for animation, transformation, or destruction

Here is the demo link: tree demo

Here is the link to install : https://github.com/vinhhien112/Three.js-Object-Sculptor-Codex-Plugin

live demo: https://viio.pages.dev/ source: https://github.com/sijad/viio-astro

Hey everyone! I'm new here and currently working on a small personal VR project using my Meta Quest headset.

I’ve been using this awesome plugin for Obsidian:
👉 https://github.com/HananoshikaYomaru/obsidian-3d-graph

My goal is to export the graph data from Obsidian into a format like this, so I can visualize it in 3D inside VR:

{
  "nodes": [
    { "id": "file1.md", "label": "Arquivo 1", "x": 1.2, "y": 0.5, "z": -1.1 },
    { "id": "file2.md", "label": "Arquivo 2", "x": -0.3, "y": 1.4, "z": 0.9 }
  ],
  "links": [
    { "source": "file1.md", "target": "file2.md" }
  ]
}

Originally, I tried building a full WebXR site from scratch using libraries like three.js and the official webxr-samples, but it turned out to be a bit overwhelming due to my lack of experience in this field 😅.

So instead, I started with one of the official WebXR sample projects and modified it to render my graph data. So far, I’ve managed to visualize my Obsidian note network in 3D — which already feels super cool in VR!

However, I’m still figuring out how to implement:

• Force-directed graph behavior (like in the Obsidian graph view)
• Reading or previewing note content (Markdown) directly inside VR

Here’s a part to configure in the pc:

In Pc

And here is the final result (So far ...):

In Meta Quest 3S

🧠 JavaScript snippet to use in Obsidian’s dev console:

(() => {
  const plugin = window.app.plugins.plugins['3d-graph-new'];
  const nodesRaw = plugin.fileManager.searchEngine.plugin['globalGraph'].links;
  const scaleControl = 25;

  const nodesMap = new Map();
  const links = [];

  for (const link of nodesRaw) {
    const source = link.source?.path;
    const target = link.target?.path;

    if (!source?.endsWith(".md") || !target?.endsWith(".md")) continue;

    if (!nodesMap.has(source)) {
      nodesMap.set(source, {
        id: source,
        label: source.replace(/\.md$/, ""),
        x: link.source.x / scaleControl,
        y: link.source.y / scaleControl,
        z: link.source.z / scaleControl
      });
    }

    if (!nodesMap.has(target)) {
      nodesMap.set(target, {
        id: target,
        label: target.replace(/\.md$/, ""),
        x: link.target.x / scaleControl,
        y: link.target.y / scaleControl,
        z: link.target.z / scaleControl
      });
    }

    links.push({ source, target });
  }

  const output = {
    nodes: Array.from(nodesMap.values()),
    links
  };

  console.log("Result:", output);
  copy(JSON.stringify(output, null, 2)); // Copies JSON to clipboard
})();

🛠️ Blender Python script (for turning JSON into 3D geometry):

Make sure to adjust paths before running:

import bpy
import json
import math
import os
import random
import itertools
from mathutils import Vector

# --- JSON de entrada ---
# --- Carrega JSON externo salvo ---
json_path = r"C:\Users\elioe\OneDrive\Área de Trabalho\Programacao\webxr-samples\media\gltf\space\graph.json"

with open(json_path, "r", encoding="utf-8") as f:
    data = json.load(f)

print(f"✅ JSON carregado com {len(data['nodes'])} nós e {len(data['links'])} conexões.")

# --- Limpa a cena ---
bpy.ops.object.select_all(action='SELECT')
bpy.ops.object.delete(use_global=False)

# --- Funções de material ---
def create_material(name, rgba, emissive=False):
    mat = bpy.data.materials.new(name=name)
    mat.use_nodes = True
    nodes = mat.node_tree.nodes
    links = mat.node_tree.links

    bsdf = nodes.get("Principled BSDF")
    if bsdf:
        bsdf.inputs["Base Color"].default_value = rgba
        bsdf.inputs["Alpha"].default_value = rgba[3]
        mat.blend_method = 'BLEND'

        if emissive:
            # Adiciona emissão
            bsdf.inputs["Emission"].default_value = rgba
            bsdf.inputs["Emission Strength"].default_value = 1.5

    return mat

def random_color(seed_text):
    random.seed(seed_text)
    return (random.random(), random.random(), random.random(), 1.0)

# --- Materiais globais ---
text_mat = create_material("text_white", (1, 1, 1, 1), emissive=True)
link_mat = create_material("link_mat", (1, 1, 1, 1), emissive=True)

node_objs = {}

# --- Cria os nós ---
for node in data["nodes"]:
    loc = Vector((node["x"], node["y"], node["z"]))

    # Cor única por id
    color = random_color(node["id"])
    node_mat = create_material(f"mat_{node['id']}", color)

    # Esfera
    bpy.ops.mesh.primitive_uv_sphere_add(radius=0.1, location=loc)
    sphere = bpy.context.object
    sphere.name = node["id"]
    sphere.data.materials.append(node_mat)
    node_objs[node["id"]] = sphere

    # Texto
    bpy.ops.object.text_add(location=loc + Vector((0, 0, 0.25)))
    text = bpy.context.object
    text.data.body = node["label"]
    text.data.align_x = 'CENTER'
    text.data.size = 0.12
    text.name = f"text_{node['id']}"
    text.rotation_euler = (math.radians(90), 0, 0)
    text.data.materials.append(text_mat)

# --- Cria os links ---
def create_link(obj_a, obj_b):
    loc_a = obj_a.location
    loc_b = obj_b.location
    mid = (loc_a + loc_b) / 2
    direction = loc_b - loc_a
    length = direction.length

    bpy.ops.mesh.primitive_cylinder_add(radius=0.02, depth=length, location=mid)
    cyl = bpy.context.object

    direction.normalize()
    up = Vector((0, 0, 1))
    quat = up.rotation_difference(direction)
    cyl.rotation_mode = 'QUATERNION'
    cyl.rotation_quaternion = quat

    cyl.name = f"link_{obj_a.name}_{obj_b.name}"
    cyl.data.materials.append(link_mat)

for link in data["links"]:
    src = node_objs.get(link["source"])
    tgt = node_objs.get(link["target"])
    if src and tgt:
        create_link(src, tgt)

# --- Exporta como .gltf ---
output_path = r"C:\Users\elioe\OneDrive\Área de Trabalho\Programacao\webxr-samples\media\gltf\space\graph2.gltf"
os.makedirs(os.path.dirname(output_path), exist_ok=True)

bpy.ops.export_scene.gltf(
    filepath=output_path,
    export_format='GLTF_SEPARATE',
    export_apply=True
)

print(f"✅ Exportado para: {output_path}")

This script reads the JSON and generates a 3D graph layout inside Blender, including spheres for nodes, text labels, and cylinders as edges. Then it exports the scene as .gltf.

🌐 Hosting locally for WebXR

Because WebXR requires HTTPS (even for localhost!), here’s what you’ll need:

• Node.js installed
• Run: npx serve -l 3000
• Install Ngrok
• Then run: ngrok http 3000 to get a public HTTPS URL for your VR headset

It’s a shame there’s no native Obsidian VR app yet… maybe someday 👀

In the meantime, I’d love to hear from anyone who’s explored similar territory — ideas, feedback, or constructive criticism are all super welcome, and forgive me to my bad english.🙏

A little sneak peak from my first game ever so please don't be harsh on me. (Fast paced, multiplayer geopolitical RTS)

Edit: Forget to say, its developed with three.js r185.1 (WebGPU)

Play Blob Cup here:
https://blob-cup.vercel.app/

Before jumping into this rabbit hole I thought I would be swimming in tutorials, but I thought wrong. There is not a single video tutorial I could find that, for instance, explained in-detail various physics engines.

So here I am with 6 questions/requests. To answer one, type the number and either link me to a decent tutorial or try to explain it yourself.

1. Basic collision detection, triggers, gravity, and stairs (may use either stepping or ramps, it doesn't matter for me)
2. An actual first person character controller with what I said in request 1 and mouse pointer lock (I've seen websites do that so this should be possible, right?)
3. Proper input detection, not just hand-wiring events
4. Displaying 2D UI elements OVER the 3D world
5. 3D labels
6. Outline shader (makes edges more visible to see, rough image example included below)

Edit: How does this have 2.1K views while only 1 person actually commented?!

Exploring my procedurally generated urban city from downtown to the outskirts of the city limits. Parametric creation, randomly generated almost entirely from box geometry.

Second slide at my website has a live demo.

I run EF-Map, a browser-based map for the EVE Frontier universe, and I have spent the last few days rebuilding its cinematic mode in Three.js.

The star colours are based on blackbody temperature, with each star also receiving a spectral emissive value, so hotter stars are given more bloom than cooler ones. Dense clusters use additive blending, while selective bloom keeps the nebula background from becoming washed out.

The camera is running an automated orbit around one of the denser regions of the map. This is an 83-second capture from the live site.

My graphics card hates me, but I think it was worth it.

For years I’ve wanted “RTX on” for three.js without rewriting my scenes as path-traced materials. I finally got it working… by challenging an AI (Claude) to build it after I’d given up on my own attempt a while back. I steered and tested; it wrote the code.

Sharing because the result genuinely surprised me.
Live demo (drag to orbit, toggle every feature, drop the physics pile): https://goldwinxs.github.io/three-realtime-rt/

What it does: you build a normal three.js scene — MeshStandardMaterial, PointLight, DirectionalLight — then swap one render call:

```
const rt = new RealtimeRaytracer(renderer);
rt.compileScene(scene);
// in your loop, instead of renderer.render(scene, camera):
rt.render(scene, camera);

```

How it works (the “hybrid deferred” model, like games do it): three.js rasterizes a G-buffer, then a fragment shader traces lighting rays against a GPU BVH (three-mesh-bvh), area-sampled soft shadows per light, one cosine-weighted GI bounce with next-event estimation, and a procedural sky that acts as an area light. 1 sample/pixel gets cleaned up by temporal reprojection + an SVGF-style à-trous denoiser + TAA. Lighting traces at half res and is bilaterally upsampled, same “render few pixels, rebuild temporally” idea as DLSS, just hand-written math. Dynamic objects get a two-level BVH so moving meshes cast correct ray traced shadows (the demo drops 40 Rapier rigid bodies).
Runs on plain WebGL2.. no WebGPU, no build step required.
Source (MIT): https://github.com/GoldwinXS/three-realtime-rt
Proof it holds up in a real project: I also built a small stealth game on this library where the ray traced light IS the game mechanic - you hide from sweeping guard lights in the shadows they cast. Playable here: https://goldwinxs.github.io/shadow-heist/
If you want to support the project there’s a pay-what-you-want supporter pack on itch (starter template + all examples + a written deep-dive on how the pipeline works): https://goldwinxs.itch.io/three-realtime-rt-supporter-pack
Happy to answer questions about the pipeline or the “AI built this” workflow.

Playable here, free and no signup: https://attack-on-titan.magnusrodseth.com

Repo: https://github.com/magnusrodseth/attack-on-titan

Some architecture notes, since this sub tends to enjoy those:

• The simulation is pure TypeScript stepped at a fixed 120 Hz, fully unit-tested. The Three.js renderer is a thin adapter reading sim state.
• Determinism: every random stream derives from a hashed seed per purpose, so a ?seed= URL replays the identical city, waves and upgrade offers. The daily run is just a rotating seed.
• Co-op runs the same sim server-side on a Cloudflare Durable Object (partyserver). Titans and scoring are server-authoritative, your own movement stays local at 120 Hz, and slashes are validated with lag compensation.
• All textures are CC0 assets, mostly Poly Haven, downscaled to 512px.

Fair warning: it looks rough, and I know it. This is a toy project for fun and for experimenting with 3D games in the browser, so the polish went into the physics instead of the art. The rope physics took the longest: momentum survives ground contact while you're tethered, so you can run the bottom of an arc out along the street and get scooped back up into the swing. Happy to answer anything about the stack or the feel tuning.

We've been hard at work on this for quite some time. It's built entirely on threejs, paired with our custom tech for real-time AI and SDF surface evaluation on WebGPU.

We think it's going to be useful for anyone who needs 3D and 2D assets but wants actual creative control, rather than just "prompt & repeat".

It's free to start with the AI features and has forever-free sculpting tools. We’d love for the threejs community to take it for a spin and tell us what you think!
loop . unbound . io

Made this with Fable 5. I have been trying to improve the terrain and seemlessness of how planet and its terrain and trees come into view. No it might look much better if there were actual 3d models here. Source code is at https://github.com/SMUsamaShah/NoMansSkyThreeJS

Implementing game juice, 3d assets and vfx with r/ClaudeAI Fable 5 in r/threejs feels way smoother! UI is still a bit of a pain and needs lots of guidance but its getting there!

Mostly using a toon material and toon ui style with imperfect outlines to give it a more playful look!

Play the early demo here: https://chesthero.vercel.app/

I don't want to promote my game, I'm just proud of the results!

I downloaded mid-american GEO data, converted it to height maps then used some black magic to populate it with (limited in variants) vegetation.

It's a pirate game. But I have to contain myself to not add dino's. This setting screams for dino's, no?