タグ

関連タグで絞り込む (5)

タグの絞り込みを解除

WebGLに関するjyunjijyunjiのブックマーク (8)

  • mieki256's diary - three.jsでビルボード

    3種類のやり方で実験してみたり。ソースも画像も CC0 / Public Domain ってことで。 ビルボードとは…。 _ビルボードとYビルボードについて - YouTube という動画が分かりやすいかもしれず。 ◎ THREE.PlaneGeometry()を使う方法。 : THREE.PlaneGeometry(横幅, 縦幅, 横分割数, 縦分割数); を使うと、矩形ポリゴンを1枚作れる。(正確には、三角形ポリゴン2枚で矩形ポリゴンを1枚作ってる状態。) 生成時にサイズを指定することができるので、それぞれ違うサイズで生成できる。割り当てるマテリアルに応じて、光源やフォグを反映させることもできる。 そのままだとビルボードにならないけれど、カメラの位置・角度等を決定した後、レンダリング前にカメラの回転行列(?)を利用して、PlaneGeometry がカメラ側を向いているように回転させて

  • WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる - Qiita

    はじめに みなさんこんにちは。エマ・デュランダルさんです。 最近、WebGL関連のQiita記事を良く書くようになってきました。 WebGLはただなんとなく使う分には楽ですが、複雑な３Dの世界を作ろうとすると、思いの外パフォーマンスが出ないことがあります。 「Three.jsでやるとこんなに速いのに、どうしてWebGLを直接使うとこんなに遅くなるんだろう」という経験をされた方も多いかもしれません。 こうした世のWebGLライブラリには、たくさんの高速化のノウハウが詰まっています。 それらのうちの幾つかの技法を知ることで、あなたのWebGLアプリケーションも確実に高速化することができます。 本記事では、その技法の一つ、WebGLの拡張機能である「ジオメトリインスタンシング（ANGLE_instanced_arrays）」について、ご紹介したいと思います。 基本的な考え方 さて、「インスタンシ

    WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる - Qiita

  • [WebGL] Three.jsでジオメトリインスタンシングを使ってモデルをレンダリングする - Qiita

    現状、通常のフローでモデルデータを読み込んでそれをそのままジオメトリインスタンシングでレンダリングする方法はないようです。 なので、モデルデータを読み込み、自前で処理する必要があります。 （ただ、ドキュメントも整備されておらず、もしかしたらまだ安定していないかもしれないので、利用する場合は自己責任でお願いします） ちなみに今回の解説用に作ったサンプルはGithubに上げてあります。 （動作デモはこちら） ジオメトリインスタンシングって？ さて、まずジオメトリインスタンシングとはなにか。 WebGLでの詳細についてはエマさんのこちらの記事（WebGLにおけるジオメトリインスタンシング（ANGLE_instanced_arrays）を丁寧に説明してみる）がとても分かりやすく書かれているので読むことをおすすめします。 ざっくり言うと、プログラムで言うところのクラス・インスタンスの関係をジオメトリ

    [WebGL] Three.jsでジオメトリインスタンシングを使ってモデルをレンダリングする - Qiita

  • https://atmarkit.itmedia.co.jp/ait/articles/1211/26/news012_3.html

  • WebGLの能力を引き出すプログラマブルシェーダー

    シェーダー言語（GLSL）の書式 前ページではThree.jsからカスタムシェーダーを利用する方法を取り上げました。ここからはシェーダー言語（GLSL）の具体的な記述方法を解説していきます。 GLSLの文法は、C言語を単純化してベクトルや配列などの型を追加したものになっています。JavaScriptもC言語の影響を強く受けているので、共通する部分が多くあります。以降では、JavaScriptと異なる部分を中心にして、GLSLの主な機能・文法を説明します。 一般的に、GLSLのコードは以下のような構成になります。前のページのサンプルにあるコードと見比べてみてください。 コードの最初の部分では、プログラム中で使用するグローバル変数の定義を記述します。前ページで出てきたuniform変数やattribute変数の定義もここで行います（詳細は後述）。JavaScriptと異なり、この部分にコードを

    WebGLの能力を引き出すプログラマブルシェーダー

  • WebGLの能力を引き出すプログラマブルシェーダー

    WebGLの能力を引き出すプログラマブルシェーダー Webページ上で利用できるグラフィック技術を紹介する本連載も、ついに最終回となりました。フィナーレを飾る題材は、WebGLの最も強力な機能である「プログラマブルシェーダー」です。前回（多彩な表現力のWebGLを扱いやすくする「Three.js」）と同様にThree.jsの使用を前提として、プログラマブルシェーダーの基本的な書き方と、Three.jsを各機能に組み込む方法を解説します。 前回はThree.jsの代表的な機能を解説し、いずれもWebGLでなければ実現の難しいものばかりでした。しかし、実はそれでもWebGLの能力のごく一部を使っているにすぎません。独自のプログラマブルシェーダー（カスタムシェーダー）を書くことができれば、描画処理の大部分を柔軟にカスタマイズでき、望み通りの表現を得られます。Three.jsの使い方に慣れたら、ぜひ

    WebGLの能力を引き出すプログラマブルシェーダー

  • wgld.org | WebGL |

    WebGL contents WebGL に関するコンテンツの一覧です。 初心者や WebGL の入門者の方は、最初から読み進めていただけると理解が深まると思います。 また、当サイトでは実際に動作する WebGL のサンプルや、WebGL のデモを多数用意していますが、それらには当サイトオリジナルの行列・クォータニオンなどを扱うライブラリ、minMatrix.js などが使われています。ライブラリの詳しい実装については library のページをご覧ください。 WebGL 2.0 については別のコンテンツとして分けて掲載していますので、 WebGL2 のほうを参照してください。 ブラウザの準備 WebGL を始める前に canvas を知る 3D 描画の基礎知識 レンダリングのための下準備 行列(マトリックス)の基礎知識 頂点とポリゴン コンテキストの初期化 シェーダの記述と基礎 頂点バッ

  • WebGL

    LOW-LEVEL 3D GRAPHICS API BASED ON OPENGL ES WebGL™ is a cross-platform, royalty-free open web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element. Developers familiar with OpenGL ES 2.0 will recognize WebGL as a Shader-based API using GLSL, with constructs that are semantically similar to those of the underlying OpenGL ES API. It stays v

    WebGL
  • 1

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.