JavaScriptのWebGL 2.0でGPGPU - Qiita
はじめに WebGLはブラウザでGPUを使って3D表示をするためのAPIです。 WebGL 2.0は1.0に比べてGPUによる汎用計算(GPGPU)の機能が強化されています。 WebGLは複雑な手順に従ってAPIを呼ぶ必要があり使いづらいので、簡単にGPGPUのプログラムを作れるライブラリを作ってみました。 以下ではこのライブラリの使い方を説明します。 ライブラリの詳しい説明は以下にあります。 http://lkzf.info/gpgpu.js/doc/ ソースはGitHubに上げています。 https://github.com/teatime77/gpgpu.js/blob/master/js/gpgpu.js ライブラリの本体はgpgpu.jsという1個のファイルです。 このファイルをGitHubからコピーしてきて、HTMLファイルのhead部分に以下の1行を入れてください。 WebG
SPAだけじゃない！ReactとThree.jsの組み合わせはゲーム開発を変える？
Reactといえば、SPA（シングルページアプリケーション）のViewに使われるライブラリー。でもThree.jsとWebGLを組み合わせると、3Dのゲーム開発にもメリットがあるようです。 「Charisma The Chameleon」というタイトルのゲームを開発しています。このゲームは、Three.js、ReactJSおよびWebGLを使って開発しています。本記事ではこれらの技術がreact-three-renderer（R3R）を使ってどのように動作するかを説明します。 ReactおよびWebGLの紹介については、SitePointの『A Beginner’s Guide to WebGL』や『Getting Started with React and JSX』をチェックしてください。本記事および添付のコードはES6 Syntaxを使用しています。 はじめに しばらく前にPete
[連載] WebVR入門 vol.1 - Qiita
この記事はWebVR Advent Calendar14日目の記事です。 さて、今週一週間記事を書き続けようと埋めまくったんですが、まったくノープランでしたｗ なのでうまく着地できるか分かりませんが、WebVR入門と銘打って連載をしたいと思います。 この連載の目的は「WebVRってむずかしいんでしょ？ どうせ」って思っている人に向けて、「えっ、そんな簡単なら私もやってみようかしら？」って思わせるのが目的の入門記事連載です。 Firefoxの安定版ですでにWebVRの実装が取り込まれたのは前回の記事で書いた通りです。 つまりそれだけ期待している、ということでしょう。（だってまだOculus Rift、発売日さえ細かく決まってないのに） 個人的にもWebVRからVRが広まってくれると思っています。 ということで、今回は「WebVR Hello World」として、Three.jsを用いてWeb
![[連載] WebVR入門 vol.1 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ba6de30eecb0d684366736a0af787c8e328fc0f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCJUU5JTgwJUEzJUU4JUJDJTg5JTVEJTIwV2ViVlIlRTUlODUlQTUlRTklOTYlODAlMjB2b2wuMSZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9ZWMxZjMxODRiN2U4MTE0ZmVlOGIzZDdmMjQ3NmQ3Mzc%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01YzRmMTg2NjU4YjExNWZjZWYwMzYwOTQ2OTg3Mjk1Yw%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3D5ccc3ccfec86d4f6fac45f2d57475b26)
超簡単に3DCGできるJavaScriptライブラリ作った - aike’s blog
ブラウザでWebGLが使えるようになって3DCGプログラミングはずいぶん身近なものになりました。と書いてるそばから違和感を感じるくらい生のWebGLをJavaScriptで書くのは敷居が高かったりします。できなくはないけど前提となる知識がかなり必要な感じ。 three.jsが登場したときは、これで普通に3DCGができるということで一気にひろまりました。とはいえ、それでもまだやることは多く、画面に四角い箱を表示する場合以下のようなプログラムを書くことになります。 ・シーンを作成 ・ライトを作成、位置と向きを設定、シーンに追加 ・カメラを作成、位置と向きを設定、シーンに追加 ・マテリアルを作成、色を指定 ・BoxGeometryを作成、サイズを指定 ・メッシュを作成、位置と向きを設定、シーンに追加 ・レンダラーを作成 ・レンダリングループ処理 これらのひとつでも間違えたりパラメーターが適切でな
Unity WebGL x WebSocket で複数クライアント間の大量のオブジェクトを簡単に同期できる仕組みを作ってみた - 凹みTips
はじめに まだ実験中なのですが、Unity WebGL x WebSocket で大量のクライアント間で大量のオブジェクトを同期できる仕組みを作っています。UNET や Photon によって近いうちに対応されると思うのですが、現状では使えないのと、制限なく扱えたりチューニング次第で速く出来る可能性があるので作ってみようと思いました。 昨日、技術デモを公開しまして、最大で同時に 30 〜 40 人ほどの方に同時に遊んでもらいました。皆様ありがとうございました！200 オブジェクトくらいならフレーム落ちすること無くサクサク動いたと思うので、現状の仕組みや知見などを備忘録も兼ねて共有できればと思います。 開発環境 Mac OS X 10.10.1 Unity 5.0.0b18 デモ いつ止めるかは未定ですが、以下から遊ぶことが出来ます。 hecom.in - このウェブサイトは販売用です！ -
Box2DJS（二次元物理エンジン）とthree.js（3D表現）のシンプルな組み合わせ | KnockKnock
今回は二次元物理エンジンBox2DJSとWebGLライブラリ、three.jsを組み合わせて、カーレースゲームのサンプルを作成しました。 Box2DJS Box2DJSはC++で書かれた物理演算エンジンをJavaScriptに移植したものです。質量・速度・摩擦といった、古典力学的な法則をシミュレーションするゲーム用の2D物理演算エンジンとして、現在ではActionScript、Java、C#、Pythonにも移植されています。 前回の記事ではenchant.jsとthree.jsを併用しましたが、今回は3D表現としてthree.jsを使う事は変わりませんが、メインのロジック部分にBox2DJSを使用しました。 ソースコード ※操作方法 : 前進「↑」キー、後退「↓」キー、旋回「←→」キー、カメラアングル切り替え「スペース」キー ※WebGLを使用したデモなのでChromeかFireFoxで
GLSL Sandbox Gallery
<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAgAElEQVR4Xry9B5idV3Wvv496l6b3mTMzmlGZkWY00siS1UbVtiRbrpJs2bIs29iWjbFDMUbGFsWATTMlgKimmZjQEgLEJAFDKAmEUBISckkxCfcmhJQbSG/n/757n2/OOVOkGfJ/7n6erTOjOd/+vm+XtX7rt9ZeOxdCKFBHSy4XQueyENqXhtC6JISWJdWhbUldyC9rCD3VzaG3oTWEjs4QBrtCWPNPXHd18JqsnBgM4fjA3rCz74IQ1vaFsLExhKq/4c+PUb9MvYX6zuI1z+fnNdTjobsqhD/5+1fz82rq26m/VP5Y5/158dwQzox0
初心者でも絶対わかる、WebGLプログラミング＜基礎知識編＞
HTML5に関連する技術のひとつに、WebGLがあります。WebGLは、ブラウザー上で3DCGプログラミングを実現できる技術です。今回のレポートでは、WebGLプログラミングの基礎知識についてご紹介します。 WebGLって？ WebGLでどんなことができるのか──百聞は一見にしかず。まずは例を見てみましょう。demo内のスライダー部分をドラッグすることでカメラの位置などを任意に変更できますので、リアルタイムでレンダリングされていることがわかるでしょう。 (invalid jsdo.it code) このように、ブラウザー上でプラグインに頼ることなく、なめらかな表面、自然な影、高FPSでのリアルタイムレンダリング（アニメーション）など、まるで最近の家庭用ゲーム機にも匹敵する高度な3DCG表現ができるわけです。 WebGLは2013年10月現在、Chrome、Firefox、Operaで標準対
Visual Studio Code - NEW FEATURES: 13 Big Debugging Updates (Rich Object Hover, Conditional Breakpoints, Node.js, Mono, & More!) - User Ed - The blog of Ed Price, Customer Program Manager - Site Home - MSDN Blogs
In Visual Studio 2022 17.10 Preview 2, we’ve introduced some UX updates and usability improvements to the Connection Manager. With these updates we provide a more seamless experience when connecting to remote systems and/or debugging failed connections. Please install the latest Preview to try it out. Read on to learn what the Connection ...
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - pomle/megamanjs: An attempt to remake Megaman 2 in JavaScript with the end goal being a reusable platform engine.
Making WebGL Dance
MMD on WebGL