17日目の id:edvakf さんの「WebGLでライフゲーム」に続いて18日目担当のnakamura001です。 今回は最近目にした csg.js というちょっと変わったWebGLのライブラリを紹介します。 csg.js http://evanw.github.com/csg.js/ このライブラリは2つの3Dモデルを合成したり、差分を行った3Dモデルを作成する事が可能です。 簡単なプログラムを書きつつ解説しますのでみなさんも良ければ実際に入力して試しつつ見て下さい。 前準備 ライブラリにはサンプルも有るのですがちょっとだけボリュームが有るので実際に気にすべき箇所がちょっと分かりづらくなっています。その為、本当に必要な要素だけを含んだテンプレートとなるファイルを準備しました。実際に手を動かしながら読みたい方はこちらからDLしてから続きを読んで下さい。 動作確認 テンプレートのファイルを
Badass JavaScriptA showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett. Evan Wallace, the same guy who brought us that amazing WebGL water simulation is back at it again, this time with a library called csg.js for doing Constructive Solid Geometry modeling in JavaScript. Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean
※このエントリは、古谷氏が最優秀賞を受賞した第6回研究課題レポートからの抜粋です。 研究の背景 これまで、Web上で3Dコンテンツを扱う場合、専用のplug-inを導入する必要があったが、plug-in無しで3Dコンテンツを扱うことが現実的になってきている。 これを実現するのが、クロノス・グループにより管理され、規格策定中であるWebGLである。 WebGLワーキンググループには、Google、Mozilla、Opera、Appleが参加していることもあり、今後Webの標準となると想定されるため、技術的な調査を行うことにする。 本研究の目的 本研究では、WebGLの技術的な理解を深め、WebGLを利用したWebアプリケーションを開発するために必要なツール、ライブラリ、および開発フローについて調査することを目的とする。 今回は、以下を利用しデモアプリケーションを開発する。 ・モデリングソフト
はじめに three.jsはレンダラを変えるだけで、Canvas(2D)にもWebGLにも書き出せるっていう、色々と技術遷移中の今の時代にピッタリなJavascript 3D Engineです。 node.jsも楽しいけど、表現系でも遊んでみたい!って時に手軽にさわれる逸品です。(3Dよくわかりませんが・・・) とりあえずは準備 まず、GitHubからソース落としてきます。gitで落としてもいいし、zipファイル(右の方にダウンロードボタンがあるよ)でも落とせます。 展開すると色々入ってますが、基本必要なのは "build/Three.js" です。サンプルでは他のも利用しますが、随時配置してください。 あー、それとthree.jsのデモを見た人は、3Dモデリングソフトで作ったモデルを読み込んでグリグリ・・・みたいなのを期待してるかもしれませんが、今回そーいうの無いですよ、自分、3Dソフト
Copyright (c) 2011 Sencha Labs (http://senchalabs.org/). Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
PhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development. Idiomatic JavaScript PhiloGL is built on JavaScript good practices and idioms, providing an expressive and powerful API Focused on Performance PhiloGL tries to be as close to the gl calls as possible, providing a clear yet tight abstraction to WebGL All the Modules you need PhiloGL modules cover from Program
あけましておめでとうございます。私はWebGL勉強会の運営メンバーの増田知記と申します。 この度、技術評論社様より執筆の機会をいただきましたので、WebGL勉強会の活動内容とWebGLの動向についてお話をさせていただきます。 WebGL勉強会とは WebGL勉強会設立のきっかけは仲間内で「何か勉強会を開いてみたいね」と話が持ち上がったことでした。この時に勉強会のテーマとしてAzureも挙がっており、もしかしたらAzure勉強会になっていたかもしれません。 1回目の勉強会を昨年の9月にを開催したのを皮切りに、今までに4回の勉強会を開催してきました。人気の高い勉強会と比べるとまだ少ないですが、会を重ねる毎に参加者が増えておりWebGLへの注目が高まっていることを感じています。参加条件は有りませんし、とてもラフな集まりですのでみなさまお気軽に勉強会に参加していただければと思います。さらに発表まで
3D, A-frame, ARCore, Actions on Google, Android Live Wallpaper API, Android NDK, Android SDK, Android Things, Apps Script, Arduino, Augmented Reality, Blender, CLIP, Canvas, Canvas Quiz, Captive Portal, Cardboard SDK, Cast API, Cinder, Cloud Text-to-Speech API, Convnet.js, D3.js, Demoscene, Dialogflow, Firebase, Framer Motion, GAN, GLSL, GPT-2, Gamepad API, Google Assistant, Google Assistant SDK,
追記:例題の頂点シェーダーで何をしているか説明を追加しました 追記:動作環境の所修正しました、IE9では動作しません。 皆さんはじめまして、荒川智則です。この記事はJavaScript Advent Calendarの21日目です。 この記事では、Google I/OやFirefox Developers Conferenceで華麗なデモがバリバリ出てくるにもかかわらず、実際に使っている人が異常なまでに少ないWebGLについて書きます。対象読者はWebGLに興味があるor手を出してみたけどクソ難しそうだし既に諦めそう、という人です。 WebGLの概要 WebGLはOpenGL ES 2.0のグラフィックAPIをCanvas要素上で使える様にした物です。OpenGL ESはOpenGLの組み込み機器向けのサブセットで、iPhoneやandroid端末にも搭載されています。OpenGL ESな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く