themadcreator / seen Goto Github PK

You can read it here: http://josepedrodias.svbtle.com/seenjs-render-to-sprite-feature

For convenience I'm attaching the body of the proposal below:

Hi there. First of all congratulations of the design and implementation of this project. It is awesome in its feature set and its overall simplicity.

In the past few days I've explored a bit of the library, it's API and samples and made some experiments you can see here:
repos,
isometric view,
45 degrees view

I'd like to propose a set of features which would make seen.js much more powerful. I could even implement them myself and make a pull request to the project but I fear I may:

1. not grasp the source code and flow of the engine altogether as efficiently as you;
2. not have the time to do it entirely by myself.

That said, let me attempt do describe my vision (this assumes the canvas mode, in SVG we couldn't do what I propose):

So you modeled a shape as a set of primitives and associated models. Now you want to translate it during the seen.js lifetime but you will not do rotation or scaling to it, or maybe you will but in a finite set of combinations. As an example, imagine a player shape which can be used with 8 rotations around the YY axis, mimicking the 8 main directions it faces walking. Those 8 "postures" could be rendered to auxiliary canvases at init time and blitted/reused throughout the lifetime of the game/simulation.
This assumes the existence of a new shape type which renders a canvas or canvas region into the main canvas.
An addiction to this would be supersampling. If the shape is intricate, it could be rendered at a higher resolution and saved to the auxiliary canvas scaled down.

This is the main idea. Get back to me if you want me to expand on it more. Please give feedback whether you think this is useful and you're willing to implement it yourself or help me implement it. There may be problems along the way I'm not identifying which may compromise this. If so, describe them so we can discard this altogether...

Thank you for your time.

I just found this lib and I was getting excited to see in the source something about joints for a human model. Any plans for a demo?

Well, first of all, this seems like a really great project. Thanks for sharing.
I've stretched svg as far as i could, trying to get rough 3d of timber frames. When i hit wall i was looking for 3d tools and this is just shy of perfect. Everything i need (and more) in 31k zipped.

My (small) problem is that when a timberframe is many lines, and to blend some out i used masks in svg (which are not supported too well). See pic.
So i couldn't find masks. And when i do a surface, what ever i do it always looks different than just nothing.

The i tried a transparent rec. Also looks different but i could live with it. But whatever i've tried, i only get three surfaces. The other three are just not rendered. I've tried to set he cullBack thingie, but no avail.

I can show code, but i tought maybe i am fundamentally still misunderstanding something?

PS: if there is something i can help with i would
PPS. Like more shape generators, methods with updating shapes/surfaces . . I'll be writing those since i want to create a sort of 3d design tool.

Why is not drawn from the upper surface of some figures obtained by extrude? Is it possible to fix it?

Above:


Below (here no problems):

Piece of cake - no problem (above):

Here is the code for the first shape (his based on the pipes code):

pie = (point1, point2, radius = 1, segments = 8) ->

    axis  = point2.copy().subtract(point1)
    perp  = axis.perpendicular().multiply(radius)
    theta = -Math.PI * 2.0 / segments
    quat  = seen.Quaternion.pointAngle(axis.copy().normalize(), theta).toMatrix()

    points = [0...segments - 80].map (i) ->
        p = point1.copy().add(perp)
        perp.transform(quat)
        return p

    points.push point1

    return seen.Shapes.extrude(points, axis)


shape = pie(seen.P(0, 0, 0), seen.P(0, 1, 0), 1, 200)

I wanted to see some examples, but it seems the server behind http://seenjs.io is offline.

The class Bounds is instantiated in src/render/model where points of the model are added. However there is no other access to that instantiation in the Seen source.

is this data accessible as an api?

I would like to set specularity and metallic when creating a new material new seen.Material. How can I do this?

Also can you lock a rotation axis on a model?

hi, thanks for your awesome work. I have a suggestion for the document, that is make a document index put on the web page. cause it too long.

Hello! Is there a way to remove the line between the surfaces?

Hello! Very good library. Thank you.
I have the following question. Sometimes the model at a certain angle to the fore surface to be rear.
That's what I mean:



How can I fix this moment?

First, thank you so much for writing this! I've been looking for a lightweight 3D library without external dependencies for a very space-constrained project.

Are there any other notes on usage, or is the Docco output the place to go? I'm finding it hard to identify what I'm looking for there - partly because I'm new to CoffeScript.

For example, I needed the quaternion constructor parameter format. It seems to be (x, y, z, w), but I don't see how it actually gets there. I would offer to help write more documentation, but my grasp of the underlying math is too weak to be sure of getting it right.

My application is taking live motion sensor data, processed through a sensor fusion library on the remote device, and uses it to update the orientation of a displayed shape. At the moment I'm doing that by taking the quaternion values from the device and using toMatrix() and shape.transform() (after resetting the shape to its starting orientation each time) and it's partly working - but it has a lot of discontinuous jumps in rotation.

One thing that concerns me is that the remote device is configured to use the north-east-down coordinate system. I'm not sure what coordinate system seen is using, but I suspect that's not it. I think the quaternion output should still be smooth, though, just incorrectly rotated if they don't match - is that correct?

I also have an orientation matrix available from the device, but I don't see if there's a convenient way to create a corresponding object. It's also a less efficient format to be sending from the remote device. Is there any reason I wouldn't want to be using the quaternion output?

Thanks!

Just added seen-js as npm package & converted the tetrahedron coffee script code using js2coffee. But I am getting an error in the console as: Uncaught TypeError: Cannot read property 'render' of undefined. The context variable seems to be undefined, any ideas?

seen = require('seen-js');

var context, scene, shape;

shape = seen.Shapes.tetrahedron();

scene = new seen.Scene({
  model: seen.Models["default"]().add(shape),
  viewport: seen.Viewports.center(400, 400)
});

context = seen.Context('seen-scene', scene);

console.log(context); // undefined

context.render();

Hi,

I've been having fun with this cool library, looking into Mocap-Driven Skeleton I run into this issue:

Uncaught TypeError: Cannot read property 'parse' of undefined 
at Function.seen.Mocap.Mocap.parse (seen.js:2851)

That relates to this section of the code:

  @parse : (source) ->
    return new seen.Mocap(seen.BvhParser.parse(source))

Looks like for some reason BvhParser is undefined.

I'm using the latest version of the library and I haven't made any addition other than the sample code provided, so let me know if you have any idea of what the root cause could be.

Thanks

This looks pretty neat.
I like the way the transformations are bunches up with a cache, before pushing to the canvas.
I am wondering if you have thought about formalising this to operations, like a log forward system for immutable data. The idea is that other can write operations, and because they are immutable, when they are merged and played back it all works, independent of the time each operation was made.
This is a big leap, but the fact that your base architecture is based on queuing the transformations, it seems plausible so i thought i would ask what you think.

Is this using a 2D canvas or 3D canvas ? I am not quite sure.
I ask this because i need a way to take a 3D webgl model, and make 2D SVG of it.

In your demo, you load 3D data from an external file and render a rabbit. Very cool!

Does seen support other types of 3D files like collada or only that type in the demo?

Since coffeescript 1.9.0, arguments with "@" are no-longer accessible by the bare name.

One problem I found in seen.LightRenderModel that uses @light in the argument list cannot be used as light in the constructor body.

From the coffeescript changelog:
Changed strategy for the generation of internal compiler variable names. Note that this means that @example function parameters are no longer available as naked example variables within the function body.

Do you have any plans to port all the coffee script to es2015.

Since the Seen.MouseEvents.prototype.attach and Seen.MouseEvents.prototype.detach functions use the mousewheel EventListener, which is non-standard and not supported by FF, this functionality is broken. This can however easily be fixed by adding an additional EventListener for the new standard wheel event within the MouseEvents.prototype.

The syntax of the wheel event is a bit different then that of the mousewheel event though, so I would suggest editing the Seen.Zoom.prototype._onMouseWheel function as follows:

Seen.Zoom.prototype._onMouseWheel = function(e) {
var delta, sign, zoom, zoomFactor;
zoom = 1;
if(e.wheelDelta){
e.preventDefault();
delta = e.wheelDelta;
} else if(e.deltaY){
e.preventDefault();
delta = -e.deltaY;
}
if(delta && delta != 0){
sign = delta / Math.abs(delta);
zoomFactor = Math.abs(delta) / 120 * this.speed;
zoom = Math.pow(2, sign * zoomFactor);
}
return this.dispatch.zoom({
zoom: zoom
});
};

Kind regards and thank you for an awesome library :)

I included examples of seen.js into my website.
See: http://www.svgdiscovery.com/SEENjs/GeometricSolids.htm
It includes an additional 120 geometric solids as default shapes in my copy of seen.js.
You are surely welcome to use it and include it in your application.

The following is the current seen.js used the above example:
http://www.svgdiscovery.com/SEENjs/seen.js

I want to show some text on a surface of a rectangle, how can I do it in seen.js? Or is there any example?

Why force an msecDelay of 30ms which keeps the animation performance reach a maximum of 30fps?

If you used rAF instead you'd be hitting 60 and people playing the 3d 2048 would be more impressed.

Any chance you are planning to release it as an npm package?

Simply put, Simplex3D isn't included in seen.js.

You can find Simplex3D defined here.

You can see it in use in a demo here

And you can see it not being found here

I understand Simplex3D isn't strictly a part of the library, but it's generally nice for people to be able to copy and paste demo code so they can play around with it.

I was searching for a 3D library that renders natively in SVG (not in canvas or WebGL), in a way that the DOM structure will be preserved at each frame and the texts are kept selectable and indexable by search engines. Also SVG is resolution and dpi independent, and stays sharp on retina displays and the like.
At the beginning I found three.js, but its renderer pipeline is raster on canvas. Then I tried snap.svg library, but it was 2D only. Finally I found your awesome library. Great work!

Being my project writted in Dart It would be ideal to have a Dart version of your 3D SVG engine. On browsers that support it, Dart runs natively and it is up to 4 times faster than javascript. On Chromium you'll probably get a huge performance improvement for your engine.

Do you think to make a Dart port of Seen in the future? Something like the Dart port of three.js, https://github.com/threeDart ?

Will be nice to see demos with possibilities to increase numbers of object on scene and fps counter.

Hi there,

First of all thank you for writing this amazing library! I'm having a great time working with it!

I would like to ask how I would be able to check if a mouse click event is contained by points on a Surface?

I've tried the following but it doesn't seem to be working:

    mouseEvent = new seen.MouseEvents('seen-canvas-0')
    mouseEvent.on('mouseUp', (e) ->
     coords = getPageCoords(e)
     quatX = seen.Quaternion.pointAngle(seen.Points.Y(), coords[0] / seen.Quaternion.pixelsPerRadian)
     quatY = seen.Quaternion.pointAngle(seen.Points.X(), coords[1] / seen.Quaternion.pixelsPerRadian)
     point = quatX.multiply(quatY).q
     for surface in shape.surfaces
       bounds = new seen.Bounds(surface.points)
       if bounds.contains point
         surface.fill seen.Colors.rgb(255, 255, 0)
    )

Kind Regards
Michael

I tried to download http://seenjs.io/dist/latest/seen.min.js , Chrome shows "seen.min.js is not commonly downloaded and could be dangerous".

Would you resolve it with Chrome - https://support.google.com/webmasters/answer/3258249 ?

Hello! Is it possible to handle the mouse events of individual elements of the model? For example to take and move objects on the same scene?

In other words, if the model is made up of several shapes, can we somehow determine at what shape we clicked?