标签: webassembly

我有一个生锈的项目,我正在编写webasm每http://asquera.de/blog/2017-04-10/the-path-to-rust-on-the-web/

项目编译.当我在Chrome Canary中运行它时,内存不足并给我一个非常有用的错误消息:

abort("Cannot enlarge memory arrays. Either (1) compile with  -s 
TOTAL_MEMORY=X  with X higher than the current value 16777216, (2) compile 
with  -s ALLOW_MEMORY_GROWTH=1  which allows increasing the size at runtime, 
...

问题是,它不清楚如何将这些标志传递给rustc /构建工具链.

既未设置EMMAKEN_CFLAGS,也未设置以下工作:

cargo  rustc -v --target=wasm32-unknown-emscripten --release -- -Clink-args="-s TOTAL_MEMORY=33554432" 

目前,Web Worker被实例化:

let worker = new Worker('worker.js');

然后浏览器提取worker.js并开始响应消息.

我想使用WebAssembly实现我的worker的功能.理想情况下,我想做这样的事情:

let worker = new Worker('worker.wasm');

但我很确定这是不可能的.最明显的替代方法是worker.js获取worker.wasm并编译并运行它.但这意味着我们获取一个脚本(worker.js),其唯一的工作是获取并运行另一个脚本(worker.wasm).这对我来说很难受.所以我的问题是:在Web Worker中使用WebAssembly是否有更简洁的方法,这不会引入额外的提取步骤？

我试图解决这个问题WebAssembly注:"注意:要使用运行instantiateStreaming和compileStreaming,你需要你的Web服务器来服务.wasm文件与application/wasmMIME类型https的箱子,可以用来为从本地主机文件,包括应用程序/ WASM. MIME类型开箱即用."

实际上,我在JS控制台中遇到MIME错误.谷歌搜索显示没有办法配置它.Mozilla建议在depAsated WebAssembly.instantiate上实例化.如果使用stdweb或bindgen,后者对我也不起作用:它需要第二个参数,我不知道如何提供.

我想问使用 WebAssembly/WASM 将一系列图像绘制到画布中是否更快、更节省内存？

我之所以这么问，是因为我已经测试过在主 UI 和网络工作人员中绘制一系列图像（动画）。对于少数画布（1-5 个画布），性能是可以忍受的，但是对于更多画布（如 20-25），场景会有点不同，渲染变得慢动作。

这是主 UI 中的代码：

const videoDecoder = new Worker("videoDecoder.js");
const canvas = document.querySelector("#canvas");
const offscreen = canvas.transferControlToOffscreen();
videoDecoder.postMessage({ action: 'init', canvas: offscreen }, [offscreen] );

这是我的网络工作者：

onmessage = async function (e) {
    const blob = e.data;
    blob.arrayBuffer().then(arrayBuffer => {
        const uint8Array = new Uint8Array(arrayBuffer);
        for(;;;) {
           const offsetIdx = ...;
           const endIdx = ...;
           const jpegArray = uint8Array.slice(offsetIdx, endIdx);
           const blob = new Blob([jpegArray], {type: "image/jpeg"});
           drawImage(blob);
        }
    } …

使用web-sys crate，我想从HTMLDocument.

我想做这样的事情。确实这行不通。

let window = web_sys::window().unwrap();
let document = window.document().unwrap();
let cookie = document.cookie().unwrap();
//no method named `cookie` found for type `web_sys::features::gen_Document::Document` in the current scope

我需要访问HTMLDocument结构而不是Document结构。

Cargo.toml 已启用功能。

~snip~
[dependencies.web-sys]
version = "0.3.4"
features = [
  "WebSocket",
  'Window',
  'Document',
  'HtmlDocument',
]

根据API，它应该可以在以下位置访问Window，例如Document.

它似乎不适用于以下内容：

let html_document = window.html_document().unwrap();

从文档来看，HTMLDocument应该扩展Document。

我知道 Rust 中没有继承，但我无法将其转换Document为这样：

let html_document = web_sys::HtmlDocument::from(document); …

构建 wasm 使用的一些示例cargo build（如《WebAssembly 编程》一书中的示例）

cargo build --release --target=wasm32-unknown-unknown

还有其他人使用，

wasm-pack build --target web ....

这两种构建项目的方法有什么不同？

我需要在网络程序集中动态更新我的侧面导航栏。

你能建议我该怎么做吗？

@page "/ChildPage"

    @code{
        public List<string> menus = new List<string>();
        NavMenu n = new NavMenu();
        protected override async Task OnInitializedAsync()
        {
            menus.Add("Content 1");
            menus.Add("Content 2");

            await Task.Run(() => n.MenuItems = menus);
        }
    }

在 Navmenu 剃须刀中做了如下一些操作。

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <ul class="nav flex-column">
        @if (MenuItems != null)
        {
            @foreach (var menu in MenuItems)
            {
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="Page1">
                        <span class="oi oi-plus" aria-hidden="true"></span> @menu
                    </NavLink>
                </li>
            }
        }

    </ul>
</div>



@code {
    private bool collapseNavMenu = true;

    private string …

假设我在 Rust 代码中有以下定义：

#[wasm_bindgen]
pub struct RustType {
    foo: usize
}

#[wasm_bindgen]
impl RustType {
    #[wasm_bindgen(constructor)]
    pub fn new() -> Self {
        Self { foo: 100 }
    }
}

#[wasm_bindgen]
pub fn print_addr(obj: &RustType) {
    console_log!("rust addr = {}", obj as *const _ as u32);
}

JS 代码创建一个实例RustType并将其传递给print_addr函数：

var obj = new RustType();
print_addr(obj);

修改生成的print_addr函数后index_bg.js如下：

export function print_addr(obj) {
    _assertClass(obj, RustType);
    console.log("js addr = ", obj.ptr); // <== added this line
    if …

我正在尝试使用 emscripten 将 .c 文件和 .wat 文件链接在一起，以便我可以从 c 调用本机 WebAssembly 函数。我尝试了几种方法，但似乎都不起作用。例如，如果我尝试这样的事情：

wat文件.wat

(module
  (func $addwat (param $p1 i32) (param $p2 i32) (result i32)
    local.get $p1     
    local.get $p2 
    i32.add 
  )
  (export "addwat" (func $addwat))
)

c文件

#include <emscripten.h>

int addwat( int a, int b );
int add2( int a, int b )
{
    return a+b;
}
int add2cwat( int a, int b )
{
    return addwat( a, b );
}

wat2wasm -r watfile.wat
emcc -o cfile.wasm cfile.c watfile.wasm -s EXPORTED_FUNCTIONS='["_add2","_add2cwat"]' -s …

我正在尝试弄清楚如何使用 Rust 和 wasm-bindgen 调用 JavaScript 函数。由于缺乏浏览器支持，我无法将 wasm-bindgen 与 ES6 模块与 Web Worker 一起使用。

据我所知，声明存在一个 JavaScript 函数供我在 Rust 端调用是很简单的

#[wasm_bindgen]
extern {
    fn logProgress(percent: f64);
}

但是我不知道在哪里定义 JavaScript 实现。如果我尝试从 JavaScript 调用 Rust 函数来调用 undefined，logProgress那么我会收到运行时错误：Error: logProgress is not defined

我可以从 wasm-bindgen 文档中看到，如果我将 wasm-bindgen 与 ES6 模块一起使用，那么我可以将 rust 代码更改为

#[wasm_bindgen(module = "/progress.js")]
extern {
    fn logProgress(percent: f64);
}

并在中声明 JavaScript 函数progress.js

export function logProgress(percent) {
    console.log(percent)
    // actual implementation would not just log
}

由于我是通过全局导入 Rust …