[SOVLED] Fix the bugs caused by multi-scene when using <Water reflections>

Help & Support
1

Here is the link of the amazing water reflection project: link

I made a tiny patch to fix the bugs caused by multi-scene like this :wink: :

image

image

// Fix problems caused by skybox layers (when there are more than 1 scene exist)
var WaterPatch = pc.createScript('waterPatch');

WaterPatch.prototype.initialize = function() {
    
    var comp = this.app.scene.layers;
    var reflectionLayer = comp.getLayerByName("WaterReflection");
    
    var self = this;
    this.app.scene.on("set:skybox", function() {
        reflectionLayer.addMeshInstances(self.app.scene.skyboxModel.meshInstances);
    });
    
};

// Called when switching scenes
WaterPatch.prototype.removeSkyReflection = function () {
    
    var comp = this.app.scene.layers;
    var reflectionLayer = comp.getLayerByName("WaterReflection");
    reflectionLayer.removeMeshInstances(this.app.scene.skyboxModel.meshInstances);
    console.log("remove complete");

};

Add this patch script on ‘Root’ entity in each scene, and comment off the conflict code in the original ‘Water’ script to use it. Ensure this patch is loaded after ‘water.js’.

The conflict code may looks like this:

    this.app.scene.on("set:skybox", function() {
        reflectionLayer.addMeshInstances(self.app.scene.skyboxModel.meshInstances);
    });
2

@LeXXik This one is for you :slight_smile:

3

Hey, @kprimo, thank you for looking into this. I would like to understand the root of the error, so I can make a proper fix. However, I would need a simple project, where I could reproduce the problem you are describing. Do you think you could make a blank project that gives this error?

4

Sure, here is the link to the project which has been patched.

I duplicated a scene and rename it to ‘Scene01’, and changed the skybox of this scene.

All scripts and assets I added to the project have been put into a folder called ‘patch’ (except the new skybox) under the project root.

image

You can use the switch button at the bottom-left corner to switch one scene to another.

image
image892×797 209 KB

The code I modified was:

  1. water.js (at line 360), comment on the conflict code.
    // // Must comment this off when patching
    // this.app.scene.on("set:skybox", function() {
    //     reflectionLayer.addMeshInstances(self.app.scene.skyboxModel.meshInstances);
    // });
    
    // Ask for depth
  1. changelevel.js (at line 17), call ‘removeSkyReflection’ function
        // Fix WaterReflection Layer Problem
        var WaterPatch = this.app.root.findByName('Root').script.waterPatch;
        if (WaterPatch){
            WaterPatch.removeSkyReflection();
        }
1 Like
5

Thank you for the details, @kprimo! I will look into it.

6

@kprimo thank you for creating a sample project, it was helpful. I made a fix, so this should work now without patching. Please, check.

1 Like
7

how to get bigger waves (height and/or reflections) - the current example is less optimal for small HHD