Skybox Animation

…do you see a way to animate a skybox?

Original Post on Discord

by user 684154017479524352

Hello there – we have an experimental AI bot :robot: that might be able to help you with your question. Would you like to try this out?

How it works:
Reply to the messages of the bot that end with a thread_id to interact with it and ask follow-up questions. You can also mention the bot directly in this channel to get help.

Help requested: please wait a moment…

Hello Matmat, Needle Engine supports exporting the Unity skybox and custom reflection (if any) baked into a texture. They are automatically exported inside the NEEDLE_lightmaps extension. If you need to change the resolution of the skybox, you can add a SkyboxExportSettings component to your scene.

Regarding animation, the skybox texture itself is static once exported, but you can create the illusion of animation by manipulating the material properties that reference the skybox texture using Needle Engine’s support for the KHR_animation_2 extension, where you could animate almost all properties, including those you use in scripts. This could allow you to change the appearance of the skybox over time within your application if that’s what you’re looking for (see the documentation).

1 messages left GPT 4
thread_hPLe0TZoCpsFqlGhRJxpWoMk

The standard threejs skybox can not be animated. You an make a inverted sphere mesh and animate material properties instead

Ah, good approach, thanks.

by user 684154017479524352

three.js examples found this example. What kind of shader do I have to use for this? Unfortunately, a material with emissive is not possible here.

by user 684154017479524352

Ah if that’s the look you’re after you can create a hemisphere light in one of your components and add it to the scene:
https://threejs.org/docs/#api/en/lights/HemisphereLight

Here is the src code for the example (see the bottom right corner in the threejs examples to learn how they are made) three.js/examples/webgl_lights_hemisphere.html at master · mrdoob/three.js · GitHub

Here they build the shader: three.js/examples/webgl_lights_hemisphere.html at 09fe0527a9aa5aaca7aaf17531e6c0d0efaa8c59 · mrdoob/three.js · GitHub

You dont have to do it exactly like this of course +
(Getting it from the html file) :slightly_smiling_face: you can save the shader vertex and fragment passes as a constant string at the top of your script for example and just set it

Nice, THX!

by user 684154017479524352