WebGL

WebGL でマウスクリックしたら点が描画されるやつ作った

『WebGL+HTML5 3DCGプログラミング入門: 第3章 はじめの一歩』読了しました。

マージしました!

今回第 3 章に沿って学習してきましたが、buffer をバインドしなくても gl.vertexAttrib3f, gl.uniform4f で直接座標をシェーダ側に渡せるの初めて知りました。

よく CodePen とかで見かける WebGL のコードでは、gl.bindBuffe

もっとみる

WebGL におけるシェーダの変数についてのメモ

WebGL は OpenGL ES 2.0 から派生した仕様で、シェーダの記述には GLSL ES が使われています。シェーダをざっくり説明すると、頂点の位置と色を変化させることです(自分はそう理解しています)。

シェーダには頂点シェーダとフラグメントシェーダの 2 種類があります。OpenGL の場合はもっと色んな種類のシェーダがあるっぽいです。でも WebGL の場合はこの 2 つ。

頂点

もっとみる

WebGLノート

大まかな流れ

・Javascriptでシェーダのソースコードを読み込み、シェーダオブジェクトを生成する。そのシェーダオブジェクトをプログラムオブジェクトとリンクさせる。
・プログラムオブジェクトがCPUとGPUの橋渡しな存在になってくれる
・ようやくあとはGLSLを書いて描画していく

これらを全て生WebGLでやろうとするとかなりコードを書く必要があり面倒なので、多くの人はthree.jsやp

もっとみる

glTFの頂点情報を取得したい

glTFとは何か
emadurandalさんの記事がとてもわかりやすいです。
今話題の3Dファイル形式「glTF」でWebGLの表現力を高めよう!

glTFのバッファデータをエンコード・デコードする方法は?
How to encode/decode buffer data in glTF?

base64とは何か
base64ってなんぞ??理解のために実装してみた

glTFの"bufferVi

もっとみる

サガフロンティアのリージョン移動を再現してみたいのでWebGLに再入門してみる

2017 年くらいに「ジェネラティブアートかっこいいなあ…」と思って WebGL の勉強をしてみたんですが、シェーダの概念が全然頭に入ってこず挫折してしまっていました。

が、最近まとまった時間もできてきたので、このチャンスにもう一度入門してみよう!と突然決心して再入門しました。

webgl-jp.slack.com に #learning チャンネルを作ってもらう

まず最初に行ったのは、We

もっとみる

8月20日

前日

2009年

2010年

[MacBook Air][trouble]SDHC->CF->ZIFな偽SSD起動せず

2011年

[webgl]Three.jsでポリゴンを描画するには

2012年

2013年

2014年

2015年

2016年

2017年

2018年

ElectronでmacOSのDockやWindowsのタスクバーに独自のアイコンを表示するには

もっとみる

WebGLフレームワークを作る Part3 使い続ける

断捨離GL(dan-shari-gl)について

断捨離GL(dan-shari-gl)は2018年10月から開発を開始し、以前作っていたTubuGLの使える部分を拝借し、改良を加え2018年11月にGithubに初めてプッシュしました。

TubuGLの開発とプロジェクトでの利用によってWebGL APIを実際のプロジェクトでどう利用するか把握できました。

なんでもかんでもクラス化することをや

もっとみる

MagicaVoxelデータをWebGLのポイント・リスト(ポイント・スプライト)で疑似表示する

mwasmのプリプロセッサをある程度完成させたところで、それ使ってゲームを作ろうとしている。wasmでゲームを作ろうと思ったら、リソースをメモリにマップしてアクセスできるようにしてやるか、JS側でリソースアクセスのための関数を作ってwasmにエクスポートする必要がある。JS側の関数を呼び出すのは安直でよいが、呼び出しのオーバーヘッドが気になるのでメモリにマップしてそこにwasmに書き込ませ、JS側

もっとみる

フリーランもオービット追従もできるレイマーチングカメラの作り方

レイマーチング用のカメラを実装したので、作り方をまとめます。

既に Web 上に数多に存在するレイマーチング作品には、いずれにもカメラの実装が含まれているのですが、今回どうしても譲れない下記のこだわりポイントを全て満たすカメラを作りたかったので、数学知識 0 の状態から逐一調べつつ実装してみました。

また、下記は実際に今回実装したカメラの動作デモになります。

こだわった! ポイント

1. 

もっとみる

【超初級】 Three.js事始め

はじめに

はじめまして。
ブラックな企業ことトゥモローゲート株式会社でエンジニアをしておりますタカウマと申します。今回、note投稿にあたって色々と書きたいことはあったのですが、まずはエンジニアらしく実装系をと思い、以前から興味のあった3D表現に手をつけてみようと Three.js を触ってみました。

Three.jsとは

3D表現のための技術「WebGL」をとことん使いやすくしてくれたライ

もっとみる