[B! JavaScript][tutorial][WebGL] efclのブックマーク

生 WebGL と TypeScript で Vercel のロゴを作る

はじめに完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日

efcl 2021/02/09

WebGLを使って図形を描画するまでをstep by stepで解説しているチュートリアル

リンク

Three.js入門サイト - ICS MEDIA

このサイトは、WebGLのライブラリ「Three.js」の入門サイトです。初学者から学べるように基本から解説しつつ、発展的な内容までまとめています。このサイトを通して、ウェブの3Dのインタラクションデザインについて学んでいきましょう。 Three.js概要 Three.jsは、HTML5で3Dコンテンツを制作するためのJavaScriptライブラリです。Mr.doob氏が中心となって開発されており、オープンソースソフトウェアとして個人・商用でも無償で利用できます。 WebGLだけで3D表現をするためには、立方体1つ表示するだけでも多くのJavaScriptやGLSLコードを書く必要があり専門知識も必要です。Three.jsを使えばJavaScriptの知識だけで簡単に3Dコンテンツが作成できるため、手軽に扱えるようになります。もともと2000年代後半のFlashの時代から、ウェブの3D

efcl 2017/12/08

Three.jsについてのチュートリアルサイト。 Three.jsの使い方やWebGLについて

リンク

GitHub - kittykatattack/learningPixi: A step-by-step introduction to making games and interactive media with the Pixi.js rendering engine.

Pixi is an extremely fast 2D sprite rendering engine. What does that mean? It means that it helps you to display, animate and manage interactive graphics so that it's easy for you to make games and applications using JavaScript and other HTML5 techno logies. It has a sensible, uncluttered API and includes many useful features, like supporting texture atlases and providing a streamlined system for a

efcl 2015/09/07

pixijsについてのチュートリアル

リンク

生WebGL入門:初音ミクの美麗3Dモデルを表示する(前編)

Special Thanks to @hagat and @teehah for reviewing my articles! 近年、WebGLに流行の兆しが出てきました。WebGLとは、ブラウザに何らプラグインをインストールすることなく、JavaScriptよりGPUを使用した3Dの表示を可能とする技術です。プラグインのインストールが必要ないとはいえ今までは対応ブラウザが少なくあまり実用的ではありませんでしたが、先日のiOS8で正式に対応されたことでモバイルブラウザにおいて対応率が跳ね上がり、スマートフォンにおいてブラウザベースで3Dのゲーム等を作れる可能性が急激に高まりました。今回WebGL Advent Calendarの一環として、生WebGLで3Dのオブジェクトを表示するところまで挑戦してみます。WebGLにはthree.jsを始めとして有用なライブラリがたくさんあり、大抵の場

efcl 2014/12/08

WebGLを使ってMMDの3Dモデルを表示するまでを丁寧に解説している WebGLでのポリゴンの表示、3Dで必須な行列や座標、モデルデータの読み込みについて等

リンク

HTML5による物理シミュレーション環境の構築～WebGLライブラリThree.js 入門（１／３）～

HTML5とWebGL 初めにHTML5の位置づけについて簡単に触れます。HTML5とはこれまでのWebページ作成言語で主流だったHTML4やXHTMLの後継言語のことで、 2008年に草案がまとめられ、2014年までにウェブブラウザ各社への正式勧告を目指して策定が進められています。 HTML5は 2012年1月でもまだ「草案」段階で、仕様も流動的な準備段階であるが、開発側からもユーザ側からも非常に注目が集められています。その大きな理由の一つに挙げられているのが、iPhoneやAndroidなどのスマートフォンの台頭による情報端末の多様化への対応のためです。つまり、様々なWEBコンテンツのクロスプラットフォーム化への重要な貢献が期待されているからです。というのもスマートフォンの登場までは、Adobe社が提供する FLASH が動画やオーディオなどが組み合わされたマルチメディアコンテンツ