three.js超入門 第0回 3Dコンピュータグラフィックスの基礎 - Qiita
概要 この記事では「three.js超入門」と題して、three.jsの基礎からシェーダーの利用までをやっていきます。 ターゲットは主に「canvas表現を触ったことがないフロントエンドエンジニア」を想定しているので、jsの構文などの説明は省略しています。 three.jsのバージョンは執筆時点で最新のr98を使用します。 three.js超入門 第0回 3Dコンピュータグラフィックスの基礎 three.js超入門 第1回 レンダリングまでの流れ three.js超入門 第2回 アニメーションと時間ベースでの制御 three.js超入門 第3回 マウスやスクロールでのインタラクション three.js超入門 第4回 getBoundingClientRect()を使ったDOM要素との連携 three.js超入門 第5回 シェーダー(GLSL)の基礎 three.js超入門 第6回 Shad
Gio.js
Create a 3D global data visualization model with your own data in just four lines of javascript code
WebGL Distortion Hover Effects | Codrops
A little library that can be used for creating WebGL powered distortion hover effects using displacement images. Today we’d like to share a little hover effect library with you. The effect goes as follows: when hovering an image, we’ll use a displacement image to transition to another image. Using different displacement images, we can create a variety of looks. The main idea behind this little lib
three.jsと標高タイルで3Dマップを生成する - Calmery.me
今日はクリスマスイブですね．皆様いかがお過ごしでしょうか．かく言う私はお布団にくるまり http://qiita.com/advent-calendar/2016/no-girlfriend を眺めています．お察しください． ブラウザ上で現在位置を中心とした 3D マップを 国土地理院の標高タイル と three.js で作ることができたのでメモ．今月の 17，18 日に開催された 林業応援ハッカソン で作った． github.com 流れとしてはまず現在位置を取得し，その取得した現在位置からタイル座標を求める．ちなみに私は初めてタイル座標というものを知った．このタイル座標や後々利用するピクセル座標については TrailNote : 座標の変換（世界座標、ピクセル座標、タイル座標、緯度・経度） が参考になる．次に求めたタイル座標を元に 国土地理院の標高タイル から標高データを取得し thr
WHSJS 2019
Welcome to whs.js docs! whs.js is a framework for 3D web apps built with Three.js technology. # Install npm version $ npm install whs It implements a core with component system and plugin support for fast development of 3D scene with physics. Automizing your web app with whitestorm is fast and comfortable. This engine has physics support implemented by custom Physi.js library, which is much faster
three.js + Web Font + 頂点シェーダ芸 Vol.1 (準備編) | Blog | Takumi Hasegawa
先日、wgld.orgとWebGL総本山の管理人の@h_doxasさんにご依頼いただき、「初心者歓迎！ GLSL で始めるシェーダコーディング ワークショップ！」というイベントで、セミナー講師をやらせていただきました。WebGL総本山でもすでに記事になっております。 僕のテーマは「three.js + Web Font + 頂点シェーダ芸」ということで、Web Fontの文字を描画した矩形を頂点シェーダでグリグリ動かすというものだったのですが、持ち時間の45分間では説明しきれず、コードの詳細な内容までしっかり説明できなかったので、記事にまとめようと思います。 以下、セミナーで使用したスライドとサンプルコードです。 ・https://github.com/takumi0125/glslWorkshop20161203 (セミナー時より少し修正してます) ・https://tkmh.me/st
Pages - HUSH—Making Spaces Speak Volumes
Vornado Realty Group is the primary developer working to redevelop Manhattan’s Penn District through a series of complex, new building projects that merge transportation, workplace, retail and entertainment. Within the entire district redevelopment project, the Penn1 building was the first to exhibit massive revival and signal the new strategy, design, and amenities that would eventually become th
わずか数十行のコードで物理演算付きシーンを構築できる WebGL フレームワーク WhitestormJS - WebGL 総本山
three.js をさらにラップしたフレームワーク 今回ご紹介するのは、WebGL 使いなら誰もが知っていると言っても過言ではない three.js を、さらにもう一段ラップすることでより使いやすくするフレームワーク、WhitestormJS です。 Github や公式サイトには Examples が掲載されていますが、WebGL ヘルパーライブラリである three.js など、コア部分に外部のライブラリを組み込むことによって、驚くほど少ないコードの記述で 3D のシーンを構築できるように工夫されています。 物理演算などのゲーム開発に必要となる機能も追加することで、かなり利便性の高いフレームワークになっているようです。 使いやすさを重視した設計、ドキュメントも完備 この WhitestormJS ですが、実は結構昔からその存在は知っていました。 ちょっと前に見た時は、一見すると開発が止
安定しないフレームレートに効果的！ WebGLのカクつき対策まとめ（Three.js編） - ICS MEDIA
ウェブコンテンツで3Dを扱える技術としてWebGLがあります。WebGLを利用すればブラウザ上で華やかな表現を実現できます。しかし、コンテンツの内容によっては処理負荷が高くなり、カクつきが生じる場合があります。カクつきはコンテンツの見栄えを損なわせ、作り手の想定とは異なる体験を与えてしまう可能性があります。そのような場合の対策として、本記事ではWebGLのカクつき解消方法をいくつか紹介します。 解説用にカクつきの起こりやすい高負荷なデモを用意しました。本記事で紹介するカクつき解消方法はこのデモで実際に体験できるので、読み進めながら同時に触れておくとイメージがしやすいと思います。 デモを別ウインドウで再生する ソースコードを確認する ※このデモはThree.js(r141)とTypeScript 4.7とwebpack 5で作成しました。開発環境の構築は記事「最新版TypeScript+We
JSだけでVRできる！『WebVR』ことはじめ
今年はVR元年と呼ばれています。 実は過去にも何度かVR元年と呼ばれ、VRが来る、と言われていた年があります。 ですが、今年はいよいよそれが本格的になりそうな状況になってきました。 そこで今回は、「今からWebVRに備えよう！」ということで、WebVRとはなにか、それを利用して何ができるのか、利用シーンはどうか、といったことに焦点を当てたいと思います。 VR元年 本格的になりそうなのはなぜか。まずひとつ挙げられるのはOculus Rift（詳細は後述）に代表される、いくつかのヘッドマウントディスプレイ（以下、HMD）が比較的安価に家庭で利用できるようになったことです。 今年に発売される予定のものだけでも、Oculus Rift、HTC Vive、PlayStation VR、FOVE(開発キット版)など様々なHMDが市場に登場する予定になっています。 またこれらが注目される理由として、現在
[GLSL] WebGLで炎の揺らぎ - Qiita
このサイトの炎の揺らぎを解読してみようと思います。 実際に見てもらうと分かりますが、立体的でだいぶリアルな感じの炎が表現されています。 ちなみに解説用にThree.jsで実装しなおしたやつをjsdo.itに上げてあります。 そして結論から言うと、メインとなる処理のところはなんとなくの推測しかできませんでした( ;´Д`) おそらく、視点位置から炎の輪郭となる頂点郡を計算し、3DのCubeTexture的なことをやっているんだと予想。 （なのでメインの処理のメソッド名がsliceなんだと思う） [2015.06.17 追記] ここで紹介している実装、サンプルは「ボリュームレンダリング」と呼ばれるものです。 （今回の炎は「Volumetric Flame」） これは炎などのようにポリゴンで表現しづらい現象を実現するものです。 仕組みとしてはボリューム（今回の例ではキューブ）をスライスして、各断
![[GLSL] WebGLで炎の揺らぎ - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/56801aa6c2f0535aa223ca8563f0dd6db07781a0/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCR0xTTCU1RCUyMFdlYkdMJUUzJTgxJUE3JUU3JTgyJThFJUUzJTgxJUFFJUU2JThGJUJBJUUzJTgyJTg5JUUzJTgxJThFJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz03ZTkwY2Y1MGIwYzY1ZTQzNmJmNGYyMGNhNjg1YmQ2NA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBlZG9fbTE4JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lMmQ5MGMxNzhmNTEyNmZmYmVlZTEzOTliMzVmNzRhZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D2afa899e9e13b15222b65a34b7d4614c)
Hyper3D.js - High-end WebGL Renderer for three.js | Hyper3D
Roadmap — jsdo.itで試す Hyper3D.js is a high-end (unofficial) renderer for three.js. Hyper3D is still at a very early stage of development. You might observe an unexpected behavior including distorted image, browser crash, peformance breakdown, and shader compilation failure. APIs may change over time. Features Modern rendering engine Physically based rendering Roughness-metallic material workflow wi
Html5-canvas-animation by JoanClaret
3D lines animation with three.js ..and an animated background color View on GitHub Download .zip Download .tar.gz 3D lines animation with three.js ...and an animated background color Tags HTML5, javascript, canvas, three.js, animation, colors. What is? I took a prebuild three.js example and put a fancy animated background color, adjust some parameters like number of lines, perspective and colors.
three.jsで2Dゲームを作るときのアイデア - Qiita
はじめに 「スカッシュゲームを作る（１） - S.F. Page」でレトロな２Ｄゲームを作ろうとしていて、描画をcanvasベースで作ろうか、WebGLベース（three.js）ベースで作ろうかと考えた。今作ろうとしてるゲームは極力凝ったグラフィックを排して、昔の質素なものにしようとしているので、canvasでも十分作れると思うのだが、将来的なことも見越してね。 描画は極力高速化したい。その場合はcanvasではなくWebGLを使ったほうがいいような気がする。おそらく今はcanvasでもアクセラレートされるのかもしれないけども、3D的なエフェクトとか、ブレンド描画の豊富さとかを考えるとWebGL(three.js)ベースで作ろうかなと。 three.jsで2Dゲームを作る時のアイデア スクリーン座標は仮想的なものする。実画面サイズに座標を合わせるのではなくて、幅および高さは固定サイズとして
たった4行でできる！ ブラウザ向けVRをThree.jsで実装する方法 - ICS MEDIA
2018年にOculus Go（オキュラス・ゴー）が発売されました。Oculus Goはパソコンやスマートフォンを必要とせず、単体でVR（バーチャルリアリティ、仮想現実）が楽しめるスタンドアロン型VR HMD（ヘッドマウントディスプレイ）です。価格も当時は23,800円からと比較的安価なため、日本でも購入者が増えこれまでと比べ一気にVR環境が広がりました。 VR環境の普及に伴い、ウェブコンテンツにおいてもVR対応へのニーズが増えています。ウェブブラウザにはWebXR Device APIが策定されており、これを使用することでブラウザでもVR体験が可能です。 ※以前はWebXR APIではなく、WebVR APIという仕様がありました。WebVR APIの策定はv1.1で停止しています。VR以外にもAR（拡張現実）やMR（複合現実）といったXR（◯◯現実）を総合的に扱うWebXR Devic
How to Make a Smartphone Controlled 3D Web Game | CSS-Tricks
UGURUS offers elite coaching and mentorship for agency owners looking to grow. Start with the free Agency Accelerator today. The following is a guest post by Charlie Walter. Charlie does a bunch of work with Three.js (3D in the browser with WebGL) and gaming concepts. If that stuff interests you, read on! In this tutorial I’ll explain an approach on how to connect your smartphone to a 3D web game.
公式ブランドコスメ | デパコス化粧品通販サイト
今日もリモートワーク。Web会議もない今日は、すっぴん部屋着でいいかな…ってちょっと待ったーー！ ゴミ捨てやベラ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OUIGO - Let's play !
nunuStudio
Screen space projected grid with GLSL and WebGL - Jérémy BOUNY