タグ

webglに関するextra_numberのブックマーク (7)

  • WebGL、three.jsでワクワクしてみた | Tech Blog | CRESCO Tech Blog

    気軽にブラウザで3Dコンピュータグラフィックス(以下3DCG)を実装できる、WebGL、three.jsの記事を書いてみました。

  • WebGLを体感する。Web上で3Dモデリングするサービスまとめ

    WebGLの普及にともないWebブラウザ上でお手軽に3Dデータを扱えるようになってきました。そこで今回はWebGLを活用したツールとして、Webブラウザ上で動作する3Dモデリングツールについてまとめてみました。 Webブラウザで動作するということもあり、お手軽に3Dモデリングを試してみることができるので、3Dモデリングに興味がある方はぜひ試してみてください。 Tinkercad 3Dモデリングを始めようと思い立ったものの、モデリングツールの使い方が分からないという方にオススメです。チュートリアルで3Dモデリング手順が解説されており、ツールの操作方法を覚えながら3Dモデリングのコツを学べる内容になっています。立方体や円柱、三角錐といった基的なオブジェクトの他にアルファベットや「!」「?」といった記号のオブジェクトも用意されており、ちょっとしたロゴをモデリングする用途にも活用できそうです。

    WebGLを体感する。Web上で3Dモデリングするサービスまとめ
  • 多彩な表現力のWebGLを扱いやすくする「Three.js」

    多彩な表現力のWebGLを扱いやすくする「Three.js」:Webグラフィックをハックする(5)(1/5 ページ) Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリだ。サンプルコードと見比べながら、効率良く学習しよう Three.jsの基礎 連載も5回目を迎え、いよいよ佳境に入ります。今回の題材は、Webブラウザ上で3次元グラフィックを実現する「WebGL」です。ただし、これまでと違ってAPIを直接は触れず、「Three.js」を利用します。Three.jsはWebGLの冗長な仕様をうまくラップし、扱いやすいインターフェイスで提供するライブラリです。Mr.Doob氏を中心にオープンソースで開発が進められており、WebGL界隈ではデファクトスタンダードに近い地位を築いています。 Three.jp公式サイト WebGLはこれまで解説し

    多彩な表現力のWebGLを扱いやすくする「Three.js」
  • Made by Evan

    Figma (2012-2021) I'm one of the cofounders of Figma, a collaborative browser-based interface design tool. My main contributions were to the rendering engine, the multiplayer collboration service, the vector and text editors, and the plugin system. Read more... esbuild (2020-present) My biggest open source project is esbuild, a very fast JavaScript and CSS bundler. It's main purpose is to bring ab

  • three.js - JavaScript 3D library

    three.js r167 docs examples Learn documentation examples editor gpt Community questions discord forum twitter Code github download Resources Three.js Fundamentals Three.js Journey Learn Three.js 初めてのThree.js Merch T-Shirts submit project

    three.js - JavaScript 3D library
  • 初心者でも絶対わかる、WebGLプログラミング<基礎知識編>

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

    初心者でも絶対わかる、WebGLプログラミング<基礎知識編>
  • HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB

    2015年2月10日(火)、アドビシステムズ株式会社でCreateJS勉強会 (第5回)が開催され30名を超える方々が来場されました。勉強会のフォローアップとして、発表資料「CreateJSで制作するスペシャルコンテンツ」のスライドをブログ記事という形で公開します。記事では口頭で発表した内容もできる限り記載しました。 なお、前編(CanvasとWebGLの比較)と後編(WebGLの最適化)の二部構成にしています。前編となる記事ではスペシャルコンテンツ制作にあたり調査したHTML CanvasとWebGLの双方の利点・欠点をまとめています。 HTML CanvasとWebGL 今回のテーマは「HTML CanvasとWebGLの使い分け」です。皆さんもご存知の通り、HTML5のCanvas要素 (JavaScript ではCanvasRenderingContext2Dオブジェクト)は従

    HTML5 CanvasとWebGLの使い分け―CreateJS勉強会/池田発表資料 (前編) ― ICS LAB
  • 1