# Problem with gpgpu / water example

**URL:** <https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749>\
**Category:** Questions\
**Tags:** gpgpu\
**Created:** [August 7, 2020, 5:04pm UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749 "2020-08-07T17:04:12Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Eliott\_Herbert-Byrnes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliott_herbert-byrnes/32/12040_2.png) [@Eliott\_Herbert-Byrnes](https://discourse.threejs.org/u/Eliott_Herbert-Byrnes)\
**Post date:** [August 7, 2020, 5:04pm UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/1 "2020-08-07T17:04:12Z")

</div>

Hey,

when trying to run the above example, I receive this error within the initWater() function _‘Property ‘color’ does not exist on type ‘ShaderMaterial’.’_

I’m writing this in typescript and converting to js through npm.

> function initWater() {
> 
> ```
> var materialColor = 0x0040C0;
> 
> var geometry = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
> 
> // material: make a THREE.ShaderMaterial clone of THREE.MeshPhongMaterial, with customized vertex shader
> const material = new THREE.ShaderMaterial( {
> uniforms: THREE.UniformsUtils.merge( [
> THREE.ShaderLib['phong'].uniforms,
> {
> "heightmap": { value: null }
> }
> ] ),
> vertexShader: document.getElementById( 'waterVertexShader' ).textContent,
> fragmentShader: THREE.ShaderChunk['meshphong_frag']
> 
> } );
> 
> material.lights = true;
> 
> // Material attributes from THREE.MeshPhongMaterial
> material.color = new THREE.Color( materialColor );
> material.specular = new THREE.Color( 0x111111 );
> material.shininess = 50;
> 
> // Sets the uniforms with the material values
> material.uniforms["diffuse"].value = material.color;
> material.uniforms["specular"].value = material.specular;
> material.uniforms["shininess"].value = Math.max( material.shininess, 1e-4 );
> material.uniforms["opacity"].value = material.opacity;
> 
> // Defines
> material.defines.WIDTH = WIDTH.toFixed( 1 );
> material.defines.BOUNDS = BOUNDS.toFixed( 1 );
> 
> ```

Thanks

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 7, 2020, 8:09pm UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/2 "2020-08-07T20:09:10Z")

</div>

`color`, `specular` and `shininess` are not properties of the `THREE.ShaderMaterial`  
you need to set the uniforms directly.

Try changing your function to this.

```
function initWater() {
    var materialColor = 0x0040C0;
    var geometry = new THREE.PlaneBufferGeometry( BOUNDS, BOUNDS, WIDTH - 1, WIDTH - 1 );
    // material: make a THREE.ShaderMaterial clone of THREE.MeshPhongMaterial, with customized vertex shader
    const material: THREE.ShaderMaterial = new THREE.ShaderMaterial({
        uniforms: THREE.UniformsUtils.merge([
            THREE.ShaderLib['phong'].uniforms,
            {
                "heightmap": { value: null }
            }
        ]),
        vertexShader: document.getElementById('waterVertexShader').textContent,
        fragmentShader: THREE.ShaderChunk['meshphong_frag']
    });
    material.lights = true;
    // Material attributes from THREE.MeshPhongMaterial
    // material.color = new THREE.Color( materialColor );
    // material.specular = new THREE.Color( 0x111111 );
    // material.shininess = 50;
    // Sets the uniforms with the material values
    material.uniforms["diffuse"].value.setHex(materialColor);
    material.uniforms["specular"].value.setHex(0x111111);
    material.uniforms["shininess"].value = 50;
    material.uniforms["opacity"].value = material.opacity;
    // Defines
    material.defines.WIDTH = WIDTH.toFixed(1);
    material.defines.BOUNDS = BOUNDS.toFixed(1);
}
```

---

<div class="post-metadata">

**Author:** ![Eliott\_Herbert-Byrnes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliott_herbert-byrnes/32/12040_2.png) [@Eliott\_Herbert-Byrnes](https://discourse.threejs.org/u/Eliott_Herbert-Byrnes)\
**Post date:** [August 11, 2020, 9:57am UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/3 "2020-08-11T09:57:04Z")

</div>

Thanks Sean,

That seems to have cleared that problem up, although it still doesn’t seem to be working. I’m receiving these errors within my console.

> Uncaught TypeError: Cannot read property ‘add’ of undefined  
> at initWater (client.js:151)  
> at init (client.js:90)  
> at client.js:31

I’ve created a JSFiddle file with the code, it would be great if you could take a look. [https://jsfiddle.net/jdok2rac/](https://jsfiddle.net/jdok2rac/)

Great course by the way.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 11, 2020, 10:12am UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/4 "2020-08-11T10:12:21Z")

</div>

I get this error in your fiddle. “Uncaught ReferenceError: require is not defined”  
I cant fix that. I dont know how.

Where is the original example where you discovered this technique of cloning the meshphongmateral into a shader. I know it’s possible , but I don’t know where the information is that you are going by.

---

<div class="post-metadata">

**Author:** ![Eliott\_Herbert-Byrnes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliott_herbert-byrnes/32/12040_2.png) [@Eliott\_Herbert-Byrnes](https://discourse.threejs.org/u/Eliott_Herbert-Byrnes)\
**Post date:** [August 11, 2020, 10:31am UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/5 "2020-08-11T10:31:04Z")

</div>

Here is where I discovered the the technique

> <https://github.com/mrdoob/three.js/blob/fd046cbc06b7a93ed2e34090e7fe19c72afdde9f/examples/webgl_gpgpu_water.html>

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 11, 2020, 10:47am UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/6 "2020-08-11T10:47:08Z")

</div>

your fiddle doesn’t work full stop. Create an example that shows the actual error that you see.  
Line 151 in your error you pasted doesn’t seem to relate to line 151 in your fiddle. try codesandbox maybe. I can never get jsfiddle to work for me.

---

<div class="post-metadata">

**Author:** ![Eliott\_Herbert-Byrnes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliott_herbert-byrnes/32/12040_2.png) [@Eliott\_Herbert-Byrnes](https://discourse.threejs.org/u/Eliott_Herbert-Byrnes)\
**Post date:** [August 11, 2020, 11:37am UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/7 "2020-08-11T11:37:31Z")

</div>

Hey,

I’ve uploaded part of the project to codesandbox, I’m still getting the error

> 'Property ‘\_\_\_’ does not exist on type ‘Shadermaterial’.

I’ve highlighted the lines in client.ts causing this error with \*\*\*

Sandbox: [interesting-booth-42bx4 - CodeSandbox](https://codesandbox.io/s/interesting-booth-42bx4?file=/src/client/client.ts)  
Where I’m pulling example from: [three.js examples](https://threejs.org/examples/#webgl_gpgpu_water)

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 11, 2020, 12:49pm UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/8 "2020-08-11T12:49:08Z")

</div>

> [@Eliott\_Herbert-Byrnes](#):
>
> 'Property ‘\_\_\_’ does not exist on type ‘Shadermaterial’.

Thats because,

> [@seanwasere](#):
>
> `color` , `specular` and `shininess` are not properties of the `THREE.ShaderMaterial`  
> you need to set the uniforms directly.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 11, 2020, 1:29pm UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/9 "2020-08-11T13:29:31Z")

</div>

In your original code  
change  
`const material = new THREE.ShaderMaterial( {`  
to  
`var material:any = new THREE.ShaderMaterial( {`

That way both the javascript and typescript complier will be happy.

**const** means you need to be more strict and you can’t just add a new property to material, eg material.color  
In the original code, using **var material** allows this dynamic addition of a property later in the code.

**var material:any** will tell the TS compiler to ignore that fact you declared it as a shadermaterial and also let you add the color, specular and shininess properties in the next few lines of code.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [August 11, 2020, 1:49pm UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/10 "2020-08-11T13:49:27Z")

</div>

Here is the original webgl gpgpu water example converted to the more strict version containing lots of **lets** and **consts** and **types** for the variables I could figure out.

> **[webgl gpgpu water example in TypeScript - CodeSandbox](https://codesandbox.io/s/webgl-gpgpu-water-example-in-typescript-7sjbo?file=%2Fsrc%2Fclient%2Fclient.ts)**
>
> webgl gpgpu water example in TypeScript by Sean-Bradley using @types/dat.gui, @types/express, express, three, typescript

---

<div class="post-metadata">

**Author:** ![Eliott\_Herbert-Byrnes](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/eliott_herbert-byrnes/32/12040_2.png) [@Eliott\_Herbert-Byrnes](https://discourse.threejs.org/u/Eliott_Herbert-Byrnes)\
**Post date:** [August 11, 2020, 2:33pm UTC](https://discourse.threejs.org/t/problem-with-gpgpu-water-example/17749/11 "2020-08-11T14:33:51Z")

</div>

Thank you!!!