bevyengine / bevyengine/bevy

Skybox in WASM

Open
#16,424 3 comments 0 reactions 0 assignees View on GitHub
A-Rendering C-Bug O-Web O-WebGL2 S-Needs-Investigation
Dominant language
Rust
Stars
48.2k
Forks
4.8k
Avg merge
3d 16h
Merged PRs (30d)
171

Description

Hello, I've been trying to have a skybox working in wasm but whatever the tool I used or flags or so it is not visible yet I dont have any wrong log, here is my code :

```
use bevy::prelude::*;
use bevy::core_pipeline::Skybox;

pub struct SkyboxPlugin;

impl Plugin for SkyboxPlugin {
fn build(&self, app: &mut App) {
app
.insert_resource(SkyboxState::default())
.add_systems(Startup, setup_skybox)
.add_systems(
Update,
(
skybox_control_system,
log_skybox_status,
),
);
}
}

#[derive(Resource)]
struct SkyboxTexture {
image: Handle,
}

#[derive(Resource)]
struct SkyboxState {
visible: bool,
}

impl Default for SkyboxState {
fn default() -> Self {
Self {
visible: true,
}
}
}

fn setup_skybox(
mut commands: Commands,
asset_server: Res,
mut query: Query>,
) {
warn!("Setting up the skybox...");

// Load the cubemap texture
let cubemap_texture: Handle = asset_server.load("textures/skybox/cubemap.ktx2");

// Store the texture in a resource
commands.insert_resource(SkyboxTexture {
image: cubemap_texture.clone(),
});

// Add the skybox to the camera
for camera_entity in query.iter_mut() {
commands.entity(camera_entity).insert(Skybox {
image: cubemap_texture.clone(),
brightness: 1.0,
rotation: Quat::IDENTITY,
});
warn!("Skybox added to camera.");
}

warn!("Skybox setup complete.");
}

fn skybox_control_system(
keyboard_input: Res>,
mut skybox_state: ResMut,
time: Res

// Update brightness to toggle visibility
for mut skybox in query.iter_mut() {
skybox.brightness = if skybox_state.visible { 1.0 } else { 0.0 };
}
}

// Rotate skybox
let rotation_speed: f32 = 30.0; // degrees per second
let delta_time = time.delta_secs();
let mut rotated = false;

let mut delta_rotation = Quat::IDENTITY;

if keyboard_input.pressed(KeyCode::ArrowLeft) {
delta_rotation *= Quat::from_rotation_y(rotation_speed.to_radians() * delta_time);
rotated = true;
}
if keyboard_input.pressed(KeyCode::ArrowRight) {
delta_rotation *= Quat::from_rotation_y(-rotation_speed.to_radians() * delta_time);
rotated = true;
}
if keyboard_input.pressed(KeyCode::ArrowUp) {
delta_rotation *= Quat::from_rotation_x(rotation_speed.to_radians() * delta_time);
rotated = true;
}
if keyboard_input.pressed(KeyCode::ArrowDown) {
delta_rotation *= Quat::from_rotation_x(-rotation_speed.to_radians() * delta_time);
rotated = true;
}

if rotated {
// Update the skybox rotation
for mut skybox in query.iter_mut() {
skybox.rotation *= delta_rotation;
}
warn!("Skybox rotated.");
}
}

fn log_skybox_status(
skybox_state: Res,
time: Res

```

how I created the skybox:

```
#!/bin/bash

# Set path to KTX tools
KTX_BIN_PATH="$HOME/ktx_software/KTX-Software-4.3.2-Linux-x86_64/bin"

# Check dependencies
check_dependencies() {
if [ ! -d "$KTX_BIN_PATH" ]; then
echo "Error: KTX tools not found in $KTX_BIN_PATH"
exit 1
fi
}

create_ktx2() {
local skybox_dir="$1"
local output_file="$2"

echo "Creating KTX2 file from skybox PNGs..."

# Create uncompressed KTX2 cubemap
if ! "$KTX_BIN_PATH/toktx" \
--t2 \
--cubemap \
--genmipmap \
--assign_oetf linear \
"$output_file" \
"${skybox_dir}/right.png" \
"${skybox_dir}/left.png" \
"${skybox_dir}/top.png" \
"${skybox_dir}/bottom.png" \
"${skybox_dir}/front.png" \
"${skybox_dir}/back.png"; then
echo "Error creating KTX2 file"
exit 1
fi

echo "Successfully created $output_file"
echo "File info:"
"$KTX_BIN_PATH/ktxinfo" "$output_file"
}

# Main script
main() {
local SKYBOX_DIR="bevy_webtransport/assets/textures/skybox"
local OUTPUT_FILE="$SKYBOX_DIR/cubemap.ktx2"

check_dependencies
create_ktx2 "$SKYBOX_DIR" "$OUTPUT_FILE"
}

main "$@"
```

I would like to know what are all the good possibilities and so, meaning on linux for target wasm we have toktx but also ktx and other + differents flags so would like to know you recommendations for wasm target

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the issue with the provided setup_skybox entry point, the Camera3d Skybox component, and assets/textures/skybox/cubemap.ktx2 in a WASM build. Inspect the skybox asset loading path and the KTX2 creation script and compare the resulting behavior in WASM. Done means identifying the supported configuration or documenting the remaining incompatibility and recommended flags.

Written by the indexing model from the issue text.

Assessment

Tech stack
rust, wasm
Domain
computer-graphics
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.