# Vite shadowOnly shaders

**URL:** <https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619>\
**Category:** Questions\
**Created:** [August 7, 2024, 6:52pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619 "2024-08-07T18:52:53Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kruptein](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kruptein/32/14789_2.png) [@Kruptein](https://forum.babylonjs.com/u/Kruptein)\
**Post date:** [August 7, 2024, 6:52pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/1 "2024-08-07T18:52:54Z")

</div>

Hi, I’m in the process of upgrading from babylonjs 4 to 7 in a vite/vue codebase.

So far there doesn’t seem to be a lot of actual changes for my limited setup, but what did change is the loading of shaders seemingly.

The following short section:

```auto
const ground = MeshBuilder.CreateGround("ground", { width: 2000, height: 2000, subdivisions: 2 }, scene);
    const material = new ShadowOnlyMaterial("shadowOnly", scene);
    ground.material = material;
    ground.receiveShadows = true;

```

Now suddenly tries to download a couple files :

- shadowOnly.vertex.fx
- shadowOnly.fragment.fx

In version 4 this did not happen, so any idea if there are some new imports I need to ensure to be loaded or did shader handling change somewhat and do I need to actually have those files somewhere downloadable?

I’ve tried importing

`import "@babylonjs/materials/shadowOnly/shadowOnly.fragment";`

directly, but that did not have any effect.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [August 7, 2024, 8:52pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/2 "2024-08-07T20:52:57Z")

</div>

cc @RaananW

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 7, 2024, 10:00pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/3 "2024-08-07T22:00:23Z")

</div>

I’ve just tried to create a new vite/vue/babylonjs project and I have no issues:

app.ts

```auto
import { ArcRotateCamera } from "@babylonjs/core/Cameras/arcRotateCamera";
import { Engine } from "@babylonjs/core/Engines/engine";
import { Vector3 } from "@babylonjs/core/Maths/math.vector";
import { Scene } from "@babylonjs/core/scene";
import { ShadowOnlyMaterial } from "@babylonjs/materials/shadowOnly/shadowOnlyMaterial";
import { Color3 } from "@babylonjs/core/Maths/math.color";

class App {
  constructor() {
    // create the canvas html element and attach it to the webpage
    var canvas = document.createElement("canvas");
    canvas.style.width = "98vw";
    canvas.style.height = "98vh";
    canvas.id = "gameCanvas";
    document.body.appendChild(canvas);

    // initialize babylon scene and engine
    var engine = new Engine(canvas, true);
    var scene = new Scene(engine);
    scene.ambientColor = new Color3(0.4, 0.4, 0.4)

    var camera = new ArcRotateCamera("Camera", -0.5, 0.8, 200, Vector3.Zero(), scene);
    camera.attachControl(canvas, true)

    const material = new ShadowOnlyMaterial("shadowOnly", scene);

    // run the main render loop
    engine.runRenderLoop(() => {
      scene.render();
    });
  }
}
new App();

```

```auto
{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@babylonjs/materials": "^7.19.1",
    "vue": "^3.4.35"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.1.2",
    "typescript": "^5.5.3",
    "vite": "^5.4.0",
    "vue-tsc": "^2.0.29"
  }
}

```

Can you share your project?

---

<div class="post-metadata">

**Author:** ![Kruptein](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kruptein/32/14789_2.png) [@Kruptein](https://forum.babylonjs.com/u/Kruptein)\
**Post date:** [August 8, 2024, 8:00am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/4 "2024-08-08T08:00:27Z")

</div>

I can confirm that it also works on my end with your code.

What’s even better/worse is that in a new project with just the main babylon code copied over from my main project, it also does not exhibit the extra shader download behaviour.

I don’t really understand what’s causing the divergent behaviour as nothing else in my project interacts with babylon.

My project is opensource, so sharing it is not a problem, it will require a bit of setup though as it also requires a python server to run and currently requires an `npm link` to get another of my libraries related to babylon code that is also in an upgrade process.

I’ve written instructions below on getting that setup, but I totally understand if it’s not something you’re interested in figuring out. I can see in the network tab that the following backtrace is the initiator of the `shadowOnly.[vertex|fragment].fx` files. I’m not sure if that helps in any way

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/f/5/f579356e9505ed83d11d634cf6eeff6a84432bdc.png)

main project: [GitHub - Kruptein/PlanarAlly: A companion tool for when you travel into the planes.](https://github.com/Kruptein/PlanarAlly) branch `feature/dice-ui-rework`  
dice library: [GitHub - Kruptein/planarally-dice](https://github.com/Kruptein/planarally-dice) branch `feature/rework`

in the dice lib:

```auto
npm i
npm run build
npm link

```

in the main project:

```auto
# server: (requires a recent python 3 install)
cd server
pip install -r requirements.txt
python planarally.py dev

#client
cd client
npm i
npm link @planarally/dice
npm run dev

```

Reproducing:

1. Open a browser to `localhost:8000`,
2. register an account, can be anything (e.g. `test` with pw `test`, this is purely local)
3. create a new game
4. in the bottom right of the screen there is a dice icon, pressing that should asynchronously load the 3D related code, which in my case logs a bunch of errors to the console about the shader

edit: The core babylonjs code is found under `client/src/game/dice/environment`

This is the file that I copied over to a clean project, using the same `@planarally/dice` linked lib, without issues.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 8, 2024, 8:38am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/5 "2024-08-08T08:38:33Z")

</div>

![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/3/431da8e9d363cd94218a07aa262a25bb8af1758c.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/1/f/1fcf1e90acb4434b69cb603c018a9880cd68e442.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/0/0/00d83ff2f10de6af45dfe6559039ee1c75f2a423.png)

All setup & running. Generates an error:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/c/7/c7cca54ce5334af2627582ff2d812e9efe64f016.png)

Any ideas?

---

<div class="post-metadata">

**Author:** ![Kruptein](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kruptein/32/14789_2.png) [@Kruptein](https://forum.babylonjs.com/u/Kruptein)\
**Post date:** [August 8, 2024, 8:52am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/6 "2024-08-08T08:52:39Z")

</div>

You’re probably using the wrong port, try with 8000 instead of 8080

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 8, 2024, 9:46am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/7 "2024-08-08T09:46:47Z")

</div>

I didn’t change anything however if I have to, please navigate me where should I change it.

As you can on the screenshot ports used are 8000 and 8080.

Why can’t I find the `@babylonjs/core` dependency in your `client/package.json` file?

---

<div class="post-metadata">

**Author:** ![Kruptein](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kruptein/32/14789_2.png) [@Kruptein](https://forum.babylonjs.com/u/Kruptein)\
**Post date:** [August 8, 2024, 9:53am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/8 "2024-08-08T09:53:22Z")

</div>

8000 and 8080 are correct ports, you indeed don’t have to change anything.

The output you showed, is the result of browsing to `http://localhost:8080`, can you try `http://localhost:8000` instead.

I originally had the core dependency in my package.json, but I saw that in your example project you gave earlier, you only specified the material so I tried that as well. Feel free to re-add it in your local version. As far as I can tell it had no effect.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 8, 2024, 10:45am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/9 "2024-08-08T10:45:29Z")

</div>

This is something for @RaananW to look at. Could you please?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/3/53de8ec088dffcbb31a7b6d43aba2baeefa1b7d5.png)

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/2/9/29859cfc0b46f7f6cc17a3c495d59ae0092f5c2d.jpeg)

it doesn’t read the shader code from the bundle.

Similar to this one:

> [@shadowOnlyMaterial can not be created](https://forum.babylonjs.com/t/shadowonlymaterial-can-not-be-created/29471):
>
> I am using Babylonjs in an Vuejs project. I want to create a transparent ground which can receive shadows. I have loaded the @babylonjs/materials library. Here is the code: import { ShadowOnlyMaterial } from “@babylonjs/materials/shadowOnly/shadowOnlyMaterial”; … const ground = BABYLON.MeshBuilder.CreatePlane(“ground”, { height: 3, width: 3 }); ground.material = new ShadowOnlyMaterial(‘mat’, scene); When I run the project I get the following error: material.js?0c4d:220 Uncaught (in promis…

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 8, 2024, 11:50am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/10 "2024-08-08T11:50:51Z")

</div>

Probably a side-effect issue. Cloning the repo right now

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 8, 2024, 11:53am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/11 "2024-08-08T11:53:04Z")

</div>

> [@Kruptein](#):
>
> feature/dice-ui-rework

Wait, sorry - is there a simple reproduction here? Or is it really needed to clone two and install pip?

---

<div class="post-metadata">

**Author:** ![Kruptein](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kruptein/32/14789_2.png) [@Kruptein](https://forum.babylonjs.com/u/Kruptein)\
**Post date:** [August 8, 2024, 11:55am UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/12 "2024-08-08T11:55:30Z")

</div>

Sadly as I’m in the middle of doing the upgrades to babylon I can’t offer something better right now.

I tried doing a smaller reproduction in a standalone project, but haven’t been able to reproduce it there.

Is there a way for me to forcefully load all side-effects in the meantime to just verify if that’s the issue?

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 8, 2024, 12:03pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/13 "2024-08-08T12:03:43Z")

</div>

The thing is this - the shaders are already loaded/imported if you are importing from shadowOnlyMaterial. I assume you are not just trying to use the shaders.

Anyhow, try loading these in one of your main entry points:

```javascript
import "@babylonjs/materials/shadowOnly/shadowOnly.fragment.js";
import "@babylonjs/materials/shadowOnly/shadowOnly.vertex.js";

```

This should populate them in the shader lib and should prevent babylon from trying to load them from the network.

---

<div class="post-metadata">

**Author:** ![Kruptein](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/kruptein/32/14789_2.png) [@Kruptein](https://forum.babylonjs.com/u/Kruptein)\
**Post date:** [August 8, 2024, 12:08pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/14 "2024-08-08T12:08:35Z")

</div>

I already tried those sadly.

I’ll dive deeper again myself later, thanks for trying to help

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 8, 2024, 12:18pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/15 "2024-08-08T12:18:02Z")

</div>

If you can somehow reproduce this in a simpler way I will be very happy to debug this. check also if side effects are not turned off for some reason and tree-shaking on rollup is not set to the maximum because it will remove these lines.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 8, 2024, 12:40pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/16 "2024-08-08T12:40:03Z")

</div>

Isn’t it the case that the babylon build ignored these side effects?

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/6/a/6a159066b1b87ed618a9a4b6ffc23860a535c869.jpeg)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 8, 2024, 12:41pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/17 "2024-08-08T12:41:32Z")

</div>

Yes, this is already there. I also said that in my first sentence 🙂

But for some reason, in this setup, these lines are being removed. Either side effects configuration of the bundler or global side-effects reduction. Or something else, but I will need a reproduction.

A different solution would be to actually serve these files, but I would rather not go down this path, it should work out of the box.

---

<div class="post-metadata">

**Author:** ![roland](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/roland/32/38940_2.png) [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [August 8, 2024, 12:41pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/18 "2024-08-08T12:41:48Z")

</div>

Whatever I do it’s trying to get those chunks from

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/5/3/53de8ec088dffcbb31a7b6d43aba2baeefa1b7d5.png)

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 8, 2024, 12:43pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/19 "2024-08-08T12:43:14Z")

</div>

This is because they were not loaded to the shader store. Which usually means the side effects didn’t run.

---

<div class="post-metadata">

**Author:** ![RaananW](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/raananw/32/28955_2.png) [@RaananW](https://forum.babylonjs.com/u/RaananW)\
**Post date:** [August 8, 2024, 12:43pm UTC](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619/20 "2024-08-08T12:43:50Z")

</div>

I am checking if some other changes might have caused that. will get back to you on this one

[Next page](https://forum.babylonjs.com/t/vite-shadowonly-shaders/52619.md?page=2)