@dcl-regenesislabs/bevy-explorer-web 0.1.0-18229784557.commit-ef374b9

package/assets/shaders/simplex.wgsl

@@ -0,0 +1,77 @@
+// simplex noise
+fn simplex_noise_3d(v: vec3<f32>) -> f32 {
+    let C = vec2(1. / 6., 1. / 3.);
+    let D = vec4(0., 0.5, 1., 2.);
+
+    // first corner
+    var i = floor(v + dot(v, C.yyy));
+    let x0 = v - i + dot(i, C.xxx);
+
+    // other corners
+    let g = step(x0.yzx, x0.xyz);
+    let l = 1. - g;
+    let i1 = min(g.xyz, l.zxy);
+    let i2 = max(g.xyz, l.zxy);
+
+    // x0 = x0 - 0. + 0. * C
+    let x1 = x0 - i1 + 1. * C.xxx;
+    let x2 = x0 - i2 + 2. * C.xxx;
+    let x3 = x0 - 1. + 3. * C.xxx;
+
+    // permutations
+    i = i % vec3(289.);
+    let p = permute_4_(permute_4_(permute_4_(
+        i.z + vec4(0., i1.z, i2.z, 1.)) +
+        i.y + vec4(0., i1.y, i2.y, 1.)) +
+        i.x + vec4(0., i1.x, i2.x, 1.)
+    );
+
+    // gradients (NxN points uniformly over a square, mapped onto an octahedron)
+    let n_ = 1. / 7.; // N=7
+    let ns = n_ * D.wyz - D.xzx;
+
+    let j = p - 49. * floor(p * ns.z * ns.z); // mod(p, N*N)
+
+    let x_ = floor(j * ns.z);
+    let y_ = floor(j - 7. * x_); // mod(j, N)
+
+    let x = x_ * ns.x + ns.yyyy;
+    let y = y_ * ns.x + ns.yyyy;
+    let h = 1. - abs(x) - abs(y);
+
+    let b0 = vec4(x.xy, y.xy);
+    let b1 = vec4(x.zw, y.zw);
+
+    let s0 = floor(b0) * 2. + 1.;
+    let s1 = floor(b1) * 2. + 1.;
+    let sh = -step(h, vec4(0.));
+
+    let a0 = b0.xzyw + s0.xzyw * sh.xxyy;
+    let a1 = b1.xzyw + s1.xzyw * sh.zzww;
+
+    var p0 = vec3(a0.xy, h.x);
+    var p1 = vec3(a0.zw, h.y);
+    var p2 = vec3(a1.xy, h.z);
+    var p3 = vec3(a1.zw, h.w);
+
+    // normalize gradients
+    let norm = taylor_inv_sqrt_4_(vec4(dot(p0, p0), dot(p1, p1), dot(p2, p2), dot(p3, p3)));
+    p0 = p0 * norm.x;
+    p1 = p1 * norm.y;
+    p2 = p2 * norm.z;
+    p3 = p3 * norm.w;
+
+    // mix final noise value
+    var m = 0.6 - vec4(dot(x0, x0), dot(x1, x1), dot(x2, x2), dot(x3, x3));
+    m = max(m, vec4(0.));
+    m *= m;
+    return 42. * dot(m * m, vec4(dot(p0, x0), dot(p1, x1), dot(p2, x2), dot(p3, x3)));
+}
+
+fn permute_4_(x: vec4<f32>) -> vec4<f32> {
+    return ((x * 34. + 1.) * x) % vec4<f32>(289.);
+}
+
+fn taylor_inv_sqrt_4_(r: vec4<f32>) -> vec4<f32> {
+    return 1.79284291400159 - 0.85373472095314 * r;
+}

package/assets/shaders/stretch_uv_material.wgsl

@@ -0,0 +1,79 @@
+#import bevy_ui::ui_vertex_output::UiVertexOutput
+
+@group(1) @binding(0) var image_texture: texture_2d<f32>;
+@group(1) @binding(1) var image_sampler: sampler;
+@group(1) @binding(2) var<uniform> uvs: array<vec4<f32>,2>;
+@group(1) @binding(3) var<uniform> color: vec4<f32>;
+
+fn sd_rounded_box(point: vec2<f32>, size: vec2<f32>, corner_radii: vec4<f32>) -> f32 {
+    // If 0.0 < y then select bottom left (w) and bottom right corner radius (z).
+    // Else select top left (x) and top right corner radius (y).
+    let rs = select(corner_radii.xy, corner_radii.wz, 0.0 < point.y);
+    // w and z are swapped above so that both pairs are in left to right order, otherwise this second 
+    // select statement would return the incorrect value for the bottom pair.
+    let radius = select(rs.x, rs.y, 0.0 < point.x);
+    // Vector from the corner closest to the point, to the point.
+    let corner_to_point = abs(point) - 0.5 * size;
+    // Vector from the center of the radius circle to the point.
+    let q = corner_to_point + radius;
+    // Length from center of the radius circle to the point, zeros a component if the point is not 
+    // within the quadrant of the radius circle that is part of the curved corner.
+    let l = length(max(q, vec2(0.0)));
+    let m = min(max(q.x, q.y), 0.0);
+    return l + m - radius;
+}
+
+fn sd_inset_rounded_box(point: vec2<f32>, size: vec2<f32>, radius: vec4<f32>, inset: vec4<f32>) -> f32 {
+    let inner_size = size - inset.xy - inset.zw;
+    let inner_center = inset.xy + 0.5 * inner_size - 0.5 * size;
+    let inner_point = point - inner_center;
+
+    var r = radius;
+
+    // Top left corner.
+    r.x = r.x - max(inset.x, inset.y);
+
+    // Top right corner.
+    r.y = r.y - max(inset.z, inset.y);
+
+    // Bottom right corner.
+    r.z = r.z - max(inset.z, inset.w); 
+
+    // Bottom left corner.
+    r.w = r.w - max(inset.x, inset.w);
+
+    let half_size = inner_size * 0.5;
+    let min_size = min(half_size.x, half_size.y);
+
+    r = min(max(r, vec4(0.0)), vec4<f32>(min_size));
+
+    return sd_rounded_box(inner_point, inner_size, r);
+}
+
+fn draw(in: UiVertexOutput, color: vec4<f32>) -> vec4<f32> {
+    // Signed distances. The magnitude is the distance of the point from the edge of the shape.
+    // * Negative values indicate that the point is inside the shape.
+    // * Zero values indicate the point is on the edge of the shape.
+    // * Positive values indicate the point is outside the shape.
+
+    let point = (in.uv - vec2<f32>(0.5)) * in.size;
+
+    // Signed distance from the border's internal edge (the signed distance is negative if the point 
+    // is inside the rect but not on the border).
+    // If the border size is set to zero, this is the same as the external distance.
+    let internal_distance = -sd_inset_rounded_box(point, in.size, in.border_radius, in.border_widths);
+
+    let t = saturate(internal_distance + 1.0);
+
+    return vec4(color.rgb, saturate(color.a * t));
+}
+
+@fragment
+fn fragment(in: UiVertexOutput) -> @location(0) vec4<f32> {
+    // this is a bit lazy; really we should find a way to push the uvs directly into the vertex buffer
+    let uv = mix(mix(uvs[0].xy, uvs[1].zw, in.uv.x), mix(uvs[0].zw, uvs[1].xy, in.uv.x), 1.0 - in.uv.y) * vec2<f32>(1.0, -1.0) + vec2<f32>(0.0, 1.0);
+
+    let texture_color = textureSample(image_texture, image_sampler, uv) * color;
+    return draw(in, texture_color);
+    // return texture_color;
+}

package/assets/shaders/text_quad_vertex.wgsl

@@ -0,0 +1,78 @@
+#import bevy_pbr::{
+    mesh_functions,
+    view_transformations::position_world_to_clip,
+    pbr_bindings::base_color_texture,
+    mesh_view_bindings::view,
+}
+#import bevy_render::instance_index::get_instance_index
+
+#ifdef PREPASS_PIPELINE
+    #import bevy_pbr::prepass_io::{Vertex, VertexOutput};
+#else
+    #import bevy_pbr::forward_io::{Vertex, VertexOutput};
+#endif
+
+struct TextQuadData {
+    uvs: vec4<f32>,
+    valign: f32,
+    halign: f32,
+    pix_per_m: f32,
+    add_y_pix: f32,
+    vertex_billboard: u32,
+}
+
+@group(2) @binding(200)
+var<uniform> quad_data: TextQuadData;
+
+@vertex
+fn vertex(vertex_no_morph: Vertex) -> VertexOutput {
+    var out: VertexOutput;
+    var vertex = vertex_no_morph;
+
+    // Use vertex_no_morph.instance_index instead of vertex.instance_index to work around a wgpu dx12 bug.
+    // See https://github.com/gfx-rs/naga/issues/2416 .
+    var model = mesh_functions::get_world_from_local(vertex_no_morph.instance_index);
+
+    // we assume a quad with [-0.5, 0.5] bounds in x,y and 0 in z
+    // then we take the pixels per meter and texture size to determine where the vertices should lie
+    let tex_dims = textureDimensions(base_color_texture);
+    let region_dims = quad_data.uvs.zw - quad_data.uvs.xy;
+    let modified_vertex_position = vec3<f32>(
+        (vertex.position.x + quad_data.halign) * f32(region_dims.x) / quad_data.pix_per_m,
+        ((vertex.position.y + quad_data.valign) * f32(region_dims.y) + quad_data.add_y_pix) / quad_data.pix_per_m,
+        0.0
+    );
+
+    if (quad_data.vertex_billboard == 1u) {
+        out.world_position = mesh_functions::mesh_position_local_to_world(
+            mat4x4<f32>(
+                vec4<f32>(view.world_from_view[0].xyz, 0.0),
+                vec4<f32>(view.world_from_view[1].xyz, 0.0),
+                vec4<f32>(view.world_from_view[2].xyz, 0.0),
+                vec4<f32>(model[3].xyz, 1.0)
+            ), 
+            vec4<f32>(modified_vertex_position, 1.0)
+        );
+    } else {
+        out.world_position = mesh_functions::mesh_position_local_to_world(model, vec4<f32>(modified_vertex_position, 1.0));
+    }
+    out.position = position_world_to_clip(out.world_position.xyz);
+
+    out.uv = mix(quad_data.uvs.xy, quad_data.uvs.zw, vertex.uv) / vec2<f32>(tex_dims.xy);
+
+    // Use vertex_no_morph.instance_index instead of vertex.instance_index to work around a wgpu dx12 bug.
+    // See https://github.com/gfx-rs/naga/issues/2416
+    out.instance_index = vertex_no_morph.instance_index;
+
+
+#ifdef NORMAL_PREPASS_OR_DEFERRED_PREPASS
+    out.world_normal = mesh_functions::mesh_normal_local_to_world(
+        vertex.normal,
+        // Use vertex_no_morph.instance_index instead of vertex.instance_index to work around a wgpu dx12 bug.
+        // See https://github.com/gfx-rs/naga/issues/2416
+        vertex_no_morph.instance_index
+    );
+#endif // NORMAL_PREPASS_OR_DEFERRED_PREPASS
+
+    return out;
+}

package/assets/ui/app_settings.dui

@@ -0,0 +1,91 @@
+<define-template id="settings-tab">
+    <div style="position-type: absolute; width: 100%; height: 100%; flex-grow: 1; flex-direction: row;">
+        <div style="flex-direction: column; width: 70%; height: 100%">
+            <vscroll>
+                <div id="settings" style="width: 100%; flex-direction: column; margin: 0px 2vmin 0px 0px;" />
+            </vscroll>
+        </div>
+        <div style="width: 30%; height: 100%; flex-direction: column;">
+            <hr />
+            <large-text text="Setting Info" />
+            <hr-thin />
+            <vscroll>
+                <div style="margin: 1vmin">
+                    <med-text text="Hover a setting to show a description" id="settings-description" style="color: black" />
+                </div>
+            </vscroll>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="enum-setting">
+    <div style="width: 100%; flex-direction: row; align-items: center;" interact="true">
+        <div style="flex-direction: column; align-items: flex-end; width: 50%; margin: 0px 2vmin 0px 0px;">
+            <large-text text="@title" style="color: black" />
+        </div>
+        <div style="width: 50%; flex-direction: row; align-items: center; margin: 1vmin">
+            <div><button img="images/left-arrow.png" onclick="@prev" image-width="5vmin" image-height="5vmin" /></div>
+            <bounds 
+                style="flex-grow: 1; padding: 1vmin; justify-content: center;"
+                corner-size="2vmin"
+                blend-size="0.5vmin"
+                border-size="1vmin"
+                border-color="#7f569e"
+                color="#b2a1bf"
+                focus="block" 
+            >
+                <large-text id="setting-label" text="@label-initial" style="color: #222222;" />
+            </bounds>
+            <div><button img="images/right-arrow.png" onclick="@next" image-width="5vmin" image-height="5vmin" /></div>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="int-setting">
+    <div style="width: 100%; flex-direction: row; align-items: center;" interact="true">
+        <div style="flex-direction: column; align-items: flex-end; width: 50%; margin: 0px 2vmin 0px 0px;">
+            <large-text text="@title" style="color: black" />
+        </div>
+        <div style="width: 50%; flex-direction: row; align-items: center; margin: 1vmin">
+            <div><button img="images/left-arrow.png" onclickrepeat="@prev" image-width="5vmin" image-height="5vmin" /></div>
+            <div style="flex-direction: column; flex-grow: 1; align-items: center;">
+                <med-text text="@label-initial" id="setting-label" />
+                <div style="flex-direction: row; width: 100%;">
+                    <bounds 
+                        id="container"
+                        style="flex-grow: 1; margin: 1vmin; padding: 1vmin; height: 3vmin; justify-content: center; align-items: center;"
+                        corner-size="2vmin"
+                        blend-size="0.5vmin"
+                        border-size="1vmin"
+                        border-color="#7f569e"
+                        color="#b2a1bf"
+                        interact="true"
+                        focus="block" 
+                    >
+
+                        <div id="marker" style="position-type: absolute; max-width: 0px; max-height: 0px; align-items: center; justify-content: center; left: '@initial-offset'">
+                            <bounds id="grip" style="position-type: absolute; width: 4vmin; height: 4vmin;"
+                                corner-size="2vmin"
+                                blend-size="2vmin"
+                                border-size="1vmin"
+                                border-color="#7f569e"
+                                color="#b2a1bf"
+                            >
+                                <bounded style="width: 100%; height: 100%" bound-image="images/grip.png" />
+                            </bounds>
+                        </div>
+                    </bounds>
+                </div>
+            </div>
+            <div><button img="images/right-arrow.png" onclickrepeat="@next" image-width="5vmin" image-height="5vmin" /></div>
+        </div>
+    </div>
+</define-template>
+
+<define-template id="settings-header">
+    <div style="width: 100%; flex-direction: column; margin: 0vmin 1vmin 1vmin 1vmin;">
+        <hr />
+        <large-text text="@label" />
+        <hr-thin />
+    </div>
+</define-template>

package/assets/ui/avatar.dui

@@ -0,0 +1,18 @@
+<define-template id="avatar-nametag">
+    <div>
+        <div style="margin: 5px;">
+            <bounds
+                style="position-type: absolute; width: 100%; height: 100%;"
+                corner-size="1.5vmin"
+                blend-size="0vmin"
+                border-size="0.75vmin"
+                border-color="#eeeeee"
+                color="#446134"
+            >
+            </bounds>
+            <div style="margin: 5px; padding: 3px;">
+                <med-text text="@name" style="text-align: center;" wrap="false"/>
+            </div>
+        </div>
+    </div>
+</define-template>

package/assets/ui/button.dui

@@ -0,0 +1,78 @@
+<!-- don't use directly, use "button" template from button.rs-->
+<define-template id="button-base-text">
+    <div id="button-node" style="
+        flex-direction: column;
+        align-self: stretch;
+        align-items: center;
+        justify-content: center;
+        margin: 0.35vmin 0.7vmin 0.35vmin 0.7vmin;
+    ">
+        <bounds id="button-background" 
+            style="position-type: absolute; width: 100%; height: 100%;"
+            corner-size="1.5vmin"
+            blend-size="0.125vmin"
+            border-size="0.75vmin"
+            border-color="#9c73af"
+            styles="active: #ccccff; inactive: #7f569e; hover: #e2d1ff; disabled: #555555;"
+            sounds="hover: 'generic_button_hover.wav'; press: 'generic_button_press.wav'"
+        />
+        <div style="
+            margin: 1vmin;
+            align-self: stretch;
+            align-items: center;
+            justify-content: center;
+        ">
+            <med-text id="label" text="@label" style="
+                text-align: center;
+                color: black;
+            " />
+        </div>
+    </div>
+</define-template>
+
+<!-- don't use directly, use "button" template from button.rs-->
+<define-template id="button-base-notext">
+    <div id="button-node" style="
+        flex-direction: column;
+        align-self: stretch;
+        align-items: center;
+        justify-content: center;
+        margin: 0.35vmin 0.7vmin 0.35vmin 0.7vmin;
+        padding: 1vmin;
+    ">
+        <bounds id="button-background" 
+            style="position-type: absolute; width: 100%; height: 100%;"
+            corner-size="1.5vmin"
+            blend-size="0.125vmin"
+            border-size="0.75vmin"
+            border-color="#9c73af"
+            styles="active: #ccccff; inactive: #7f569e; hover: #e2d1ff; disabled: #555555;"
+            sounds="hover: 'generic_button_hover.wav'; press: 'generic_button_press.wav'"
+        />
+    </div>
+</define-template>
+
+<!-- don't use directly, use "button" template from button.rs-->
+<define-template id="button-base-image">
+    <div id="button-node" style="
+        flex-direction: column;
+        align-self: stretch;
+        align-items: center;
+        justify-content: center;
+        margin: 0.35vmin 0.7vmin 0.35vmin 0.7vmin;
+        width: '@width'; 
+        height: '@height';
+    ">
+        <bounds id="button-background" 
+            style="position-type: absolute; width: 100%; height: 100%;"
+            corner-size="1.5vmin"
+            blend-size="0.125vmin"
+            border-size="0.75vmin"
+            border-color="#9c73af"
+            bound-image="@img"
+            styles="active: #ccccff; inactive: #7f569e; hover: #e2d1ff; disabled: #555555;"
+            sounds="hover: 'generic_button_hover.wav'; press: 'generic_button_press.wav'"
+        >
+        </bounds>
+    </div>
+</define-template>

package/assets/ui/change-realm.dui

@@ -0,0 +1,46 @@
+<define-template id="change-realm">
+    <dialog title="Select a new realm" buttons="@buttons">
+        <div style="flex-direction: column">
+            <div>
+                <large-text style="color: black;" text="Current realm: " />
+                <large-text style="color: black;" id="current-realm" text="@realm" />
+            </div>
+        </div>
+        <hr />
+        <div style="flex-direction: column; width: 100%">
+            <bounds 
+                style="flex-grow: 1; justify-content: center; width: 95%;"
+                corner-size="2vmin"
+                blend-size="0.5vmin"
+                border-size="1vmin"
+                border-color="#00000000"
+                color="#00000000"
+            >
+                <med-text text="Realm" style="margin: 1.4vmin; color: black; width: 33%" />
+                <med-text text="Users Online" style="margin: 1.4vmin; color: black; width: 33%" />
+                <div style="width: 33%;" />
+            </bounds>
+        </div>
+        <hr />
+        <vscroll>
+            <div id="server-list" style="flex-direction: column; width: 95%">
+                <div style="align-items: center; justify-content: center;"><spinner /></div>
+            </div>
+        </vscroll>
+    </dialog>
+</define-template>
+
+<define-template id="server-item">
+    <bounds 
+        style="flex-grow: 1; justify-content: center;"
+        corner-size="2vmin"
+        blend-size="0.5vmin"
+        border-size="1vmin"
+        border-color="#7f569e"
+        color="#b2a1bf"
+    >
+        <med-text text="@name" style="margin: 1.4vmin; color: black; width: 33%" />
+        <med-text text="@users" style="margin: 1.4vmin; color: black; width: 33%" />
+        <div style="width: 33%; justify-content: flex-end;"><button label="warp in" onclick="@onclick" enabled="@enabled" /></div>
+    </bounds>
+</define-template>