Rust를 WASM으로 변환하여 브라우저에서 이동

10499 단어 MacWebAssemblyasm.jsRust
이것은 WebAssembly Advent Calendar 2017 19 일째 기사입니다.

소개



이 기사에서는 웹 브라우저에서 Rust 프로그램을 실행하는 두 가지 방법을 소개합니다.
  • asm.js로 컴파일하는 방법
  • WebAssembly (이하 WASM)로 컴파일하는 방법

    • 사전 준비



    Rust 컴파일러(rustup) 설치


    $ curl https://sh.rustup.rs -sSf | sh

# 環境に合わせて .zshrc や .bashrc に以下を追記
$ source ~/.cargo/env

    문제해결



    먼저 homebrew를 통해 rust를 설치하면 아래와 같은 오류가 출력되어 rustup 설치에 실패합니다.

    rust가 이미 설치된 경우 오류 메시지
    $ curl https://sh.rustup.rs -sSf | sh
info: downloading installer
error: it looks like you have an existing installation of Rust at:
error: /usr/local/bin
error: rustup cannot be installed alongside Rust. Please uninstall first
error: if this is what you want, restart the installation with `-y'
error: cannot install while Rust is installed

    이 경우 brew uninstall --force rust에서 homebrew를 통해 rust를 제거하십시오.
    $ brew uninstall --force rust

    Emscripten 설치


    $ git clone https://github.com/juj/emsdk.git
$ cd emsdk

# 環境に合わせて .zshrc や .bashrc に以下を追記
$ source ~/emsdk/emsdk_env.sh

# かなり重たいコンパイルが走るので注意しましょう。手元の環境では数十分かかりました。
$ ./emsdk install sdk-incoming-64bit binaryen-master-64bit

$ ./emsdk activate sdk-incoming-64bit binaryen-master-64bit

    문제해결



    cmake가 설치되어 있지 않으면 다음 오류가 출력됩니다.

    cmake가 없으면 오류 메시지
    [Errno 2] No such file or directory
Could not run CMake, perhaps it has not been installed?
Installing this package requires CMake. Get it via a OSX package manager (Homebrew: "brew install cmake", or MacPorts: "sudo port install cmake"), or from http://www.cmake.org/
Installation failed!

    그렇다면 brew install cmake 합시다.
    $ brew install cmake

    Rust 프로그램을 웹 브라우저로 이동



    프로젝트 만들기



    우선, cargo 명령을 사용해, 「Hello, world!」라고 출력하는 프로젝트를 작성합니다.
    $ cargo new --bin hello
$ cd hello

# ファイルの中身を確認
$ cat src/main.rs
fn main() {
    println!("Hello, world!");
}

# ビルド+実行
$ cargo run
Hello, world!

    이 프로젝트를 웹 브라우저에서 실행하려면 asm.js로 컴파일하는 방법과 WebAssembly(이하 WASM)로 컴파일하는 방법의 두 가지 방법이 있습니다.
    각각 순서대로 소개합니다.

    방법 1: asm.js를 타겟으로 빌드


    # asm.jsをターゲットアーキテクチャに追加
$ rustup target add asmjs-unknown-emscripten

# asm.jsをtargetにビルド
$ cargo build --target asmjs-unknown-emscripten

# ビルドの生成物を確認
$ ls target/asmjs-unknown-emscripten/debug
build       deps        examples    hello.d     hello.js    incremental native

    ams.js를 브라우저에서 이동



    프로젝트 바로 아래에 다음과 같은 html 파일을 만듭니다.

    amsjs.html
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>Rust to asm.js example</title>
    </head>
    <body>
        <script src="target/asmjs-unknown-emscripten/debug/hello.js"></script>
    </body>
</html>

    로컬에서 HTTP 서버를 설정합니다. 이것은 Ruby에서 서버를 설정하는 예입니다.
    $ ruby -run -e httpd . -p 3000

    http://localhost:3000/asmjs.html 에 브라우저로 액세스하여 개발 콘솔을 표시합니다.
    성공하면 「Hello, world!」라고 표시됩니다.



    방법 2: WASM을 대상으로 빌드



    타겟명이 asmjs-unknown-emscripten
    # WASMをターゲットアーキテクチャに追加
$ rustup target add wasm32-unknown-emscripten

# WASMをtargetにビルド
$ cargo build --target=wasm32-unknown-emscripten

# ビルドの生成物を確認
$ ls target/wasm32-unknown-emscripten/debug
build       deps        examples    hello.d     hello.js    hello.wasm  incremental native

    WASM을 브라우저에서 이동



    asm.js와 거의 비슷한 절차입니다. WASM에서는 다음과 같은 HTML을 만듭니다.

    wasm.html
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Rust to WebAssembly example</title>
    </head>
    <body>
        <script>
        var Module = {}
        fetch('target/wasm32-unknown-emscripten/debug/hello.wasm')
            .then((response) => response.arrayBuffer())
            .then((buffer) => {
                Module.wasmBinary = buffer
                var script = document.createElement('script')
                script.src = "target/wasm32-unknown-emscripten/debug/hello.js"
                document.body.appendChild(script)
            })
        </script>
    </body>
</html>

    http://localhost:3000/wasm.html 에 브라우저로 액세스하여 개발 콘솔을 표시합니다.
    성공하면 「Hello, world!」라고 표시됩니다.



    참고 기사



    이하의 기사를 매우 참고로 했습니다. 정말 고마워요!
  • Rust에서 WASM32를 출력 할 준비
  • Rust로 웹 프런트 엔드 개발
  • rustup에서 Rust 컴파일러를 쉽게 설치

    • 다음 번 예고



    올해 가을에 개최된 레이트레 합숙 5‽ 그래서 Rust를 사용하여 물리 기반 렌더러를 직접 만들었습니다.

    레이트레 합숙 5‽ 에 참여하고 Rust에서 패스 트레이싱을 구현했습니다. Rust 초보자였지만 어떻게든 노력했습니다. 고속화의 대처에 대해서도 썼으므로, ​​꼭 읽어 주세요! #레이트레 htps // t. 코/L2보 fQMds7 — 가무😇 (@gam0022) 2017년 10월 1일


    이 렌더러를 꼭 많은 사람에게 움직여주고 싶어 웹에 이식하려고 생각했는데, 그 사전 조사로서 간단한 Rust의 프로그램을 브라우저상에서 움직이기까지 시행착오했습니다. 거기서, 이번은 그 순서를 정리해 기사로 했습니다.



    다음에 '자작의 Rust의 물리 기반 렌더러를 웹에 이식한 이야기'에 대해 쓰고 싶습니다.


    rust-sdl2를 사용하여 wasm을 생성 할 때 음악 파일 관련 tips
    WASM (on AssemblyScript)을 Chrome과 node로 이동할 때까지

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage