inf-schule | Elemente von X3D

Nebel

Dinge im Hintergrund sind in der Regel schlechter zu sehen ("Nebel"). Das kann man mit dem Element <Fog> erreichen.
Bewege das Bild - mit dem Mausrad kannst dich auch "in das Bild hinein" bewegen.

<Fog color=".8 .8 .8" fogType="LINEAR" visibilityRange="30"/>

<!-- Quader 1 -->
<Transform translation='0 0 0'>
    <Shape>
        <Appearance>
            <Material diffuseColor="1 0 0"/>
        </Appearance>
    <Box size="1 1 1" />
    </Shape>
</Transform>

<!-- Quader 2 -->
<Transform translation='1 1 -3'>
    <Shape>
        <Appearance>
            <Material diffuseColor="1 0 0"/>
        </Appearance>
    <Box size="1 1 1" />
    </Shape>
</Transform>

<!-- Quader 3 -->
<Transform translation='2 2 -6'>
    <Shape>
        <Appearance>
            <Material diffuseColor="1 0 0"/>
        </Appearance>
    <Box size="1 1 1" />
    </Shape>
</Transform>


...

Markup

Der Code beinhaltet noch mehrere weitere Quader, die jeweils 3 Einheiten weiter nach hinten auf der Z-Achse verschoben wurden.

Neben der Schaffung eines Ambientes dient Nebel der Performanz, da die Texturen weit entfernter Objekte dann nicht mehr berechnet werden müssen. Die Farbe ist wie gehabt in RGB-Werten codiert.

FogType gibt an, wie die Sichtbarkeit abnimmt, als Optionen haben wir LINEAR für ein gleichmäßiges Abnehmen und EXPONENTIAL für ein in der Ferne wesentlich stärkeres Abnehmen.

VisibilityRange gibt an, ab wann Objekte gänzlich ihre Textur verlieren.

Aufgabe

Versehe das Koordinatenkreuz aus dem letzten Kapitel mit einem blauen Nebel:

INFO: Time for setup and init of GL element no. 1: 46 ms.

INFO: activate FogBindable null/

INFO: activate first X3DFogNode for X3DFogNode-stack

INFO: activate ViewpointBindable null/defaultX3DViewpointNode

INFO: register ViewpointBindable null/defaultX3DViewpointNode

INFO: create new Viewpoint for X3DViewpointNode-stack

INFO: activate BackgroundBindable null/defaultX3DBackgroundNode

INFO: register BackgroundBindable null/defaultX3DBackgroundNode

INFO: create new Background for X3DBackgroundNode-stack

INFO: System ready.

INFO: activate NavigationInfoBindable null/defaultX3DNavigationInfoNode

INFO: register NavigationInfoBindable null/defaultX3DNavigationInfoNode

INFO: NavType: undefined

INFO: Switch to examine mode.

INFO: create new NavigationInfo for X3DNavigationInfoNode-stack

INFO: activate EnvironmentBindable null/defaultX3DEnvironmentNode

INFO: register EnvironmentBindable null/defaultX3DEnvironmentNode

INFO: create new Environment for X3DEnvironmentNode-stack

INFO: register FogBindable null/

INFO: addEventListener for X3D.onDOMNodeInserted

INFO: addEventListener for X3D.onDOMNodeRemoved

INFO: webgl2 context found Vendor: WebKit Google Inc. (Google), Renderer: WebKit WebGL ANGLE (Google, Vulkan 1.3.0 (SwiftShader Device (LLVM 10.0.0) (0x0000C0DE)), SwiftShader driver), Version: WebGL 2.0 (OpenGL ES 3.0 Chromium), ShadingLangV.: WebGL GLSL ES 3.00 (OpenGL ES GLSL ES 3.0 Chromium), MSAA samples: 4 Extensions: EXT_clip_control, EXT_color_buffer_float, EXT_color_buffer_half_float, EXT_conservative_depth, EXT_depth_clamp, EXT_float_blend, EXT_polygon_offset_clamp, EXT_texture_compression_bptc, EXT_texture_compression_rgtc, EXT_texture_filter_anisotropic, EXT_texture_mirror_clamp_to_edge, EXT_texture_norm16, NV_shader_noperspective_interpolation, OES_draw_buffers_indexed, OES_sample_variables, OES_shader_multisample_interpolation, OES_texture_float_linear, OVR_multiview2, WEBGL_clip_cull_distance, WEBGL_compressed_texture_astc, WEBGL_compressed_texture_etc, WEBGL_compressed_texture_etc1, WEBGL_compressed_texture_s3tc, WEBGL_compressed_texture_s3tc_srgb, WEBGL_debug_renderer_info, WEBGL_debug_shaders, WEBGL_lose_context, WEBGL_multi_draw, WEBGL_polygon_mode, WEBGL_stencil_texturing

INFO: Initializing X3DCanvas for [x3dom-1744054243173-canvas]

WARNING: The width attribute is to be specified in pixels not in percent.

INFO: Inline X3D styles detected

INFO: Creating canvas for (X)3D element...

INFO: Time for setup and init of GL element no. 0: 61 ms.