基于webassembly（wasm）实现的高性能实时A*路径查找动画

a星路径查找算法的可视化，秒算。

h5, math, path finding

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3305
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

const WASM_ASTAR = {
    wasmModule: null,
    wasmModulePath: '/uploads/1906/wasm_astar',
    debug: false, // Wasm converts to an int
    renderIntervalMs: 1000, // Used in debug mode
    // Can have multiple canvas layers (background, foreground) and render
    // at different frequencies.
    layers: new Map(),
    layerWrapperEl: document.getElementById('layer_wrapper'),
};

const getWasmImports = () => {
    let isIntervalTick = false;

// NOTE: i've prepended `js_` to each function name so it's very explicit
    // and easy to find where this interop layer is used on the rust side.
    return {
        // ========================================================================
        // SET UP ENGINE CALLS
        // ========================================================================
        js_random() {
                return Math.random();
            },

js_random_range(min, max) {
                return Math.floor(Math.random() * (max + 1 - min)) + min;
            },

js_log(ptr, length) {
                const msg = wasmReadStrFromMemory(ptr, length);
                console.log(`%cWASM >%c${msg}`, 'color: #ae59ff;');
            },

js_request_tick() {
                if (isIntervalTick) return;
                window.requestAnimationFrame(WASM_ASTAR.wasmModule.tick);
            },

js_start_interval_tick(ms) {
                console.log(`start interval tick`);
                isIntervalTick = true;
                // If I immediately call wasmModule.tick, the rust WORLD_STATE mutex
                // doesn't get unlocked and throws an error. So instead, we do an
                // immediate setTimeout so it occurs on the next stack frame.
                setTimeout(() => {
                    return WASM_ASTAR.wasmModule.tick(performance.now());
                }, 0);
                setInterval(() => {
                    return WASM_ASTAR.wasmModule.tick(performance.now());
                }, ms);
            },

js_create_layer(idPtr, idLength, key) {
                const canvas = document
                    .getElementById('layer_wrapper')
                    .appendChild(document.createElement('canvas'));
                canvas.id = wasmReadStrFromMemory(idPtr, idLength);
                const ctx = canvas.getContext('2d');

// Note: key is an int for easy passing between wasm/js
                WASM_ASTAR.layers.set(key, {
                    ctx,
                    canvas,
                    setSize(width, height, quality) {
                            canvas.width = width;
                            canvas.height = height;
                            canvas.style.width = `${width / quality}px`;
                            canvas.style.height = `${height / quality}px`;
                        },
                        clearScreen() {
                            ctx.clearRect(0, 0, canvas.width, canvas.height);
                        },
                        drawRect(px, py, sx, sy, ch, cs, cl, ca) {
                            ctx.fillStyle = `hsla(${ch}, ${cs}%, ${cl}%, ${ca})`;
                            ctx.fillRect(px, py, sx, sy);
                        },
                        drawCircle(px, py, r, ch, cs, cl, ca) {
                            ctx.fillStyle = `hsla(${ch}, ${cs}%, ${cl}%, ${ca})`;
                            ctx.beginPath();
                            ctx.arc(px, py, r, 0, Math.PI * 2, true);
                            ctx.closePath();
                            ctx.fill();
                        },
                        drawText(text, fontSize, px, py) {
                            ctx.fillStyle = '#fff';
                            ctx.font = `${fontSize}px Monaco, Consolas, Courier, monospace`;
                            ctx.fillText(text, px, py);
                        },
                });
            },

js_set_screen_size(width, height, quality) {
                const wrapper = document.getElementById('layer_wrapper');
                wrapper.style.width = `${width / quality}px`;
                wrapper.style.height = `${height / quality}px`;
            },

js_set_layer_size(layerId, width, height, quality) {
                WASM_ASTAR.layers.get(layerId).setSize(width, height, quality);
            },

js_clear_screen(layerId) {
                WASM_ASTAR.layers.get(layerId).clearScreen();
            },

// ========================================================================
            // SET UP DRAW CALLS
            // ========================================================================

js_update() {
                // for minimal neccessary client updates
            },

js_draw_tile(layerId, px, py, size, ch, cs, cl, ca) {
                WASM_ASTAR.layers
                    .get(layerId)
                    .drawRect(px, py, size, size, ch, cs, cl, ca);
            },

js_draw_circle(layerId, px, py, r, ch, cs, cl, ca) {
                WASM_ASTAR.layers.get(layerId).drawCircle(px, py, r, ch, cs, cl, ca);
            },

js_draw_fps(layerId, fps) {
                WASM_ASTAR.layers
                    .get(layerId)
                    .drawText(`fps: ${Math.round(fps)}`, 35, 5, 45);
            },

js_path_count(layerId, count) {
                WASM_ASTAR.layers.get(layerId).drawText(`path: ${count}`, 35, 5, 95);
            },
    };
};

// Learned this from a blog post: Getting started with Rust/WebAssembly
// https://maffydub.wordpress.com/2017/12/02/getting-started-with-rust-webassembly/
// QUESTION: are there any issues with this method? Alternative/faster solutions?
const wasmReadStrFromMemory = (ptr, length) => {
    const buf = new Uint8Array(WASM_ASTAR.wasmModule.memory.buffer, ptr, length);
    return new TextDecoder('utf8').decode(buf);
};

window.addEventListener('load', init);

编译

CSS

* {
    border: 0;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background: black;
    color: rgb(175, 175, 175);
    font-family: Monaco, Consolas, Courier, monospace;
}
h1 {
    font-size: 16px;
    margin: 0 0 10px;
    text-align: center;
}
#fullscreen {
    display: flex;
    align-items: center;
    min-height: 100vh;
}
#wrapper {
    display: flex;
    flex-direction: column;
    /*
  NOTE: if i used justify-content on #fullscreen instead, horizontal scrolling breaks.
  Using `margin: 0 auto` works better here.
  */
    
    margin: 0 auto;
}
#layer_wrapper {
    margin: 0 auto;
}
#layer_wrapper canvas {
    display: block;
    position: absolute;
}
#info {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 10px 0 0;
    opacity: 0.5;
    width: 100%;
}
@media (max-width: 600px) {
    #info {
        flex-direction: column;
        text-align: center;
    }
}
#info:hover {
    opacity: 1;
}
#info span {
    color: #d67fff;
}
#info a {
    color: #42b6ff;
}

HTML

a星路径查找算法的可视化，秒算。

h5, math, path finding

编辑器支持Emmet

快捷键

a星路径查找算法的可视化，秒算。

h5, math, path finding

gsap和svg filter实现乱流（turbulence）加载动画

基于simplex-noise.js实现的流动网络动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：