Water effect for lake

Help & Support
1

Hello, i was messing around with the water effect to make the lake move in Kallen, so i have this code https://playcanvas.com/editor/code/352037/water.js but the effect is like a piece of sky on ground. I would like to make the material semi transparent that should partially do the trick and get rid of the deep blue color that doesn’t seems to want to leave. Any clue?
EDIT: to make waves smaller can i just reduce the waternormals.jpg from 1024 to 512?

2

I have tried to use the tiling like this this.material.normalMapTiling.set(5, 5); since if i want to make waves smaller i have to get normals bigger or tile that but don’t seems to work
EDIT: and nothing that i tried so far worked to make the water transparent, i tried to use setParameter to set opacity but it just ignored me … after long is nice to try to accomplish something new…this frustration is firing up my stubborness

3

Whenever i use material.update(); it give me this error Error: Not Implemented in base class why is that?

4

You can only call update on a pc.StandardMaterial. But you seem to be calling it on a pc.Material.

5

I see thanks for the explanation @will … i think i ended to try all the examples i found to set the opacity to transparent i will roll it from beginning tomorrow maybe by mistake i find the right one lol

6

@will in the pc.Material API there is this line though
update Applies any changes made to the material’s properties.
is that an error?

7

Don’t know why but my water don’t want to became transparent. i did this

update: function (dt) {
            this.time += dt * this.timeScale;
            this.material.setParameter('uTime', this.time);
            this.material.setParameter('sunColor', this.sunColor.data);
            this.material.setParameter('sunDirection', this.sunDirection.data);
            this.material.setParameter('horizonColor', this.horizonColor.data);
            this.material.setParameter('zenithColor', this.zenithColor.data);
            **this.material.setParameter('material_opacity', 0.5);**
**            this.meshes = this.entity.model.meshInstances; **
**            for (i = 0; i < this.meshes.length; i++) {**
**                this.meshes[i].material.blendType = pc.BLEND_NORMAL;**
**            }**
}

adding the last lines but don’'t change

8

Does your shader support that uniform (material_opacity)?

9

I have added this line to fshader “uniform float material_opacity;”, but no luck do i miss something?

10

So now the opacity value is being passed into the fragment shader, but you’re not doing anything with it. You need to do something like changing this:

            "    gl_FragColor = vec4(albedo, 1.0);",

To this:

            "    gl_FragColor = vec4(albedo, material_opacity);",
11

yup, that works, where i can find some documentation about this to read, since i don’t completely get the code and i want to tile the material to make waves smaller

12

We don’t have a section in the User Manual yet on GLSL and writing shaders. It’s one of the more advanced topics for using PlayCanvas and we’d definitely like to cover it.

But in the meantime, there are plenty of online resources dedicated to GLSL (it’s a WebGL thing, not a PlayCanvas thing).

13

Thanks a lot @will i will look into it