WebGL: ウェブの 2D および 3D グラフィック - Web API | MDN
このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。 @�C몪View in English p��ꪪAlways switch to English WebGL (Web Graphics Library) は、互換性があるウェブブラウザーにおいて、プラグインを使用せずにインタラクティブな 3D や 2D のグラフィックをレンダリングするための JavaScript API です。HTML の <canvas> 要素へ OpenGL ES 2.0 に密接に従った API を導入することにより、WebGL を実現します。これにより、ユーザーの端末が提供するハードウェアのグラフィックアクセラレーションを API で利用することが可能になります。 WebGL への対応は、現代のすべてのブラウザーにありま
C#でBlenderのファイルからパーティクルの位置を取り出してWebGLデモを作ってみた - Qiita
【この記事はWebGL Advent Calendar 2014 11日目です】 はじめまして。ワロタロです。 個人的にWebGLのゲームを作っていて、3DのエディタにはBlenderを使っています。 BlenderでWebGLというと、普通は何らかのエクスポータを使ってファイルを出力するのではないかと思います。しかし、筆者は何の因果かC#でBlenderのファイルを解析してjson形式のテキストファイルを出力させています。 なにか深い戦略があったわけではないので後付けですが理由を挙げてみました。 筆者がC#でBlenderファイルを扱う理由 標準のエクスポータではだいたいデータが足りない、または加工が必要 ゲームを作り始めた当時はBlenderの2.5系の出始めでエクスポータを書くには情報が少なかった それ以前にPythonが書けなかった C#はVisual Studioのコーディング支
javascript で作るシューティングゲームの祭典 #jsstg 開催中！ 作品のご応募お待ちしています！ - WebGL 総本山
応募期間は２月末まで！ まだまだ時間はあります！ タイトル通りですが、今現在、javascript で作るシューティングゲームのイベントを企画しています。 昨年、2014 年にも開催したこちらの企画、今回が第二回となります。 応募条件は javascript で作られているシューティングゲームであることのみ！ ぜひふるってご参加いただけたらと思います。 第一回は実に十作品以上が集まりました！ 2014 年の夏に第一回を開催した javascript シューティングゲーム祭り。 今回はその第二回となります。 過去の開催では十作品以上が集まり、あの窓の杜でも紹介してもらったりしています。 昨年の開催時には、勉強会も併せて開催しました。 作品投稿者以外の方にも広く参加を募り、こちらも懇親会含めて大変有意義な勉強会となりました。 その時の様子は、会場をお借りした @Stocker_jp さんがご自
three.js (WebGL) で TPS / FPS ゲームエンジン | Yomotsu net
去年 (2014 年) は three.js (WebGL) で TPS ゲームエンジンのような JS ライブラリーを作っていました。 ライブラリーの名前は未だに迷っているので名前空間ごと変えるかもしれませんが、今のところ用意している機能として: height field (高さマップ)、つまり、凸凹の地形を歩ける機能 three.js のメッシュを剛体( height field も含む) に変換する機能 プレイヤー 対 壁や天井との衝突 「崖」に接地している場合は滑り落ちる機能 どれくらい急な斜面を「崖」として扱うか ジャンプと着地 基本的なキーボード (WASD、矢印キー、Spaceキー) 入力 TPS カメラ (プレイヤーとの距離を 0 に近づけると FPS になる) TPS カメラと壁との衝突 (カメラが壁の中にめり込まない) などがあります。 demo 上記のそれぞれの機能につ
webGL｜株式会社モックス - 3DCGアニメーションを手付けモーションでより魅力的に。
webGL：3DCGアニメーションを手付けモーションでより魅力的に。
Unity 5 の WebGL で WebSocket を利用した通信をする方法について調べてみた - 凹みTips
はじめに Unity の WebGL では現状ではネットワーク機能に制約がありますが、WebSocket は使えるようです。 (English) On the future of Web publishing in Unity – Unity Blog 以前の記事では外側の JavaScript で Socket.IO を通じて通信した内容を用いましたが、これだとビルドしてから色々と確認しなければならず大変でした。 Unity 5 x WebGL について詳しく調べてみた - 凹みTips そこで、WebSocket 機能の利用方法について調べてみました。 WebSockets.unitypackage のダウンロード Unity5 Beta : WebGL + Unity WebSockets plug-in | Unity Community 上記スレッドより、WebSockets.u
続：WebGLでベジェ曲線を描いてみた | SONICMOOV LAB
12月になり、各所でアドベントカレンダーが始まっていますね。ソニックムーブのスタッフブログも25日まで毎日更新となります。 ソニックムーブ Advent Calendar 2014 開催です！ 初日を担当します、フロントエンジニアのらくさんです。元々3日目を担当する予定だったので初日らしい内容というわけでもなく、WebGLでベジェ曲線を描いてみた の続きになります。前回、2次ベジェ曲線の断片ひとつをシェーダで描画することはできました。今回は、複数の2次ベジェ曲線で構成されるパスの内部を塗りつぶします。 ステンシルバッファを使って凹型ポリゴンを塗りつぶす 本題に入る前に、ステンシルバッファを使って凹型ポリゴンを塗りつぶす方法を紹介します。次節では、これを2次ベジェ曲線のパスを塗りつぶすのに応用します。 上図左の凹型ポリゴンABCDEを塗りつぶす場合を考えます。まず、このポリゴン上の頂点のうち
WebGLでリアルタイム画像処理 - Qiita
#WebGLでリアルタイム画像処理 WebGL Advent Calender 1日目。 初投稿です、よろしくお願いします。 WebGLで画像処理やってみます。 今回施すのは以下のような画像の変換です。 セピア ネガポジ 色相の変更 https://dl.dropboxusercontent.com/u/27815754/movie_effect/image_effect.html WebGLは画像中の画素に対して並列演算を行うことに長けているので3Dだけでなくこういった応用ができます。 ソースコードはここに書き捨てていますので参考にしてみてください。 https://github.com/nyamadan/color_texture 仕組み 画素はR, G, Bの３成分を持ちます。 これをR', G', B'に変換します。 f(R, G, B) -> R', G', B' (あまり詳しく
第四回 WebGLスクール 「行列とクォータニオンについて知る」 - Qiita
wgld.orgの管理人であるdoxasさん主催のWebGLスクールの第四回目です。 今回は3Dプログラミングには欠かせない行列とクォータニオンについての講座でした。 前回の講座でも行列は使っていますが、今回からより深く行列について学びました。 前回までのまとめ 第一回 WebGLスクール 「WebGLの概念」 第二回 WebGLスクール 「WebGLの手続きと手順」 第三回 WebGLスクール 「シェーダの基礎」 行列とは？？ 行列とは、同じ箱に数値が詰め込まれているような構造をしていて、たくさんの情報を保持することができる数学の概念です。 3Dプログラミングではとても重宝されていて、欠かせないもの。難しいというか面倒。 行列との向き合い方 3Dプログラミングにおいて行列は 座標の変換 が主な利用目的となる。 行列の計算方法を理解するのはとても大変なので、まずは、 行列を用いて座標を変換
リアルタイムポストエフェクトで描く油絵風シェーダが見事！ - WebGL 総本山
リアルタイムにポストエフェクト WebGL ではシェーダが利用できることもあり、ポストエフェクトによる実装も比較的簡単に行えます。 今回ご紹介するのは、3D シーンにリアルタイムにエフェクトを加える油絵風のスケッチシェーダです。 作者の方は、先日ご紹介したクリスマス企画にも参加されている方で、本当に多彩な才能をお持ちのようです。 モノクロでもカラーでも ページが表示されると、あの有名なスタンフォードバニーがレンダリングされています。 もちろん、最初からポストエフェクトが掛かった状態になっていて、リアルタイムにエフェクトが加えられている様子を見ることが可能です。 マウスカーソルの位置に応じたインタラクティブな視点の変更、さらにクリック操作に反応してカラーとモノクロが切り替わるようになっています。 静止画ではわかりにくいですが、動く様子は非常におもしろいのでお勧めです。 作者の方の別の作品です
WebGL - Qiita Advent Calendar 2014 - Qiita
About reserved postingIf you register a secret article by the day before the same day, it will be automatically published around 7:00 on the same day. About posting periodOnly articles submitted after November 01, 2014 can be registered. (Secret articles can be registered anytime articles are posted.)
WebGL Fundamentals
WebGL from the ground up. No magic. These are a set of articles that teach WebGL from basic principles. They are NOT old rehashed out of date OpenGL articles like many others on the net. They are entirely new, discarding the old out of date ideas and bringing you to a full understanding of what WebGL really is and how it really works. If you are interested in WebGL2 please see webgl2fundamentals.o
WebGLを体感する。Web上で3Dモデリングするサービスまとめ
WebGLの普及にともないWebブラウザ上でお手軽に3Dデータを扱えるようになってきました。そこで今回はWebGLを活用したツールとして、Webブラウザ上で動作する3Dモデリングツールについてまとめてみました。 Webブラウザで動作するということもあり、お手軽に3Dモデリングを試してみることができるので、3Dモデリングに興味がある方はぜひ試してみてください。 Tinkercad 3Dモデリングを始めようと思い立ったものの、モデリングツールの使い方が分からないという方にオススメです。チュートリアルで3Dモデリング手順が解説されており、ツールの操作方法を覚えながら3Dモデリングのコツを学べる内容になっています。立方体や円柱、三角錐といった基本的なオブジェクトの他にアルファベットや「！」「？」といった記号のオブジェクトも用意されており、ちょっとしたロゴをモデリングする用途にも活用できそうです。
t-pot『WebGL: 物理ベースレンダリング』
■はじめに 3Dのゲームの開発は、今ではほとんどが物理ベースレンダリングに移っているかと思います。 Unreal Engine を使っている人や、Unity5を使っている人はもちろんのこと、自分でエンジンを作っている人たちも物理ベースレンダリングに移っている事でしょう。 ここでは、軽いおさらいとして、WebGLで物理ベースレンダリング（主に物理ベースのシェーディング）をしてみました。 プログラムは下記のホスティングされた先から実行してください。 http://t-pot.com/PBR/ Metallic, rouphness, fresnelのパラメータを変えると、金属具合、表面の粗さ、正面から見た時のフレネル反射率の値が変わります。 ソースコードは、GitHubに上げています(式は、一部、下記の説明と違っています)。 https://github.com/t-pot/PBR ■PBR
Cyrille Rossant - Big Data visualization with WebGL, part 1: Overview
In this post series, I'll talk about the big data visualization platform I'm currently developing with WebGL. I'll give in this first post the main motivations for this project. The next posts will contain the technical details. Part 1: Overview Part 2: Vispy Overview This project brings together several modern trends in data science and computing: Big Data Cloud computing Python The IPython/Jupyt
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://plus.appgiga.jp/masatolan/2014/11/28/54632/
GitHub - tparisi/Programming3DApplications: Code Examples for My New O'Reilly Book, Programming 3D Applications with HTML and WebGL
p5.js + p5.dom.js + clmtracker.js
GitHub - lebarba/WebGLVolumeRendering: WebGL Volume Rendering made easy
GitHub - powervr-graphics/WebGL_SDK: WebGL 3D graphics demos and helper code written in Javascript. Optimized for PowerVR devices
