Three.js(WebGL)で一年以上学習した成果と便利なクラス/ライブラリを紹介
こんにちは、うえむーです。 今回はThree.js(WebGL)で一年以上勉強した成果と便利なクラス/ライブラリを紹介したいと思います。 Three.js(WebGL)とは？ Three.jsは、少しでも簡単にWebサイト上に3Dのコンテンツを表示するライブラリです。 ライブラリなしでカメラ・影・ライト・メッシュ実装する場合はそれなりの高度な技術が必要になりJavascriptのコード量が膨大になっていきます。 Three.jsのようなライブラリを導入することで、Javascriptの基礎と、Three.jsのクラスを利用することで気軽に3Dのコンテンツを表示することができます。 当初は、Three.jsを勉強したいけどまずどこから手をつければいいかわからず、公式ドキュメントを見ると英文で何をどうすればいいのかわからないかと思います。 Three.jsをこれから勉強するには、以下のサイトを
マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開
マイクロソフト、WebAssemblyとWebGLで推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開 マイクロソフトは、WebAssemblyとWebGLで機械学習の推論エンジンを実装した「ONNX Runtime Web」（ORT Web）をオープンソースで公開しました。 INTRODUCING: #ONNXRuntime Web (ORT Web), a new feature in ONNX Runtime to enable JavaScript developers to run and deploy machine learning models in browsers https://t.co/Ey3tsNlkEe pic.twitter.com/9uGyK8Pra0 — onnxruntime (@onnxruntime)
プログラミング初心者からthree.jsに慣れるまで｜misaki nakano
こんにちは。 私は現在クリエイティブディベロッパーという、フロントエンド＋WebGL 実装する仕事を2年半ほどやっています。 1年半東京の会社で働いたあと半年間フリーランスをして、その後アムステルダムの会社に入社して現在8ヶ月経ちます。 three.jsで絵を作るのが好きで、仕事でもプライベートでもこんなかんじのものを作っています。ほとんどtwitterにあげてるので、興味がある方はぜひ見てみてください。 最近ツイッターのDMでどうやってthree.jsを勉強すればいいかアドバイスが欲しいというのをもらうことが多くなってきたんですが、この質問に答えるのは難しいなと感じています。 人によって得意不得意があるし、始めようと思った時点でどのくらいプログラミングや数学に精通しているか人それぞれすぎて、これがベストな勉強法！これをやれば誰でも大丈夫とは言えないです。 この記事では、私が初心者レベルか
Famo.us·WebGL/Canvasを使って高度な表現を可能にするJavaScriptフレームワーク MOONGIFT
スマートフォンにおいてWebかネイティブかと言った議論は常にされています。ネイティブアプリは高度なUI/UXを提供する一方、インストールの手間が否めません。Webは速度やUXにおいて見劣りがします。 しかしWeb（HTML5）の進化は止まりません。ついにここまで！というフレームワークがFamo.usです。3Dを備えたレンダーを行うJavaScriptフレームワークになります。 Famo.usの使い方 たくさんのデモが登録されていますので見ていきましょう。 写真と画像の組み合わせ。左右から表示されるアニメーションもあります。 スクロールパララックスエフェクトのデモ。 アニメーションのデモ。 カレンダーの日付を選択するとスケジュールが開きます。アニメーションがスムーズです。 スライドして表示される写真のデモです。 ページ送りのデモ。 天気アプリデモ。ベクター調の表示がいいですね。 タスク管理。
wgld.org | WebGL |
WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebGL Image Transitions | Demo 1 | Codrops
