Rain & Water Effect Experiments | Codrops
Today we’d like to share some WebGL experiments with you. The idea is to create a very realistic looking rain effect and put it in different scenarios. In this article, we’ll give an overview of the general tricks and techniques used to make this effect. Please note that the effect is highly experimental and might not work as expected in all browsers. Best viewed in Chrome. Getting Started If we w
SVG＆Canvas＆WebGLが選べる2Dのライブラリ「Two.js」 | スターフィールド株式会社
HTML5には、SVG、Canvas、WebGLといった、ビジュアル関係で追加された要素があります。 これらはとても便利で、 インパクトのあるサイト作りには強い味方になります。 ただ、ブラウザや端末により、これらの要素が使えない場合もあります。 クロスブラウザの問題です。 また、SVG、Canvas、WebGLのそれぞれで、強みを発揮する部分が違っており、 強みを発揮するために、それぞれを使いこなそうとすると、 使い方がバラバラなので、多くのことを事前に学習する必要が出てきます。 クロスブラウザ対策のために、ブラウザごとにそれらを切り替えるとなると、 なおさら大変です。 この問題を解決してくれるのが「Two.js」です。 Two.js Two.js: Examples (公式のDEMO) 「Two.js」はベクター系のグラフィックを扱うことのできる、 JavaScriptのライブラ
HTML5ゲームエンジン「Phaser」が初心者とモバイルにやさしくていい感じです - syonx
Phaser - Desktop and Mobile HTML5 game framework モバイル/デスクトップ向けのHTML5製の2Dゲームフレームワーク。 Pixi.jsベースでCanvasやWebGLのレンダリングもサポート。 Tags: flash-like 2d sounds collisions physics typescript webgl free cdnjs: //cdnjs.cloudflare.com/ajax/libs/phaser/2.0.5/phaser.min.js Examples - PixiJS ベースとなっている Pixi.js のサンプル。レンダリング結果の雰囲気がつかめる。 HTML5 Game Engines - Find Which is Right For You HTML5ベースのゲームエンジン一覧。比較がしやすい。 Phaser
たった3KBのコードで3DCGモデルが歌って踊ってアングルも操作できる！ jQueryベースのライブラリでMMDデータを活用したWebGLコンテンツを作ろう
はじめに 数あるHTML5の機能の中でも、特にビジュアルでインパクトのあるWebGL。GPUを駆使した高速3DCGレンダリングが可能なことで話題になったものの、今一つ普及しない背景には「実装があまりにも難しい」ことがあるのではないでしょうか。 three.jsの登場により、実装のハードルはだいぶ下がりました。しかし、JavaScriptに精通したプログラマでなければ使いこなすのは容易ではなく、ビジュアル要素の強いWebGLにあってデザイナーさんの参入は難しいのが現状です。 今回紹介する「jThree（ジェイスリー）」は、そんなWebGLをjQueryの記法で扱えるようにするための国産JavaScriptライブラリです。前述のthree.jsをラップしてjQueryで操作できるよう設計されており、jQueryを使ったことのある方なら、手軽にWebGLコンテンツを作ることができます。 本記事で
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞
初心者でも絶対わかる、WebGLプログラミング＜three.js最初の一歩＞ 小山田 晃浩（株式会社 ピクセルグリッド） WebGLはとても高度な技術である一方、APIは低レベルであるためそのまま使うにはどうしても冗長な準備を行う必要があります。一方で、JavaScriptライブラリーを通して高レベルなAPIとしてWebGLを利用する方法があります。こうしたJavaScriptライブラリーとしてはthree.js、Away3D.js、Babylon.jsなどが有名です。その中でも特に人気があるthree.jsを通して、WebGLを利用する方法を解説します。(three.jsのリビジョンは執筆現在の最新であるr65を利用します) three.jsを手に入れる three.jsはhttp://threejs.org/から手に入れることができます。downloadから、zipファイルを手に入れま
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
Christmas Experiments
The project started in 2012, with the goal to deliver great experiments and highlight top web creative as well as newcomers. Year after year, it grows up, thanks to the participants, and inspire his visitors all around the world every months of december. It’s an independent & non-profit project, not related to any company, made by the community and given to the community, Merry Xmas!
SculptGL - A WebGL sculpting app
SculptGL is a small sculpting application powered by JavaScript and webGL.
Two.js
TIP Prior to v0.7.0-alpha.1 Two.js requires Underscore.js and Backbone.js Events. If you're already loading these files elsewhere then you can build the project yourself and get the file size even smaller. For more information on custom builds check out the source on github. # Overview Overview # Focus on Vector Shapes Two.js is deeply inspired by flat motion graphics (opens new window). As a resu
ここまで来てる! ブラウザだけでリアルタイム3D、「ACTISKU」のWebGLデモ 【増田 @maskin】 | TechWave（テックウェーブ）
HTML5の流れとあわせてウォッチしておきたい「WebGL」ーウェブブラウザに実装されるべく仕様策定が進むグラフィック描画API(アプリケーション・プログラミング・インターフェイス)だ。 先日話題になった「CSS3Dの雲」など比較的ライトなウェブグラフィック描画実験は多数出てきているが、リアルタイム3Dソリューションを手がける仏 ACTISKUによるWebGLのデモはかなり骨太だ。 これはUnigineというマルチプラットフォームのグラフィックエンジンをWebGLに移植したものを使用したデモで、プラグイン無しで、目を見はるような3Dレンダリングを実現している。 標準的なスペックのPCなら快適に動作 FirefoxやGoogle Chromeなど最新ブラウザなら動作するので(Safariではエラーが出た)、実際に立ち上げて見て欲しい (http://crypt-webgl.unigine.c
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
