#emscripten

[cpunch71]

it works? emscripten is super cool, other cniles should check it out

you can try out my tech demo here: http://demo.openpunk.com

yes i am a web developer :3

[anheliotrope]

Me trying to explain what I'm working on: Yeah, sure! I am just learning how to use cmake files to get Piper to compile to WASM using the emscripten toolchain so we can get it to run on WebGL in an effort to get high quality on-device voice synthesis. The issue is that Piper's cmake files were only configured to use MSVC and gcc, but emscripten only uses Clang. So now I have to rewrite the cmake files to use ClangCL which is Clang with MSVC-like CLI. I could also try to use Clang directly, but I'm worried this would require using a non-MSVC generator for cmake and result in more work. It also seems like every generator and compiler can end up passing parameters slightly differently, which can lead to the build failing. MSVC needs to have utf-8 mode enabled in a different way, or else the compiler will detect multi-byte characters as separate characters. Piper takes care of this for MSVC, but when you use Clang with MSVC-like CLI, you need to do it in yet another way. I've been dealing with half a dozen issues like this. Different C++ compilers also seem to have varying levels of permissiveness about enforcing the One Definition Rule. No compiler is mandated by any standard to do anything regarding the violation, it leads to undefined behaviour, which leads to Piper failing under ClangCL even when everything else is set correctly -- from ClangCL's perspective the code in the translation unit is simply incorrect.

C++ build systems are cursed.

[utopicwork]

Okay so now we can package whls for offline/cached package loading by using our .penv format. The last bit was loading whls from the Emscripten file system which I found there is direct support for by using emfs:[path to your whl] once the whl is in the file system. I was having difficulties with the filename but I got help in record time with that:

tldr: Its just that micropip is picky about whl filenames

[brightgreendandelions]

i finally succeeded at running wasm code (compiled from c) with webgl support, without using emscripten

no more 1.2GB compilers everyone!! all you need is clang and the 1400 lines of code (the library_webgl.js file) i stole from emscripten

[eccentric-nucleus]

okay so i dug through the code enough to hit the actual rendering code, & it's completely impossible to do in webgl2 just due to the various opengl4 rendering calls. which, fine.

like with the knowledge that it's possible to access opengl4 via web assembly i am kind of tempted to try that out. but the problem with that is all the examples people have are like... "i used emscripten to convert some c++ into wasm and now i have 3000 lines of autogenerated boilerplate to invoke that code", when i guess what i'd want would be, uh, a wasm that's literally just the opengl headers that i'd call into not unlike using the existing WebGL2RenderingContext object. but that seems to be very much not a common usage of webassembly (and, presumably, having a lot of overhead to constantly jump in and out of javascript world. but i have no clue how efficient web assembly is anyway)

[callistoashley]

space!!!!

my second sketchbook pile entry :3

"space!!!!" (with four exclamation marks, which i'll omit hereafter for clarity) was a turn-based rpg turned text-based sidescroller turned pseudo-webcomic turned amorphous pile of narrative spaghetti, writhing and scratching in the back of my brain as it tries to escape.

space was about a robot named alison, who was built to predict the death of the universe. but due to an incident involving one of her father's unfinished projects, the clock in her brain that would count down to the end of the universe is miscalibrated, and she thinks the universe is going to end in like, a week.

because of how closely this clock is tied to her mind, when it ends, her brain will shut down, effectively killing her instantly.

alison also has the ability to mentally travel to a daydream-like realm where she can interact with the world at any point in the past or future; for example, if a wall in front of her didn't exist, or would not exist/be moved in the future, she could just walk through it. this has a lot of potential as both a puzzle mechanic and a storytelling device and i want to reuse it someday.

this story collapsed under its own weight. i kept lathering details onto it until it was hard to keep track of everything, and the most fleshed out parts of the story were the beginning and ending. one day i want to recycle some of the ideas i had for this project, but i don't even know where to begin with pruning it back.

the text-based sidescroller concept actually had a little alpha build, though! it's no more than a tech demo, but if you're interested in trying it, here is the github: https://github.com/callistoAshley/spacegame (i was surprised to discover that the last update was only 18 months ago...) (also, please don't call me the name i'm credited as here.)

the webcomic idea never went anywhere. it would have more closely resembled a visual novel, except without branching paths and with an engine that i'd build myself using emscripten.

[ib-arts-blog]

WebAssembly Explained: Boosting Performance in Modern Web Development

In the fast-evolving world of web development, performance and efficiency are paramount. Developers constantly seek technologies that can improve speed, responsiveness, and overall user experience. One such breakthrough technology gaining momentum is WebAssembly. This powerful tool is transforming the way web applications run by enabling near-native performance on browsers. In this blog, we will explore what WebAssembly is, how it works, and why it is revolutionizing modern web development.

What is WebAssembly?

WebAssembly (Wasm) is a binary instruction format designed as a portable target for compiling high-level languages like C, C++, and Rust, enabling them to run on the web at near-native speed. Unlike traditional JavaScript, which is an interpreted language, WebAssembly is compiled, allowing browsers to execute code faster and more efficiently.

It was developed as a collaborative project by major browser vendors including Google, Mozilla, Microsoft, and Apple, to address the limitations of JavaScript performance and enable more complex applications to run smoothly in browsers.

How Does WebAssembly Work?

WebAssembly works by compiling code written in languages like C or Rust into a compact binary format. This format is then loaded and executed directly by the browser’s virtual machine, bypassing the need for JavaScript interpretation and Just-In-Time (JIT) compilation.

The process typically follows these steps:

Writing Code: Developers write code in languages such as C, C++, or Rust.

Compiling to Wasm: This code is compiled into WebAssembly bytecode using specialized compilers like Emscripten or Rust’s wasm-pack.

Loading in Browser: The WebAssembly module is loaded into the browser via JavaScript.

Execution: The browser executes the WebAssembly code at near-native speed, enabling high-performance web applications.

Because of its compact size and efficient execution, WebAssembly modules download faster and run more efficiently than equivalent JavaScript implementations.

Why WebAssembly is a Game-Changer in Web Development

1. Improved Performance

The primary advantage of WebAssembly is its ability to deliver near-native performance within web browsers. Applications that require intensive computations — such as gaming, video editing, and CAD — benefit tremendously from WebAssembly’s speed improvements.

JavaScript engines have come a long way, but WebAssembly pushes the boundaries further by offering a binary format optimized for fast decoding and execution. This results in smoother and faster applications, even for complex tasks.

2. Language Flexibility

WebAssembly opens web development to languages beyond JavaScript. Developers can leverage their expertise in C, C++, Rust, and other languages to build web applications, broadening the pool of web developers and allowing code reuse from existing native applications.

3. Enhanced Security

WebAssembly runs in a secure, sandboxed environment, similar to JavaScript. This isolation helps protect users by restricting access to the underlying system, reducing vulnerabilities while still allowing powerful features.

4. Interoperability with JavaScript

WebAssembly is designed to complement JavaScript, not replace it. Developers can call WebAssembly functions from JavaScript and vice versa, creating a seamless integration for complex applications where performance-critical modules run in Wasm and the UI and less intensive logic remain in JavaScript.

5. Cross-Browser Compatibility

Supported by all major browsers — Chrome, Firefox, Safari, and Edge — WebAssembly ensures consistent behavior across platforms, helping developers build applications that work everywhere without compatibility concerns.

Real-World Applications of WebAssembly

Gaming: WebAssembly allows complex games to run smoothly in browsers without plugins, supporting rich graphics and real-time interactions.

Video and Image Editing: High-performance tools like photo editors and video processors are leveraging Wasm to handle intensive computations in-browser.

Scientific Simulations: Researchers use WebAssembly for browser-based simulations, providing accessibility without sacrificing performance.

Cryptocurrency Wallets and Blockchain: WebAssembly helps optimize cryptographic calculations, speeding up blockchain-related web apps.

External Source for More Info

For a detailed technical dive and latest updates on WebAssembly, the official WebAssembly.org site is an excellent resource maintained by the working group behind the technology.

Internal Link Suggestion

If you're interested in exploring related cutting-edge web technologies, check out our blog on “The Future of Web Development with Rust and WebAssembly” for an in-depth guide.

How to Get Started with WebAssembly

To start experimenting with WebAssembly, developers can use tools like:

Emscripten: A compiler toolchain for compiling C/C++ code to Wasm.

Rust’s wasm-pack: Helps package Rust code for WebAssembly easily.

AssemblyScript: Allows writing WebAssembly modules using a TypeScript-like language.

These tools streamline the process of creating, compiling, and deploying WebAssembly modules in web projects.

Conclusion

WebAssembly is reshaping the landscape of web development by enabling high-performance applications directly within the browser. Its speed, language flexibility, and compatibility make it a valuable tool for developers aiming to push the boundaries of what’s possible on the web.

As the web continues to evolve, WebAssembly promises to empower developers to build faster, more powerful, and more secure applications, ultimately enhancing user experience across the globe.

[codezup]

Harnessing WebAssembly for Frontend Development with WASM and Emscripten

Bringing WebAssembly to the Frontend with WASM and Emscripten Introduction In recent years, WebAssembly (WASM) has gained significant attention as a new way to run code on the web. WASM allows developers to write code in languages like C, C++, and Rust, and then compile it to a format that can be executed by web browsers. Emscripten is a popular toolchain for compiling C and C++ code to WASM.…

[weetechsolution]

6 Best WebAssembly Tools: A Developer's Toolkit

WebAssembly (Wasm) is a revolutionary innovation for the web development industry. Developers involved in any field can now use Wasm to build apps with the same speed and performance as the native applications and even offer great performance. To utilize the advantages of Wasm, developers can pick from a wide range of tools and frameworks.

6 Best WebAssembly Tools

1. Emscripten

Compiler: Emscripten is a powerful tool that enables the direct web application of all the C/C++ codes by converting these codes into web-readable format (WebAssembly modules).

Extensive Features: This software can flexibly support all the C/C++ features and the wide range of libraries makes it one of the best tools in the market for web application development.  

2. Rust

Language: Rust is a system programming language that can be transformed into WebAssembly by compiling, therefore, really fast and memory-safe.

Strong Community: Rust is an expanding and faithful community, which means it has plenty of resources and support.

3. AssemblyScript

TypeScript-Like Syntax: AssemblyScript is a syntax that is very close to TypeScript. Of course, it functions perfectly for JavaScript developers.

High Performance: The most and the ideally optimized WebAssembly code will be compiled ensuring that the performance will be, at least, satisfactory under normal circumstances.

4. WebAssembly Studio

WebAssembly Studio the online tool is an IDE that allows the development of WebAssembly modules, which can then be easily tested.

Functions: A feature that enables code editing, debugging, and performance analysis.

5. Binaryen

Optimizer: Binaryen has been developed as a compiler infrastructure for WebAssembly which is supplied with optimization tools focused on better code performance.

Flexibility: This product favors a multitude of different practices, including compilation, optimization, and analysis.

6. WasmEdge

Runtime Environment: WasmEdge is aimed at a lightweight and portable solution to run WebAssembly applications.

Security: Being equipped with the necessary security protections, it can thus be utilized for applications carrying highly sensitive data.

After WebAssembly, people who loved coding would be able to design these marvelous tools and how they would interact with the web. The tools you choose can let WebAssembly be fully released and you can make high-performance web apps.

[archiveosorg]

XNES

XNES – an open-source, experimental Javascript Super Nitendo Emulators, powered by emscripten, SNEM, and Snes9x https://archivegame.org/xnes/

[brightgreendandelions]

this reminds me of installing emscripten today. (bad idea, needs a wizard to work properly, takes up 1.2GB)

SOCIETY FOR THE RESTORATION OF THE NAME "WIZARD" FOR INSTALLERS

[terminalroot]

Como Transformar seus Jogos C/C++ para Web com Emscripten (SDL2)

[ohaithe-re]

UIUCTF 2020: Nookstop 2.0

This is a very un-hacking solution: we basically just guess the flag!

We start with this page, which looks a lot like Nookstop 1.0. Just as before, we run

document.cookie="secret_backend_service=true";

to enable the "secret backend service" (as clued by the Japanese text in the source code of the page). Reloading the page gives a link to the real challenge, which is running Emscripten.

Grabbing your banking information...... Your routing number is: 0x9a0 2464 Your account number has been successfully transmitted using the latest XOR encryption, and is not shown here for security reasons. Please stand by while the ABD decrypts it....... Calling decrypt function.... wkwcwg{c3oo33os[Byte 7F here] Uh-oh! There's been an error!

One approach would be to dump out the WebAssembly file, as easily found by looking at the page's network requests; then it can be reversed with the help of tools like wasm or wabt. Unfortunately, Emscripten adds a bunch of external code that is hard to reason about within the context of just the .wasm file, and so these decompilers produce output that is next-to-useless. Let's skip the reversing.

The text above hints that there's some kind of XOR going on, and we have a corrupted key: "wkwcwg{c3oo33os\x7f". This corrupted key looks awfully similar to "uiuctf{", in the start. Let's XOR the two together and see what the difference is.

>>> os = "wkwcwg{c3oo33os\x7f" >>> bs = "uiuctf{" >>> print( [ord(os[i])^ord(bs[i]) for i in range(len(bs))] ) [2, 2, 2, 0, 3, 1, 0]

Aha, so all of the XORs are off by a number from 0 to 3 -- that is, just the bottom two bits are wrong. Let's dump out all the candiate characters in the flag:

>>> for b in os: ... print( chr(ord(b) ^ 0) + chr(ord(b) ^ 1) + chr(ord(b) ^ 2) + chr(ord(b) ^ 3) ) ... wvut kjih wvut cba` wvut gfed {zyx cba` <-- Start of flag content 3210 onml onml 3210 3210 onml srqp <-- End of flag content ~}|

The first 7 characters are the uiuctf{, and the last is the final }, so we need to guess the remaining 8. We figure that it will be English leetspeak, so take the letter options, and convert the numbers 3210 into the letters eszilo. Then search for an answer in a regex-based dictionary. Nutrimatic helpfully ranks by frequency as an English word, and the results give one big answer: "billions". Given that we're hacking a bank, this makes perfect sense.

Convert back to leetspeak to get the flag uiuctf{b1ll10ns}.

[negusema]

雑にゲームを作る(3)

雑にゲームを作る(2)から引き続き。今週末はEmscriptenビルドを試していた。

最初、CMakeでvcpkgを使いながらEmscriptenのビルドをする方法を確立するのに時間がかかった。どうもvcpkgのEmscripten対応はごく最近マージされた状態のようで、他に試している人があんまり見つからなかった。結局いろいろやってみて、 CMAKE_TOOLCHAIN_FILE変数をvcpkg.cmakeに、VCPKG_CHAINLOAD_TOOLCHAIN_FILE変数をEmscripten.cmakeに設定してビルドすればできた。

その後ビルドはできるものの動かないという状態が続いた。OpenGL,OpenGL ES,GLSL,WebGLそれぞれのバージョンがどう対応しているかがよくわからず、混乱のもととなった。結局OpenGL ES 3.0(GLSL ES 3.0)ならWebGL2で動きそうということでいろいろ試行錯誤したけどなかなか原因がわからず、最後に最小構成まで削った状態で試してみたところ動いたのでよかった。あとはどこが原因かをコード足しながら探せばよさそう。

最小構成のコードはこちらに置いておきます。https://gist.github.com/neguse/dc5d04ec65bec7d82d47f0a2a9745637

[willcodehtmlforfood]

"I made a Doom source port that runs within a PDF file.

Play it here: https://doompdf.pages....

The PDF file format supports Javascript with its own separate standard library. Modern browsers (Chromium, Firefox) implement this as part of their PDF engines. However, the APIs that are available in the browser are much more limited.

It turns out that old versions of Emscripten can compile C to asm.js code that will happily run inside the limited JS runtime of the PDF engine. I used the doomgeneric (https://github.com/ozk...) fork of the original Doom source, as that made writing the IO fairly easy. All I had to do was implement a framebuffer and keyboard inputs.

Unlike previous interactive PDF demos, the output for DoomPDF is achieved by creating a text field for each row of pixels in the screen, then setting their contents to various ASCII characters. This gives me a 6 color monochrome display, that can be updated reasonably quickly (80ms per frame).

The source code is available at: https://github.com/adi...

Note that this PDF can only run in Chromium-based browsers that use the PDFium engine."