DepthWrite

[jimver04]

Hi, nice component you have made here.
Is there a way to mask water inside boats ?

This guy here suggests to make a 3D object with colorWrite = false but my boat is not so simple.
https://woodenraft.games/blog/how-to-hide-water-plane-inside-hollow-boat-threejs

[Dante83]

@jimver04 That would be an awesome idea! It was a while before I pivot back to upgrading this stuff, though.

Rendering order can be a bit tricky. Can we control that in A-Frame?

[jimver04]

Hi, I have tried with various values for material.depthfunc , depthtest disabling, and stencilwrite but the result was not the expected. My only hope is to change the ocean material alphamap so that is hollow at the area of the boat. Do you repeat the pattern of the sea? I am afraid that alphamap will be also repeated. I will give a shot.

[Dante83]

Sorry I didn't get back to this sooner, I wanted to release an A-Starry-Sky with aurora AND clouds, but... because I've been a lazy bum who wants to play games more then create them in his spare time, lately, it seems I might need to just release it with aurora and a few cool little improvements. Drats! At least I got aurora done, those will look really cool over this!

That said, this little library could use some love! There are a few improvements I wanted to add for version 0.2 and I'm wondering if I could maybe add in a static texture src, size, offset support for it? I could try and see if I could support some kind of 'magic moving mesh' auto-update thing, but my head is telling me doing that would be complicated and that the best way to support this at the moment would be to provide a library method or parameter for a texture, sizing feature and offset in global world x-z coordinates (y being up).

The feature would get the global x-z coordinates of each pixel in the fragment shader, and then check to see if it falls within the bounds of any of the textures supplied. If the global x-z coordinates are in the texture and the bitmask of said texture at that exact coordinate is 0, we throw the texture away, otherwise, if all fragments are outside of the masks or 1, we render it. I think this could support 127 alpha masks? It would be a hard mask, but I suspect ship hulls have a little thickness to overcome this?

What do you think about that? Does that sound like a logical first plan for this? It might take a bit of work, but the biggest question is whether it will work at all and whether it will interfere with future features (I don't think it codes us into a wall at the moment). As a side note, this is theoretical, and each of the planes do reuse textures... but I think the main shader can be unique on each, and I plan to update to non-uniform grid sizes in the future, so that I can send the planes all the way out to the horizon. I think... there's a chance I'm doing something in bulk to make the GPU happy.

This could also be useful for things like islands, if said island dips below the terrain, or even if the user wants to add a lake AND an ocean in the same scene (maybe use reverse it and everything that is masked gets drawn in that case?) The downside is that, because it's static, the alpha mask I expect will require a bit of a buffer on both sides to avoid a square grid going around your island/boat. Maybe the original idea you had will work, too. I'm still investigating this.

Nonetheless, I figured I'd brainstorm here in case you had additional thoughts, and at least say I hadn't fallen off the planet completely.

[Dante83]

I'm continuing to think through the problem space and I realized that while I can use a 0/1 bitmask for my texture, I can't really do the same for offsets or scales. So then if I had 127 bit masks, I'd need another 127 floating point texture reads for the offsets and scales because those are floats. Drats!

This also has issues if the ship rocks around, and requires high resolution images just for a mask. I think I might give a shot at the method you presented and see if I can't dovetail it into the code. Fingers crossed :D

[jimver04]

Thanks Dante83, speaking about Auroras and waters, I have recently made a virtual production with blender with some ballerinas dancing over the water under the aurora: https://www.youtube.com/watch?v=CiNiCxmsjY0&feature=youtu.be

I am thinking to make some templates in Aframe for the ballerinas to upload the green screen videos themselves and get the virtual production back. Also, we had improved the Networked-Aframe so as to have green screen pixels removed from the incoming stream in real-time for video streaming (and give some controls for the amount of green:

Yes, I think the shaders approach will be too complicated for cutting out the water parts that are in the keel of the ship.

As regards the alphaMap approach, I found this post: https://stackoverflow.com/questions/71361285/three-js-clip-plane-if-object-intersects. Actually we will have to provide the AlphaMap texture which denotes which water pixels will be transparent. The difficult part is on how to project the keel of the ship to the 2D plane of the water texture in real-time as the boat might move. Doing continuous binary operations will not be efficient. I guess this has to be done once to find the keel shape and then move the center of the keel (because the ship moves). I have used CSG three.js library in the past for intersecting muscles at forearm: https://myowebtoolkit.iti.gr/?ref=https://githubhelp.com and it works well.

[Dante83]

Awesome video! You could definitely pull that into A-Frame I bet, and it would be cool :).

---

As for the status of this, I have a bit of good news and a bit of bad news.

Yes, I'm afraid if you are wanting to go into the Keel of the ship, you're out of luck with the method provided. The trick is dependent upon a couple of dependencies. The first being that the camera must be above the water and the water must be below the mask. So, if you were in the first image, you could cover the deck with a mesh that just fit the surface of the deck approximately (it doesn't have to be perfect, just cover the holes looking into the keel) and then make sure the camera never enters into the ship itself.

You also require a model without transparency as the trick depends upon the fact that transparent objects are later in the draw order then non-transparent objects and basically throws those pixels out.

It turns out this is all possible with a custom material component, and doesn't require anything injected in a-ocean at all. But I included the component code as it might prove useful in a new branch:
https://github.com/Dante83/a-water/tree/add_alpha_mask_support

Particularly, make use of the master dist files in those instead of the v0.1.1.js files.
https://raw.githubusercontent.com/Dante83/a-water/add_alpha_mask_support/dist/a-water.master.min.js

You can give it a shot by creating a plane and hovering it over the water, with the new attribute ocean-static-mask added inside, which should replace the materials by the material described in https://woodenraft.games/blog/how-to-hide-water-plane-inside-hollow-boat-threejs.

Unfortunately, supporting masks that work inside more complex geometry is a bit more involved. I have been trying to think of robust methods to support alpha masks for more complicated shapes, and I'm thinking that the best way to go about it would be to allow users to upload custom mesh regions that would be exempt from having water inside, by having an attribute similar to the above.

These meshes would all be moved to another layer, and have the depth material applied to them.

During runtime, I could then take orthographic images of these meshes, with orthographic camera scales of something like 1024x1024 pixels over a 10mx10m region, a 20mx20m region, a 40mx40m region, a 80mx80m region, doubling it again and again until we reached a 10km region, allowing for the typical full camera draw distance of 5km. Further regions might not update as often, as well as an initial optimization, but I doubt any geometry added to this layer is particularly complex and draw distance is a fairly cheap material, so the biggest cost will be the draw calls, themselves and the memory they take up.

Given I should be able to calculate the world space of each pixel inside of those images, I can then using the world space coordinates in the fragment shader of the water to ask "Is this pixel above or below the pixels in it's respective region. If the height of the pixel is above it, don't draw it. If it's below it, draw it.

As you can see though, this is a fair bit more complicated, and might make a bit of a GPU hit... Without amortizing the depth passes, this could cause something like 10 draw calls per frame. But close by it would provide alpha masking support of less then a cm and allow surfaces that changed or rocked in the oceans, and let's you go inside, or have transparent objects.

But yes, it's a fair bit more complicated and I suspect it might take me a bit longer then this change. But in the meantime, give the above a shot if you want and see if it gets what you're after :).

Example of the technique functioning. I just dropped a cube below it to see if I could render it. Notice that my land doesn't render, which I believe is because I have transparent things in the GLTF and so it just allowed transparency throughout. Alas, if I wanted the land visible, I would need to go in and make sure that it was all non-transparent. I'm still at the mercy of the render order angels as well for this one.

[jimver04]

Hi Dante83, the above looks promising. The order of rendering depends on the order you add glbs as entities in the html. The last is rendered first if I remember correctly based on my 2 days torture with stencils. The render order can change if we disable depthTest parameter. I will take a look.

[jimver04]

Hi Dante,

The below example works. Perhaps it worths adding it. I have made a small change to the component you made (see "static-mask-me" where I have added:

"node.renderOrder = 999;"

The OpenCube.glb is a standard cube made with blender where I have removed the upper face.
There have been some issues with the rendering order.
The ocean should be rendered last according to the Three.js example you mentioned.
I had also some issues depending on the order of elements in the html: a-plane (mask), a-ocean, a-entity (cube)
Sometimes, these issues were not apparent. For safety, it is better to have the renderOrder parameter to ensure there are not order issues.

however,
sortObjects: true did not play any role if it is false or true

Best, and see you
Dimitrios Ververidis (jimver)

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta name="description" content="Dev Example &mdash; Networked-Aframe with Green Screen effect">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.7/dat.gui.min.js"></script>
    <script src="js/a-water_alphamask_master.js"></script>
    <script src="https://unpkg.com/aframe-sun-sky@3.0.3/dist/aframe-sun-sky.min.js"></script>
    <script src="https://unpkg.com/aframe-randomizer-components@%5E3.0.1/dist/aframe-randomizer-components.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/IdeaSpaceVR/aframe-particle-system-component@master/dist/aframe-particle-system-component.min.js"></script>

</head>
<body name="myBody">
<div class="actions" name="actionsDiv" id="actionsDiv">

    <script>

        AFRAME.registerComponent('render-order', {
            init: function(){
                let el = this.el;
                let mesh = el.getObject3D('mesh');
                if (!mesh) {
                    return;
                }

                mesh.traverse( node => {
                    if(!node.isMesh){
                        return;
                    }
                    console.log(node);
                    node.renderOrder = 1000;
                });
            },
            tick: null
        });



        AFRAME.registerComponent('static-mask-me', {
            init: function(){

                let el = this.el;

                    const maskMaterial = new THREE.MeshBasicMaterial({
                        color: 0x00ffff,
                        transparent: false,
                        colorWrite: false,
                    });
                    maskMaterial.needsUpdate = true;

                    let mesh = el.getObject3D('mesh');


                    if (!mesh) {
                        return;
                    }

                    mesh.traverse( node => {
                        if(!node.isMesh){
                            return;
                        }
                        node.material = maskMaterial;
                        node.renderOrder = 999;
                    });
            },
            tick: null
        });

    </script>
    
</div>
<a-scene fog="type: linear; color: #AAB; far: 230; near: 0"
         renderer="antialias: true; sortObjects: true;"
         >
    <a-assets><!-- Avatar Template -->
        <template id="avatar-template">
            <a-entity class="avatar" networked-audio-source>
                <a-plane id="videoPlaneGreen" class="videoPlaneGreenClass" color="#FFF" width="1" height="0.75"
                         position="0 0.6 -0.15" material="side: double"
                         networked-video-source="useGreenScreen: true; greenThreshold: 0.04; streamName: video"></a-plane>
                <a-plane id="screenPlane" color="#FFF" width="0" height="0" position="0 0.6 -0.15"
                         material="side: double" networked-video-source="streamName:screen"></a-plane>
            </a-entity>
        </template>
    </a-assets><!-- Pawn -->
    <a-entity id="player" networked="template:#avatar-template;attachTemplateToLocal:false;" position="0 0.6 0"
              spawn-in-circle="radius:3" wasd-controls="fly: true; acceleration:5" show-position
              look-controls="pointerLockEnabled: true;">
        <a-sphere class="head" visible="false" random-color></a-sphere>
        <a-entity active="true" camera="near: 0.1; far: 7000.0;" position="0 0.6 0"></a-entity>
    </a-entity>


    <a-entity position="0 0 0" rotation="0 0 0" scale="1 1 1"
              class="override-materials" id="opencube_1661775611"
              gltf-model="url(http://127.0.0.1/wordpress/wp-content/uploads/Models/OpenCube.glb)"
    ></a-entity>

    <a-plane position="0 1 0" rotation="-90 0 0" color="#ff0000" height="1" width="1" scale="2 2 2" static-mask-me></a-plane>

    <a-ocean ocean-state="wind_velocity: 0.25 0.25; height_offset:0; large_normal_map: img/water-normal-1.png;     small_normal_map: img/water-normal-2.png" shadow="receive: true"  render-order></a-ocean>



    <a-entity position="0 0 0" id="mylightSun_1661775653target"></a-entity>
    <a-sun-sky material="side:back; sunPosition: 0 100 0"></a-sun-sky>
    <a-light position="100 100 0" rotation="0 0 0" scale="1 1 1"
             light="type:directional;color:#ffffff;intensity:1;" target="#mylightSun_1661775653target"></a-light>
</a-scene>
</body>
</html>`

[jimver04]

As regads upper view ok.

As regards inside the keel of the ship, I can place two masks opposite but it is not the best thing.

Perhaps I will put a trigger to make ocean invisible when entering the keel.

[Dante83]

"node.renderOrder = 999;"

This reminds me a bit of z-index on the web, everyone fought to make sure their z-index was higher than anyone else's to make sure their html element and only theirs would be rendered last. I suspect a more robust solution is probably required or at least something adaptive, I will take a look into this the next time I jump into it, though. I suspect this could mess with the outputs in situations where you have a lot of other objects on screen, but I'll have to see.

[Dante83]

Returning to this now. I'm going to try and approach this with a orthographic user centered camera pointing straight down and will only render certain items from a user specified layer in the scene. This should give a heightmap in world space, and so given that I have the world space coordinates of every fragment, I can ask whether they're above or below a given surface. This will allow us to create surfaces that water cannot enter, but also allows overhanging hulls on ships, as the water should always be below that hull.

As a note for the future, a max offset height might be useful as well, or a layer that says "if water goes above this height render it again." That way, if the ship happens to hit a wave that's too high, the water will go right over the surface, but wouldn't 'render inside the ship' for instance. For now, to see if this is a working solution I'm just going to stick with a single render pass solution however.

[Dante83]

@jimver04

I realize it isn't pushed in a branch yet, but I think I have it. I now have an orthographic camera that tracks the primary camera and you will be able to add in custom geometry on a (hopefully) user specified layer. This geometry never gets drawn or has any complicated shaders as it's only used to produce a heightmap. Any water above this heightmap (inside the hull) will have their pixel fragments discarded, while anything below it (water below the hull just splashing against it) will be remain. You will need to give the hull of your ship a finite thickness with a second layer to avoid those little edge condition pixels, but this should allow you to create the effect you're looking for by just defining the interior of the hull geometry (but don't add the deck or it will block the camera's view).