glfx.js - An image effects library for JavaScript
Adjust photos in your browser in realtime with glfx.js, an image effects library powered by WebGL. It uses your graphics card for image effects that would be impossible to apply in real-time with JavaScript alone. There are two caveats to glfx.js. First, WebGL is a new technology that is only available in the latest browsers and it will be quite a while before the majority of users have it. Second
Flat Surface Shader
Admit it, 3D is cool. But, you know what's cooler? 2D. I love WebGL, but unfortunately it doesn't work everywhere. This lighting simulation can be configured to use either the 2D context of a canvas element or an array of SVG polygons to draw the triangles. It also utilises native Float32Arrays to store numerical data for highly optimised calculations. This is a collaborative effort between Matthe
Home - Pathos Communications
Through your thought leadership, Pathos Communications can guarantee you media coverage “I’ve worked with thousands of growing businesses in my career. Media coverage can be the difference between success and failure, but most PR agencies just don’t deliver. That’s why I love Pathos Communications’ pay-on-results PR model – it’s the future of the industry!” -Kevin Harrington, Original ‘Shark’ from
Typed arrays - Binary data in the browser | Articles | web.dev
Typed arrays - Binary data in the browser Stay organized with collections Save and categorize content based on your preferences. Introduction Typed Arrays are a relatively recent addition to browsers, born out of the need to have an efficient way to handle binary data in WebGL. A Typed Array is a slab of memory with a typed view into it, much like how arrays work in C. Because a Typed Array is bac
HTML5の3D表現を身につけよう！簡単なJSではじめるWebGL版Away3D入門 - ICS MEDIA
Away3D TypeScriptはHTMLの3D技術「WebGL」を扱いやすくしたフレームワークです。個人ブログ（HTML5で3Dを実現する本格派WebGLフレームワーク、Away3D TypeScriptの公式デモ)で紹介したようにAway3Dを使えばGPUによる本格的な3D表現をプラグイン無しで作成できます。 そこで、初級者にもやさしいAway3D TypeScript(以下、Away3D)チュートリアルをはじめてみることにしました。必要となるスキルレベルは、JavaScriptの入門書を一冊読み終えたぐらいを想定してます。Away3DはJavaScriptやTypeScriptのどちらでも利用できますが、本連載ではJavaScriptで解説します。 この記事について AwayJSは活発に開発されていないため、本サイトとしては利用は推奨しません。WebGLを活用したい方は、Three
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 西田慎吾（株式会社アイ・エム・ジェイ） WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 前回に引き続きHTML5 Japan Cup 2014にてWebGL賞と優秀賞をいただいたオンラインレースゲーム、JS-Racingの技術解説をさせていただきます。 サーバサイドの使用技術 サーバサイドの技術としてNode.jsを使用しています。Node.jsはサーバーサイドで動作するJavaScriptで、ノンブロッキングI/Oというモデルを採用しています。非同期処理でデータベースへのアクセスとWebページの表示を別々に行ってくれるので、ストレスなく大量のページの表示が出来ます。また、Socket.ioというライブラリを扱うことで、WebSocke
Sparticle徹底解説。パーティクルエフェクトを作ろう！ - ICS MEDIA
2013年3月26日（水）に弊社が開催したWebGL & Stage3D 勉強会 (第5回)にてパーティクルエフェクトツールの「Sparticle」についてのデモをさせていただきました。今回はそのフォローアップ記事になります。 1. Sparticleの紹介 Sparticleは、リアルタイムプレビュー付3Dパーティクルエフェクト作成ツールです。AIR製のデスクトップツール、オンライン上のWebツールがあり、いずれも無料で利用できます。FlashのStage3Dを使用していますのでGPUパワーを利用し高速に動作する上、GUIによるシンプルな操作が特徴です。ツールで作成したエフェクトは、Away3Dライブラリを使用したコンテンツにに取り込むことができるため、3Dの展示デモや、ゲームコンテンツ、モバイルアプリなどの開発に利用できます。(SparticleはCheng Liao氏による実験的プロ
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
初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
three.js の PlaneGeometry で地形を作る | Yomotsu net
GraphicalWeb Advent Calendar 2012 の 1日目の記事です。 この記事では、three.js の PlainGeometry の頂点の z 方向にノイズを加えて、少し凸凹とした地形を作ってみるという内容をまとめています。完成は以下のような表示です。 なお、demo は WebGL が有効なブラウザー (Chrome, Firefox と Flag を有効にした Opera と Safari) でしか再生できません。 順を追ってみていきます。 ##手順 1 まずは three.js のお決まりに沿って、renderer, scene, camera, light を設置していきます。 scene に fog を指定しておくと遠方が指定した色にぼやけさせることができます。 scene.fog = new THREE.FogExp2( 0xAA9966, 0.015
ブラウザーの3D表現もここまで来た！WebGLを使った驚きのWebサイト
ブラウザーで3次元コンピュータグラフィックスを表... / WebGLを使った3D表現 / SculptGL他...全13件 ブラウザーで3次元コンピュータグラフィックスを表示させるための標準仕様「WebGL」。Microsoftも重い腰を上げ、次期バーションの「IE11」からWebGLを標準サポートすることが決定しています。これからますます目にする機会が増えそうです。 そんな、圧倒的な3D表現が可能なWebGLを使った驚きのWebサイトを集めました。
これはすごい！ゲーム開発に最適な高性能JavaScriptアニメーションフレームワーク「CAAT」 - Chrome Life
前回の記事で、200行で作れるHTML5製テトリスをご紹介してたくさんの反響がありました。 誰もが知っているゲームを少ないコードで実現していることと、コードが読みやすくてプログラミングのスキルアップに役立つということで関心をもたれたと思います。 これを機会に自分でもゲームを作ってみたいと思った方もいるのではないでしょうか？筆者もそのうちの一人です。 しかし、フルスクラッチで作るとなるとそれなりに経験が必要ですし、高度な動きを実現するにはどうやって作れば良いのかも分かりません。 そこで今回ご紹介するのは、ゲーム作りに最適な、高性能JavaScriptアニメーションフレームワーク「CAAT」です。（CAATは、Canvas Advanced Animation Tookitの略） 「CAAT」は完全なゲームフレームワークとして様々な機能が提供されています。 CAATの機能と特徴 オンスクリーン
『Three.jsとBlenderによるWebGL』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 初めまして。 html5、javascript、flashなどのクライアント開発を メインに担当しております、 菅家(@KA_ka_YY)と申します。 弊社3月に行われました、エンジニア、デザイナーを対象とした アプリコンテストというイベントにて WebGLを使用した野球盤ゲームを作成しました。 その際利用したThree.js（WebGLのjavascriptライブラリ）を用いた WebGLの使用方法を紹介させていただこうと思います。 （1）レンダリングまずは Blender というフリーの3Dモデリングソフトで 以下のようなキャラクターを作りました
Web ブラウザで動くとは思えない、凄い WebGL デモ・アプリ 65 個 - WebOS Goodies
今月の 22 日に GTUG Girls のイベントで WebGL (Three.js) のハンズオンをやります。内容は初心者向けで、簡単な物体を表示してみたりして Three.js の基礎を学ぼうというものです。女性限定ですが、興味のある方はぜひご参加ください。 【告知】第10回GTUG Girls Meetup 「キラリとひかるモノ作り！WebGL(Three.js)入門編」 募集開始！ で、本日は宣伝も兼ねて WebGL を使ったデモやアプリケーションのまとめエントリを書いてみました。いずれも Web ブラウザで動くとは思えないほどインパクトのあるものばかり。 WebGL 対応のブラウザで（Chrome か Firefox の最新版が無難です）、おもいっきり堪能しちゃってください！ 長編デモ 音楽に合わせてインパクトのある映像を展開していく、ちょっとしたストーリー性のあるデモなどを集
VOXEL ARTICLE - voxel
Slot online games have become increasingly popular in recent years, offering a thrilling and convenient way to indulge in the excitement of gambling from the comfort of your own home. With a wide variety of themes, vibrant graphics, and the potential for big wins, online slot games provide endless entertainment…
JavaScriptとWebGLベースの3Dゲーム構築ツール「Voxel.js」 | OSDN Magazine
JavaScriptおよびWebGLを利用する3Dゲーム制作ライブラリ「voxel.js」が公開された。2012年末にスタートしたプロジェクトで、「Minecraft」のようなブロックゲームを容易に作成できるという。現在活発な開発が行われている。 voxel.jsはMax Ogden氏とJames Halliday氏が開始したプロジェクト。Ogden氏もHalliday氏もともにゲーム開発者ではなく、楽しく、シンプルに、容易にゲームを作成できることを目指しているという。 voxel.jsではJavaScriptベースの3Dレンダリングエンジン「three.js」やWebブラウザ上で3Dグラフィックの表示を行うWebGLなどを利用する。メインモジュールとなる「voxel-engine」やボクセルデータなどを生成する「voxel」、3Dメッシュとしての表示を行う「voxel-mesh」といった
胸熱。Webブラウザ上のMikuMikuDance「MMD.js」|オープンソース・ソフトウェア、ITニュースを毎日紹介するエンジニア、デザイナー向けブログ
MMD.jsはPMD/VMDを読み込んでWebGLを使って描画するソフトウェアです。 先日mmd.jsを紹介しましたが、さらに完成度の高いMMDをWebGLを使ってレンダリングするのがMMD.jsです。 踊っている1シーン。かなりスムーズです。 見ている向きを変更できます。上からができる、ということは…。 後ろ向きだってもちろんサポート。 MMD.jsはPMDとVMDの読み込み、パースに対応し、WebGLを使って実際にダンスをさせられるようになっています。カメラやライトの移動にも対応しています。今のところ音楽の再生やボーンアニメーションには対応していませんが、十分楽しいソフトウェアになっています。 MMD.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る これまでMMDというとWindows用のソフトウェアであるVPVPを
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
three.js - JavaScript 3D library
Blender で作った3DCGをHTMLに出力するプラグイン「Blend4Web」 - 強火で進め
http://clockmaker.jp/blog/2014/01/away3d-typescript-fire/
