タグ

ブックマーク / html5experts.jp (6)

  • Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーC / C++をasm.jsに変換するツールEmscripten

    Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーC / C++asm.jsに変換するツールEmscripten 清水智公(Mozilla) 間が随分と空いてしまいましたが、低水準言語とasm.jsとWebAssembly詳解の第3回目です。 前回は、型システムを中心にasm.jsを解説しました。asm.jsはプログラムの中に型が明示されるため、事前コンパイルをして高速に動作させられる点がasm.jsの大きな特徴でした。 しかし数値演算しか行えなえず、また式にすべて型アノテーションを行わなくてはならないため、通常のJavaScriptのプログラムのように手で書くのはなかなかに辛いものがあることもわかりました。 これはasm.jsで書かれたプログラムは、JavaScriptとしても実行可能であることが求められたためでもありました。そこでasm.js

    Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーC / C++をasm.jsに変換するツールEmscripten
  • Babelで始める!モダンJavaScript開発

    Babelは最低限の機能をIE8以降で、フル機能をIE10以降でサポートします。 (実際にはIE9以降から使用することを推奨します) 当初Babelは6to5と呼ばれていましたが、ECMAScript7の仕様なども取り込むようになったため、バージョンを想定しないBabelという名前に変更されました。 Babelの特徴 Babelと同じように「トランスパイルすることでJavaScriptのコードを出力する」ツールにはTypeScriptやCoffeeScriptなどがあります。 それらと比較するとBabelは「ECMAScript標準仕様をベースにしている(*)」という特徴があります。 (*) 実際にはJSXもサポートしているため、必ずしもECMAScript標準仕様のみをサポートしているわけではありません。 このため、「いずれ標準実装される仕様を先取りできる」、「Babel自体が廃れても同

    Babelで始める!モダンJavaScript開発
  • Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーasm.jsの仕組みとコーディング例

    Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーasm.jsの仕組みとコーディング例 清水智公(Mozilla) 連載の第1回目は asm.jsの紹介と、asm.jsが導入された背景を概観しました。 Just in Timeコンパイルによって高速にJavaScriptを実行できるようになりましたが、立ち上がりが遅い、やり直しが発生する、コンパイルによって一時的に負荷が向上する、といった問題が残されています。 これを解決するためにプログラムの実行を行うより前にネイティブコードへとコンパイルするAhead of Timeコンパイルを導入したいのですが、JavaScriptは柔軟すぎて効率の良いネイティブコードを出力することが難しい、という問題がありました。 asm.jsはこの問題に一定の解をあたえるものとなります。今回はそのasm.jsがどのようなも

    Webブラウザで高速な演算を可能にする低水準言語asm.jsと、WebAssembly詳解ーasm.jsの仕組みとコーディング例
  • 初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>

    初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩> 小山田 晃浩(株式会社 ピクセルグリッド) WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま

    初心者でも絶対わかる、WebGLプログラミング<three.js最初の一歩>
  • 初心者でも絶対わかる、WebGLプログラミング<基礎知識編>

    HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって? WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング(アニメーション)など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対

    初心者でも絶対わかる、WebGLプログラミング<基礎知識編>
  • ユーザーの体感速度を高めるためのJavaScriptチューニング(前編)

    連載「Webサイト・アプリ高速化テクニック徹底解説」第2回は、JavaScriptの高速化について、まずは前編、後編に渡ってユーザーの体感速度を向上させるための方法を紹介します。JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。 今回から複数回に分けて、JavaScriptの高速化をテーマに解説していきます。まずは、ユーザーの体感速度を高めるためのJavaScriptチューニングということで、単純なJavaScriptの構文によるスピードを比較するようなものではなく、主にユーザー視点からの高速化を主眼に解説します。その中で、同期・非同期といったJavaScriptの仕組みやscript要素のasync属性、defer属性などについても触れていきます。 ユーザーの体感速度を向上させる 一概にJavaScriptの高速化といっ

    ユーザーの体感速度を高めるためのJavaScriptチューニング(前編)
    waman
    waman 2013/07/24
    『JavaScriptの同期・非同期の仕組みやscript要素のasync属性、defer属性について詳しく解説します。』
  • 1