Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
EmscriptenのOpenGLと純粋なWebGLと共存させる黒魔術
Search
ueshita
July 05, 2017
Programming
1
4.8k
EmscriptenのOpenGLと純粋なWebGLと共存させる黒魔術
Emscripten Night!! #4 LTのスライド資料です
ueshita
July 05, 2017
Tweet
Share
More Decks by ueshita
See All by ueshita
こわくない!! たのしい!! GDExtension
ueshita
0
2k
Godot Engine完全に理解したかった
ueshita
1
630
UnmanagedThreadノススメ
ueshita
2
8.3k
Unityで3Dツールを作って開発を加速する
ueshita
3
3.6k
asm.js 減量やってみた
ueshita
0
980
Other Decks in Programming
See All in Programming
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
290
Porting a visionOS App to Android XR
akkeylab
0
460
A full stack side project webapp all in Kotlin (KotlinConf 2025)
dankim
0
120
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
170
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
chiilog
1
270
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
チームで開発し事業を加速するための"良い"設計の考え方 @ サポーターズCoLab 2025-07-08
agatan
1
410
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
nealle
0
130
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
470
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
猫と暮らす Google Nest Cam生活🐈 / WebRTC with Google Nest Cam
yutailang0119
0
120
Featured
See All Featured
Git: the NoSQL Database
bkeepers
PRO
430
65k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Designing Experiences People Love
moore
142
24k
Code Reviewing Like a Champion
maltzj
524
40k
The Language of Interfaces
destraynor
158
25k
Six Lessons from altMBA
skipperchong
28
3.9k
The Cult of Friendly URLs
andyhume
79
6.5k
How STYLIGHT went responsive
nonsquared
100
5.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Transcript
EmscriptenのOpenGLと 純粋なWebGLと共存させる黒魔術 Emscripten Night !! #4
自己紹介 うえした (@ueshita) 同人ゲームを作ります Emscripten好き Emscripten Night!! で 何回かLTやってます Effekseerのコントリビュータ
エフェクトツール Effekseer エフェクト作成編集ツール - パーティクルやリボン、リングの アニメーションを簡単に作れるツール。 - オープンソースで無料! エフェクト実行ライブラリ -
リアルタイムにアニメーションを計算してレンダリング - C++で実装されている - レンダラー: DirectX9,11, OpenGL2~, OpenGL ES 2.0~ - サウンド: XAudio2, OpenAL
OpenGLなライブラリをWebGLに Effekseerの実行ライブラリ(C++)をWebで動かしたい! そうだEmscriptenを使おう! OpenGL ES 2.0, OpenALがそのまま使える JavaScriptのWebGLフレームワークと共存したい Three.jsやGrimoire.js等 Webのいいところは活用したい
画像のロードはDOMのimgを使いたい libpngやlibjpegはリンクしたくない
OpenGLのWebGLと共存 普通のOpenGLアプリケーションの場合 OpenGL Contextを自分で作って描画する。 EGL(GLES)やWGL(win), AGL(mac), glut, glfw 等 WebGLの場合
CanvasからWebGLRenderingContextを取得して描画する。 WebGLとOpenGL(Emscripten)が共存するには WebGLRenderingContextを使用して、 JS側からOpenGLコンテキストを作成して描画する。
そしてEmscriptenの裏側へ… ( ˘⊖˘) 。o( OpenGLContextをJSから作成するにはどうしたら・・・ ) Emscriptenのソースコードを見よう! 三┏( ^o^)┛ -
/emscripten/1.37.9/src/library_egl.js - /emscripten/1.37.9/src/library_gl.js ( ◠‿◠ )☛ EGLのJS実装 - eglCreateContext: function(display, config, hmm, contextAttribs) - eglMakeCurrent: function(display, draw, read, context) Emscriptenはソースコードに全て書いてある! ▂▅▇█▓▒░(’ω’)░▒▓█▇▅▂
EmscriptenのOpenGL ネイティブのOpenGLの仕組み グローバル空間にOpenGLのContextがおり、 ステート変更、ドロー等のコマンドをGPUに送る EmscriptenのOpenGLもだいたい同じ グローバル空間にOpenGLのContextがおり、 JSのWebGLRenderingContextとやりとりをする。 Application OpenGL Context
GPU Driver WebGLContext GPU Driver glDrawArrays: function(mode, first, count) { GLctx.drawArrays(mode, first, count); }, Emscripten OpenGLの実装
WebGLRenderingContextを外部から渡す GL.registerContext(context, attributes)を呼べばOKらしい // CanvasのDOMを取得 var canvas = document.getElementById(“canvas”); //
CanvasからWebGLRenderingContextを取得 var context = canvas.getContext(“webgl”); // EmscriptenのOpenGLにWebGLRenderingContextを渡す GL.registerContext(context, { majorVersion: “1”, minorVersion: “0”, // WebGLのバージョン enableExtensionsByDefault: true // GL拡張のAPIをONに });
WebGLとOpenGLの違い WebGLのオブジェクトは’Object’、OpenGLのオブジェクトは’GLuint’(数値) JavaScriptのObjectはEmscriptenメモリ空間に存在できない! WebGL OpenGL Texture WebGLTexture GLuint Buffer WebGLBuffer
GLuint Program WebGLProgram GLuint
テクスチャ読み込みの違い できればWebブラウザの画像ロード機能は使いたい・・・ var img = new Image(); // 画像ロード完了 img.onload
= function() { // テクスチャを作成して画像を転送 var texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img); }; // ロード開始 img.src = “texture.png”; // 画像をロードする GLsizei width, height; void* imageData = LoadImage(“texture.png”, &width, &height); // 自作ロード関数 // テクスチャを作成して画像を転送 GLuint texture; glGenTextures(1, &texture); glBindTexture(GL_TEXTURE_2D, texture); glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, width, height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData); WebGL OpenGL
Emscriptenではどう扱っているのか library_gl.jsを見てみる - GLctx: WebGLRenderingContext - target: GL_TEXTURE_2D - texture:
GLuint - GL.textures: WebGLTextureのArray(たぶん) glBindTexture: function(target, texture) { GLctx.bindTexture(target, texture ? GL.textures[texture] : null); }, // ↑↑↑
DOMのimgを使ったテクスチャロード関数 GLuint LoadTexture(const char* path) { // テクスチャをロードするCの関数 GLuint texture;
glGenTextures(1, &texture); // (1) C側でテクスチャは作る EM_ASM_INT({ var img = new Image(); img.onload = function() { // (3) 画像ロード完了イベント GLctx.bindTexture(GLctx.TEXTURE_2D, GL.textures[$1]); GLctx.texImage2D(GLctx.TEXTURE_2D, 0, GLctx.RGBA, GLctx.RGBA, GLctx.UNSIGNED_BYTE, img); // (4) img指定ロード GLctx.bindTexture(GLctx.TEXTURE_2D, null); }; img.src = Pointer_stringify($0); // C文字列をJavaScript文字列に変換 }, path, texture); // (2) インラインJavaScriptに作成したテクスチャを渡す return texture; }
まとめ GL.registerContext(context, attributes) でOpenGL Contextは作れる (EGLいじるより簡単かも。各種イベントはハンドリングする必要あり) テクスチャはGL.texturesのArrayに存在している。GLuintはindex。 バッファはGL.buffers、シェーダプログラムはGL.programsにいた Emscriptenのソースコードはドキュメント 黒魔術はたのしい
参考Github: https://github.com/effekseer/EffekseerForWebGL