WebGL 開発支援サイト wgld.org
次なる Web を見据えて 来たるべき WebGL2 の時代へ 2011 年、最初のバージョンである 1.0 が勧告された WebGL は、ウェブブラウザ上で OpenGL ES に相当するグラフィックス API の機能を利用することができる JavaScript の API です。 そして 2016 年、WebGL の正当な後継バージョンとなる WebGL2 (もしくは WebGL 2.0) がいよいよ本格的に利用できる段階になりつつあります。 当サイトでは、2012 年の開設以来、WebGL 1.0 系の API を用いるための技術解説を掲載してきました。そして今後は、時代の変遷に合わせて WebGL 2.0 系の解説記事も公開していく方針です。 WebGL 2.0 が登場するとは言っても、後方互換を保つという意味もあって 意図的に有効化 しない限りは WebGL 1.0 相当の AP
第1回目 WebGLの概念 - Qiita
講師紹介 講師：杉本 雅広さん wgld.org という WebGL 開発支援サイトの管理人 WebGL の普及と発展のために日夜活動中 授業の流れ 1.WebGLとは何か？、利用状況、将来性 2.WebGLのメリット・デメリット 3.開発環境構築など 1. WebGLとは何か？ ・GPU(Graphics Processing Unit)へ直接アクセスすることができるブラウザに組み込まれたAPI ・ブラウザ側の実装（ブラウザに組み込まれている）によるものなので、ブラウザによって性能や機能に差が生じる WebGLはOpenGLというネイティブで動作するグラフィックスAPIをブラウザから呼び出すためのパイプ役のような存在 ・javascriptからOpenGLへ直接アクセスすることはできないがWebGLが間に入ることでOpenGLを間接的に呼び出すことができる ・OpenGLはグラフィックス
WebGLスクール2期1回目メモ - Qiita
前々からしっかり勉強しようと思ってたので、WebGLスクール全6回に参加する事にしました。 → WebGL スクール第２期の募集を開始します！ 2015年5月開講！ 個人的にWebGLやGLSL勉強してたけど、周りに優秀な人が多くて危機感あったのでちょうど良い機会でした！ 1回目のスライド ・WebGL の概念と基本を押さえよう 内容 前半 ・作例 ・WebGLとは何か？ ・実装の基本的な流れ 後半 ・シェーダーやGLSLのハンズオン ハンズオン内容 以下のオンラインエディタを使ってハンズオンしました(主にGLSLエディタ) ・GLSLエディタ ・範囲選択でcommand + / でまとめてコメント、コメント解除できる ・エディタ上でcommand + sで実行 ・エディタ上でescで実行停止 ・GLSL/HTML/jsエディタ ・GLSLの組込変数一覧 → 明解WebGL本の一番後ろの付
第一回 WebGLスクール 「WebGLの概念」 - Qiita
このたびwgld.orgの管理人であるdoxasさん主催のWebGLスクールに参加しました。 毎週火曜日の19:30〜22:00の全12回の講座となっています。 記念すべき第一回はWebGLの概念についてのお話でした。 WebGLとは何か ざっとWebGLとはなんなのか GPUに直接アクセスできるブラウザに組み込まれたAPI 本来JSからOpenGLを呼び出すことはできない JSとOpenGLの間に入って、OpenGLを呼び出せるのがWebGL 直接GPUを利用できるので、とても高速 ブラウザが対応していても、OSやハードウェアが対応してなければ動作しない WebGLで作られたもの 3dbricks Urban Galaxy Online G-Star RAW | New Denim Arrivals FishGL thisway.js by stravaganza WebGL Fluid
2D 表現でベストパフォーマンスを目指すなら webGL するっきゃない - Qiita
はじめに タイトルにあんなことを書いてはいますが、これはとある案件で行ったことの忘備録的なものです。 別に webGL 宗教というわけでもなく、 これぐらいの表現をしたかったら webGL なんだな という感じで捉えて欲しい。 どんな案件だったか まずこの案件は初めは 3D の球体に地球のテクスチャを貼ってグリグリ動かしたい 球体状には幾つかのオブジェクトが置いてあってインタラクションできる 地球には近づいたり、遠くなったりする できれば、多くの端末で見せたい ( PC, SP <- これが重要 ) という案件でした。割と3Dとかではよく聞く感じの案件ですね(でもやるのは初めてだったので嬉しかった。) しかしクライアントさまからのご要望で仕様変更となりました。 3D は 重いから 2D にしよう ということでした。 すでにこちらも3Dに胸をウキウキさせて webGL Meet Up に行っ
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オブジェクト）は従
簡単アニメーション！Pixi.jsを触ってみる！（1）テキストを動かしてみる - Qiita
簡単アニメーション！Pixi.jsを触ってみる！ 〜（1）テキストを動かしてみる〜 突然ですが、 Pixi.js を触ってみることにしました。 （前フリ無しw） Pixi.jsとは? Pixi.jsは、Goodboy Digital社が配布している2D描画用のjavascriptライブラリです。 下記サイトで配布されています。 MITライセンスに基づくオープンソースソフトウエアとして開発が進められています。 このライブラリを使って作ったアニメーションは、WebGLを自動的に使ってくれるようです。 （非対応のデバイスではCanvasを使う）。 難しそうなWebGLを覚えなくて使えるのはうれしいです。 pixi.jsのexampleページでデモが紹介されていますので、いくつか見てみましょう。(スクリーンショット画像クリックで本家pixijs.comサイトのexampleページに飛びます) Ex
2D WebGL renderer Pixi.js v4【連載第一回】 - manmanrai’s diary
背景 いまどき大人気の2D WebGLを作れるjsライブラリーです。日本語のチュートリアルも少ないなので（2017年4月の現時点）、英語のチュートリアル（文末にリンク貼っておきます。）を読み、単語の意味調べながら、やりながらちょっとずつ勉強の記録書きます。 このチュートリアル55chatperありますが、頑張りたいと思います。 ※ 注意：全てチュートリアル通り書かないので、いっぱいオリジナルを挟みます。予めご了承くださいませ。 Start with pixi.js まず、pixi.jsを手に入れましょう。 でもこれは練習ですし、すぐ始めたいなので、CDNで読み込みタイプを選びます。 htmlを作ります。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Start with pixi.js</titl
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
