Skip to content

Commit

Permalink
Improve the main emscripten landing pages (#12091)
Browse files Browse the repository at this point in the history
Removes mentions of asm.js and other unneeded things, and focuses
on hopefully more useful content.

Also fixes the aspect ratio of some of the PNGs, which were converted
oddly from the SVG. This affected the landing page on github.
  • Loading branch information
kripken authored Sep 15, 2020
1 parent d82172c commit ee7fc55
Show file tree
Hide file tree
Showing 5 changed files with 69 additions and 59 deletions.
19 changes: 14 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
![emscripten logo](media/switch_logo.png)

[![CircleCI](https://circleci.com/gh/emscripten-core/emscripten.svg?style=svg)](https://circleci.com/gh/emscripten-core/emscripten/tree/master)

Main project page: <http://emscripten.org>

GitHub CI status: [![CircleCI](https://circleci.com/gh/emscripten-core/emscripten.svg?style=svg)](https://circleci.com/gh/emscripten-core/emscripten/tree/master)

Chromium builder status: [emscripten-releases](https://ci.chromium.org/p/emscripten-releases)

Overview
--------

Expand Down Expand Up @@ -34,8 +36,15 @@ Both are permissive open source licenses, with little if any
practical difference between them.

The reason for offering both is that (1) the MIT license is
well-known, while (2) the University of Illinois/NCSA Open Source
License allows Emscripten's code to be integrated upstream into
LLVM, which uses that license, should the opportunity arise.
well-known and suitable for a compiler toolchain, while
(2) LLVM's original license, the University of Illinois/NCSA Open Source
License, was also offered to allow Emscripten's code to be integrated
upstream into LLVM. The second reason became less important after
Emscripten switched to the LLVM wasm backend, at which point there
isn't any code we expect to move back and forth between the projects;
also, LLVM relicensed to Apache 2.0 + exceptions meanwhile. In practice you
can just consider Emscripten as MIT licensed (which allows
you to do pretty much anything you want with a compiler, including
commercial and non-commercial use).

See `LICENSE` for the full content of the licenses.
Binary file modified media/powered_by_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified media/switch_logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 51 additions & 49 deletions site/source/docs/introducing_emscripten/about_emscripten.rst
Original file line number Diff line number Diff line change
Expand Up @@ -4,66 +4,68 @@
About Emscripten
================

Emscripten is an :ref:`Open Source <emscripten-license>` LLVM to JavaScript compiler. Using Emscripten you can:

- Compile C and C++ code into JavaScript
- Compile any other code that can be translated into LLVM bitcode into JavaScript.
- Compile the C/C++ **runtimes** of other languages into JavaScript, and then run code in those other languages in an *indirect* way (this has been done for Python and Lua)!

.. tip:: Emscripten makes native code immediately available on the Web: a platform that is standards-based, has numerous independent compatible implementations, and runs everywhere from PCs to iPads.

With Emscripten, C/C++ developers don't have the high cost of porting code manually to JavaScript — or having to learn JavaScript at all. Web developers also benefit, as they can use the many thousands of pre-existing native utilities and libraries in their sites.

Practically any **portable** C or C++ codebase can be compiled into JavaScript using Emscripten, ranging from high performance games that need to render graphics, play sounds, and load and process files, through to application frameworks like Qt. Emscripten has already been used to convert a `very long list <https://github.com/emscripten-core/emscripten/wiki/Porting-Examples-and-Demos>`_ of real-world codebases to JavaScript, including large projects like *CPython*, `Poppler <https://github.com/coolwanglu/emscripten/tree/master/tests/poppler#readme>`_ and the `Bullet Physics Engine <http://kripken.github.io/ammo.js/examples/new/ammo.html>`_, as well as commercial projects like the `Unreal Engine 4 <https://blog.mozilla.org/blog/2014/03/12/mozilla-and-epic-preview-unreal-engine-4-running-in-firefox/>`_ and the `Unity <http://www.unity3d.com>`_ engine. Here are two demos using Unity:

.. figure:: angrybots.png
:alt: Angrybots game logo
:target: http://beta.unity3d.com/jonas/AngryBots/
:align: left

.. figure:: DEAD-TRIGGER-2-Icon1.png
:alt: Dead Trigger 2 Game logo
:target: http://beta.unity3d.com/jonas/DT2/
:align: left

.. raw:: html

<div style="clear:both;"></div>

For more demos, see the `list on the wiki <https://github.com/emscripten-core/emscripten/wiki/Porting-Examples-and-Demos>`_.

Emscripten generates fast code! Its default output format is `asm.js <http://asmjs.org>`_ , a highly optimizable subset of JavaScript that can execute at close to native speed in many cases (check out the `current benchmark results <http://arewefastyet.com/#machine=11&view=breakdown&suite=asmjs-ubench>`_ or run the :ref:`benchmark tests <benchmarking>` yourself). Optimized Emscripten code has also been `shown to have <http://mozakai.blogspot.com/2011/11/code-size-when-compiling-to-javascript.html>`_ a similar *effective size* to native code, when both are gzipped.

For a better understanding of just how fast and fluid Emscripten-ported code can be, check out the `Dead Trigger 2 <http://beta.unity3d.com/jonas/DT2/>`_ and `Angrybots <http://beta.unity3d.com/jonas/AngryBots/>`_ demos above.
Emscripten is a complete :ref:`Open Source <emscripten-license>` compiler
toolchain to WebAssembly. Using Emscripten you can:

- Compile C and C++ code, or any other language that uses LLVM, into WebAssembly,
and run it on the Web, Node.js, or other wasm runtimes.
- Compile the C/C++ **runtimes** of other languages into WebAssembly, and then
run code in those other languages in an *indirect* way (for example, this has
been done for
`Python <https://github.com/iodide-project/pyodide>`_ and
`Lua <https://daurnimator.github.io/lua.vm.js/lua.vm.js.html>`_).

Practically any **portable** C or C++ codebase can be compiled into WebAssembly
using Emscripten, ranging from high-performance games that need to render
graphics, play sounds, and load and process files, through to application
frameworks like Qt. Emscripten has already been used to convert a very long list
of real-world codebases to WebAssembly, including commercial codebases like the
`Unreal Engine 4 <https://blog.mozilla.org/blog/2014/03/12/mozilla-and-epic-preview-unreal-engine-4-running-in-firefox/>`_
and the `Unity <https://blogs.unity3d.com/2018/08/15/webassembly-is-here/>`_ engine.
For examples and demos, see the
`community-maintained list on the wiki <https://github.com/emscripten-core/emscripten/wiki/Porting-Examples-and-Demos>`_.

Emscripten generates small and fast code! Its default output format is
`WebAssembly <http://webassembly.org/>`_ , a highly optimizable executable
format, that runs almost as fast as native code, while being portable and safe.
Emscripten does a lot of optimization work for you automatically, by careful
integration with LLVM,
`Binaryen <https://github.com/WebAssembly/binaryen>`_,
`Closure Compiler <https://developers.google.com/closure/compiler>`_, and other
tools.

.. _about-emscripten-toolchain:

Emscripten Toolchain
====================

A high level view of the Emscripten toolchain is given below. The main tool is the :ref:`emccdoc`. This is a drop-in replacement for a standard compiler like *gcc*.

.. image:: EmscriptenToolchain.png

*Emcc* uses :term:`Clang` and LLVM to compile to wasm or asm.js. Emscripten emits JavaScript that can run that compiled code and provide the necessary runtime support. That JavaScript can be executed by :term:`node.js`, or from within HTML in a browser.

The :ref:`emsdk` is used to manage multiple SDKs and tools, and to specify the particular SDK/set of tools currently being used to compile code (the :term:`Active Tool/SDK`). It can even "install" (download and build) the latest toolchain from GitHub!

*Emsdk* writes the "active" configuration to the :ref:`compiler-configuration-file`. This file is used by *emcc* to get the correct current toolchain for building.
A high level view of the Emscripten toolchain is given below. The main tool is
the :ref:`emccdoc`. This is a drop-in replacement for a standard compiler like *gcc* or *clang*.

A number of other tools are not shown — for example, Java can optionally be used by *emcc* to run the :term:`closure compiler`, which can further decrease code size.
*Emcc* uses :term:`Clang` and LLVM to compile to WebAssembly. Emcc also
emits JavaScript that provides API support to the compiled code. That JavaScript
can be executed by :term:`Node.js`, or from within HTML in a browser.

The whole toolchain is delivered in the :ref:`Emscripten SDK <sdk-download-and-install>`, and can be used on Linux, Windows or macOS.
The :ref:`Emscripten SDK <sdk-download-and-install>` is used to install the entire toolchain, including emcc and
LLVM and so forth. The :ref:`emsdk` can be used on Linux, Windows or MacOS.

.. _about-emscripten-porting-code:

Porting code to use Emscripten
==============================

Emscripten support for **portable** C/C++ code is fairly comprehensive. Support for the C standard library, C++ standard library, C++ exceptions, etc. is very good. `SDL <https://www.libsdl.org/>`_ support is sufficient to run quite a lot of code. :ref:`OpenGL-support` support is excellent for OpenGL ES 2.0-type code, and acceptable for other types.

There are differences between the native and :ref:`emscripten-runtime-environment`, which mean some changes usually need to be made to the native code. That said, many applications will only need to change the way they define their main loop, and also modify their :ref:`file handling <file-system-overview>` to adapt to the limitations of the browser/JavaScript.

There are also limitations that can make some code easier to port — read :ref:`code-portability-guidelines` to determine where you may need to spend more effort.


Emscripten support for **portable** C/C++ code is fairly comprehensive.
Support for the C standard library, C++ standard library, C++ exceptions, etc.
is very good, as is `SDL2 <https://www.libsdl.org/>`_ and other APIs.
:ref:`OpenGL-support`
support is excellent for OpenGL ES 2.0-type code, and acceptable for other types.

There are differences between the native and :ref:`emscripten-runtime-environment`,
which mean some changes usually need to be made to the native code. That said,
many applications will only need to change the way they define their main loop,
and also modify their :ref:`file handling <file-system-overview>` to adapt to
the limitations of the browser/JavaScript.

There are also limitations that can make some code easier to port — read
:ref:`code-portability-guidelines` to determine where you may need to spend more
effort.
9 changes: 4 additions & 5 deletions site/source/home_page_layout.html
Original file line number Diff line number Diff line change
@@ -1,25 +1,24 @@
<img alt="./_static/Emscripten_logo_full.png" src="_static/Emscripten_logo_full.png">

<h3>Emscripten is a toolchain for compiling to <b>asm.js</b> and <b>WebAssembly</b>, built using <b>LLVM</b>, that lets you run C and C++ on the web at near-native speed without plugins.</h3>
<h3>Emscripten is a complete compiler toolchain to WebAssembly, using LLVM, with a special focus on speed, size, and the Web platform.</h3>

<div class="container" style="width:100%;margin-bottom:10px;">

<div class="one-third-container" style="width:32%; display:inline-block;">
<div class="signpost" style="display:inline-block; vertical-align:text-top; margin-left:5px;margin-right:5px;">
<div class="signpost-heading" style="font-size:2em; font-style:bold; margin-bottom:10px;">Porting</div>
<div class="signpost-body" style=""><p>Compile your existing projects written in C or C++ and run them on all modern browsers.</p></div>
<div class="signpost-body" style=""><p>Compile your existing projects written in C or C++ &mdash; or any language that uses <a href="http://llvm.org/">LLVM</a> &mdash; to browsers, <a href="https://nodejs.org/">Node.js</a>, or <a href="https://v8.dev/blog/emscripten-standalone-wasm#running-in-wasm-runtimes">wasm runtimes</a>.</p></div>
</div>
</div>
<div class="one-third-container" style="width:32%; display:inline-block; font-style:bold;">
<div class="signpost" style="display:inline-block; vertical-align:text-top; margin-left:5px;margin-right:5px;">
<div class="signpost-heading" style="font-size:2em; font-style:bold; margin-bottom:10px;">APIs</div>
<div class="signpost-body" style=""><p>Emscripten converts OpenGL into WebGL, and lets you use familiar APIs like SDL, or HTML5 directly.</p></div>
<div class="signpost-body" style=""><p>Emscripten converts OpenGL into WebGL, and has support for familiar APIs like SDL, pthreads, and POSIX, as well as Web APIs and JavaScript.</p></div>
</div>
</div>
<div class="one-third-container" style="width:32%; display:inline-block; font-style:bold;">
<div class="signpost" style="display:inline-block; vertical-align:text-top; margin-left:5px; margin-right:5px;">
<div class="signpost-heading" style="font-size:2em; font-style:bold; margin-bottom:10px;">Fast</div>
<div class="signpost-body" style=""><p>Thanks to <a href="http://llvm.org/">LLVM</a>, Emscripten, <a href="http://asmjs.org">asm.js</a> and <a href="http://webassembly.org/">WebAssembly</a>, code runs at near-native speed.</p></div>
<div class="signpost-body" style=""><p>Thanks to the combination of LLVM, Emscripten, <a href="https://github.com/WebAssembly/binaryen">Binaryen</a>, and <a href="http://webassembly.org/">WebAssembly</a>, the output is compact and runs at near-native speed.</p></div>
</div>
</div>
</div>
Expand Down

0 comments on commit ee7fc55

Please sign in to comment.