強火で進め

このブログではプログラム関連の記事を中心に書いてます。

GPUを使ったライトマップの作成も可能なライブラリ「lightgl.js」

WebGL


ライトマップのデモはこちらで試せます。

キューブを表示するだけならHTMLも含めて、これだけの記述でプログラム可能みたいです。

<!DOCTYPE html>
<html><body>
  <script src="lightgl.js"></script>
  <script>

var angle = 0;
var gl = GL.create();
var mesh = GL.Mesh.cube();
var shader = new GL.Shader('\
  void main() {\
    gl_Position = gl_ModelViewProjectionMatrix * gl_Vertex;\
  }\
', '\
  void main() {\
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\
  }\
');

gl.onupdate = function(seconds) {
  angle += 45 * seconds;
};

gl.ondraw = function() {
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  gl.loadIdentity();
  gl.translate(0, 0, -5);
  gl.rotate(30, 1, 0, 0);
  gl.rotate(angle, 0, 1, 0);

  shader.draw(mesh);
};

gl.fullscreen();
gl.animate();

  </script>
</body></html>

evanw/lightgl.js - GitHub
https://github.com/evanw/lightgl.js/