evanw / lightgl.js Goto Github PK

@evanw Thanks for the nice library. I'm working on OpenJSCAD.org and lightgl is center to the project right now.

However, I'd like to add an option to scale the current scene to the screen. In other words, OpenJSCAD.org uses one (1) to mean one(1) millimeter. There are ways to determine the number of pixels per millimeter on the screen. And I'd like to offer an option to "scale 100%", which would scale the scene to the screen.

Any help is much appreciated.

This could be a bug with chrome... I'm not sure because it's really weird.
I think chrome 24.0.1312.57 is garbage collecting your canvas reference or something. In your first person camera example, try putting a setTimeout wrapper with 1 second of delay around your gl settings block like this:

setTimeout(function(){
  gl.fullscreen();
  gl.animate();
  gl.enable(gl.CULL_FACE);
  gl.enable(gl.POLYGON_OFFSET_FILL);
  gl.polygonOffset(1, 1);
  gl.clearColor(0.8, 0.8, 0.8, 1);
  gl.enable(gl.DEPTH_TEST);
}, 1000);

The mouse look no longer works. I'm not trying to use a setTimeout but I think my code is slow. I did some investigating and noticed that when I leaked the canvas element var to the window or to the GL object at around here:
https://github.com/evanw/lightgl.js/blob/master/src/main.js#L213
everything worked just fine again. That's why I think it's some sort of garbage collecting issue.

I love the library by the way. I just thought I'd let you know of this strange situation.

Copied from console:
a=new Vector(1,-1)
Vector {x: 1, y: -1, z: 0, negative: function, add: function…}
a.toAngles().phi
-0.7853981633974482
b=new Vector(-1,-1)
Vector {x: -1, y: -1, z: 0, negative: function, add: function…}
b.toAngles().phi
-0.7853981633974482

Equal case is for a=new Vector(-1,1) and a=new Vector(1,1)

If seems there is a problem with the value of X and Y in the event received in mousedown and mouseup when using google chrome. The coordinates are in document space, not in canvas space.
I guess the error is in the augment function but I can't see it.

Edit: Ok, the problem seems to come from the way Chrome handles the events, it seems like it overwrites the content of X and Y automatically after modifiying it from augment (strange because X and Y are not standard values) . I stored the X and Y in another var and it works fine.

When trying out the csg.js demo page in Firefox, it is impossible to rotate the view in the viewer.js canvas elements. The error console shows an exception, occuring on every mouse event (even move events) over the canvas as it seems:

NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object @ http://evanw.github.com/csg.js/lightgl.js:14

In the line:

var t = normal.dot(a.subtract(origin)).divide(normal.dot(ray));

dot product returns a number, not a Vector, so it should be:

var t = normal.dot(a.subtract(origin)) / normal.dot(ray);

The current version crashes instantly in chrome:

Uncaught compile error: 0:7(46): error: identifier webgl_g0__gl_ModelViewProjection' uses reserved__' string

Older versions where working well.

I'm not sure if this is a bug from chrome or lightgl, but some textures (RGB POT) look black. It happens when using mipmaps for minFilter, the bug doesnt happens in Firefox. Im trying to isolate the bug.

The example of multitexture on the lightgl examples has this problem:
http://evanw.github.com/lightgl.js/tests/multitexture.html

https://www.npmjs.com/package/uint8array-json-parser

Hi, sorry to bother you about this old code, it works fine (and it is the only solution I found to load a large json file on 32bit browsers when it isn't allowed to cut the json in smaller pieces) but it may be a bit too slow (mine is >300MB, once compressed it is 25MB).

Do you think we should go directly ask V8 for a native implementation? (it should be just a cast of the pointer used in JSON.parse)
Or maybe they prefer to parse a string because it is immutable? If so is there any solution?

NPM and browserify are pretty popular these days. Any way this library could be converted to use a Browserify-based workflow rather than custom python scripts?

The links the the README that go to evanw.github.com are incorrect and should go to evanw.github.io.

I would like TypeScript typings for this because I'm not good at remembering function names. I might start working on this because I know TypeScript.

Why do you use Math.asin(Math.random() * 2 - 1)) instead of straightforward Math.random() * Math.PI - Math.PI / 2 in Vector.randomDirection?

The new organization for JSCAD is complete. We have incorporated the CSG library which was modified by Joostn, but origin from yourself.

It would be really cool if LightGL was also part of the stack. I think maintenance would be easier, as well as innovations.

And of course, any contributions or guidance would be awesome.

I have some models I converted over to .js files, but they use multiple texture files for different parts of the model. How would I assign these different textures to the same model in different places?

Note: my model comes with a blender material file

As I understand it, in the following example (it's the example on the index page with one line / call added.), the popMatrix call should remove the "angle" rotation, leading to a still cube. However, in Firefox I get an error "TypeError: invalid arguments" and nothing gets drawn, in Chrome nothing gets drawn and no error.

<!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);
  gl.popMatrix(); // throws TypeError: invalid arguments

  shader.draw(mesh);
};

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

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

I think I'm confused because it seems your matrices are stored row-major.
Thanks.

When a viewer.js camera is controlled by lightgl.js mouse events, the use of the right button opens the browsers popup menu, but starts the movement either. The camera is then controlled by any mouse move forever, despite there is no button pressed anymore. That cannot be stopped by pressing buttons again either.

This bug can be seen at the csg.js demo site for example.

I was having problems when parsing huge meshes and discovered that the Indices are stored in a Int16Array instead of a Uint16Array. I can't understand why, AFAIK using Uint16Array we can store up to 65000 vertices, but with int16 only half of that.

Am I missing something here?

My primary goal is to create an isometric scene using lightgl.js with lighting and shadows. I've been trying to use the shadowmap.html example as a starting point. However, I'm not quite sure how to get CSG.setColor to be drawn accurately. Any ideas on how I can set solid colors without all of the current variance? Are there any more basic examples or more basic shaders I can use?