three.js and depthFunc - javascript

From looking at the code, it seems that three does not give much control over the depthFunc. I would like to confirm that it's only set once as the default GL state, and not available say, in the material?
I'm not familiar with all examples, and was wondering if this is happening somewhere?
If not, what would be the best approach to set the depthFunc to gl.EQUAL for example, when a specific draw call is being made i.e. a mesh with a material?
Is something like toggling between scenes i.e. use one to render stuff, then use another one to render stuff on top of the first one a good solution for this? That's the only example that i've seen of tweaking the otherwise sorted objects.

It's currently in the dev branch of three.js: the pull request.

Related

What are the various parameters i can pass to <animated> from react-spring

I have just started working on react-spring. From the very beginning, I have seen the usage of '''<animated>''' tag. As, I explored more and complexity increases, I find more and more details of the code which I do not fully understand.
For example, Just have a look at this sandbox-
https://codesandbox.io/s/stupefied-noether-8i6o0
I am still not clear how the key variable passed to animated tag is working under the hood. Moreover, is there is an exhaustive list on which parameters can I pass to animated tag?
Also, is there any good tutorials/resources to understand react-spring in detail? The official document though is quite helpful, doesn't provide enough resolution on micro details of each aspect of it's function.
The key prop is not directly related to react-spring, in your example you can see that string which is an array uses the map() function to map and render animated divs.
key is used by React in order to be able to track those elements between changes and be able to determine whether the virtual DOM needs to generate those elements again as a whole or only the new ones that are added. More about keys and lists can be found here.
For more info about react-spring you might find some more information here, if you have something specific you would like to achieve feel free to make a question about it, playing with the library and experiencing it yourself will probably be the best way to learn about it.

How can I set a a state variable from two UI elements?

So, apologies if this is too much of an open and beginner-like question.
I am trying to build a single page app, in which one can control a variable in two ways:
by dragging the corresponding datapoint on a D3 scatterplot chart
by setting its value with a slider
I would like the chart to update when the slider gets moved, and the slider to move when the chart is updated by dragging the data on the chart.
I have thought of handling this through:
a spaghetti tangle of events
a proxy object mediating the changes
However I'm asking myself (and the illustrious SO community) is there a better way to handle this?
The keyword for solving this is 'data binding'. There are several frameworks out there, which are able to solve this. That means, that you have a javascript model, which holds the value, you want to work with and something like a proxy, which handles changes and stuff and applies the changes to the view or respectively to the mode..
In case you might need this more often, which usually applies to single page apps, I would recommend you to use some framework, which does the work for you instead of reinventing the wheel.
If you want to stay with client based Javascript, you might take a look into Angular.js (never used it, but maaaany people do and really do like it) or Knockout.js (I work with it, but there are no more further developments).
Within the last years and now many peoply switched to Node.js and Angular2 (a further development of Angular.js) or React.js or Vue.js. You might also take a look into it, but going into detail would blow up the answer. Moreover I only know some basics right now and other people can do better and already did better.

Using Skeleton without the skin in three.js

I'm very new to three.js, so please forgive me if my question has already been answered some place else or is obvious.
What I'm trying to do is the following: I have data from a motion capture system. This data consists of frames where each frame has the Cartesian coordinates of multiple markers. I'd like to visualise this data using three.js in a web browser.
So far so good. My initial thought was to simply use geometric primitives for each marker and connect some markers to create a sort of 3D "stickman". However, I found out that three.js has a concept called Skeleton, which consists of a set of Bones. That seems precisely like what I want. However, I do not have any sort of "skin" that I would like to use (e.g. a SkinnedMesh).
My question therefore is two-fold: 1) Should I even use Skeleton for my intentions or is the primitive approach described earlier the way to go and 2) if I'm to use the Skeleton stuff, how do I present it in a scene without using any skin?
Any help here is greatly appreciated!
To answer my own question: The easiest solution that I found was simply using spheres for the markers and connecting them with lines. This has some shortcomings (e.g. lines do not scale with the zoom level), but overall it works quite well.
If you are interested in doing the same, I've put together a simple demo, which is also available on Github.

Can someone clarify Raphael's documentation? (or know a place in which someone already has done it)

I´m working with Raphael, and I think that I´m using it in a way that does not take advantage of some features that seems to be useful.
For example, I´m trying to add a listener on a Set (a group of elements), in a way that on mouse over on any of those elements, the script triggers an animation on the whole set.
When you add a listener to a set, Raphael adds the listener to each of the elements and animates them separately.
Like you see in this example http://jsfiddle.net/4VYHe/3/ in wich I want that all the rectangles in the same set (set = horizontal groups of 10 rectangles), change the color attribute on mouse over on any of them.
I have found a few methods in the raphael documentation that i think must help to achive this. But I´m having a hard time understanding how these methods work.
For example:
the eve object(http://raphaeljs.com/reference.html#eve)
the Element.animateWith() method (http://raphaeljs.com/reference.html#Element.animateWith)
the Raphael.animation() method (http://raphaeljs.com/reference.html#Raphael.animation)
The Raphael Library seems to be really powerful and I really want to get it work properly, I don´t want to write all kinds of diferent javascript hacks, because I think that these tools have to get the work done in a more elegant way.
If you think that I´m using the wrong library I´m still open to all kinds of advices.
Thank you in advance.
---EDIT---
This is a working example (http://jsfiddle.net/4VYHe/6/). But this is a hack with lack of efficiency and elegancy. I want something that uses the correct tools on the correct way.
There is some information on this page. http://www.irunmywebsite.com/raphael/additionalhelp.php?v=2#PAGETOP . A couple of examples, but nothing that explain how things work in Raphael.
Take a look at this fiddle, I think it is doing what you are looking for. The fundamental difference is that you want to call animate on the set, rather than this. It appears that when you add a handler to a set, this refers to the individual elements in the set (which are iterated over to assign the handler), and not the set itself.
Note that I pulled the handler functions out into the getHoverHandler function:
function getHoverHandler(fillColor) {
var cSet = set;
return function(){
cSet.animate({fill: fillColor}, 300);
};
}
set.hover(getHoverHandler('#000'),
getHoverHandler('#FFF'));
in order to break the closure. If you try to do it like this:
set.hover(function(){
set.animate({fill: '#000'}, 300)
}, function(){
set.animate({fill: '#FFF'}, 300)
});
as you loop through, set will keep changing, and the closures will maintain awareness of this. As a result, all handlers will be acting on the last row of boxes.
If you don't understand javascript closures, you might want to look at this article. It is old, but in pretty simple language, and it helped me as I have tried to get my head around them.
Kreek is absolutely correct in this comment above. Sets are a workaround for the inconsistencies between SVG and VML.
In your example above, you're running into the same issue that you were facing in your previous question. Using this in an anonymous function will almost always not work in the way you expect, as this won't be referring to what you think it is. Have a look at this discussion, particularly the first two comments in the comments section. (As an aside, the commenter uses "self" as the reference to "this", which is much better than my "that", which goes to show there's always someone doing it better than yourself)
Anyway, with that in mind, I've cloned your fiddle, wrapped your set in an object, and put the events into the object constructor. By doing this, the event can then refer to that.set and animate all objects in the set at the same time.
It's a small but fundamental concept that will aid you throughout any Raphael (or javascript) development you do.
This doesn't answer your question directly, but hopefully clarifies some of the issues you seem to be discovering. I can't really comment on the animation calls you've mentioned, but I do think that Raphael as a library is definitely worth persevering with.
N.

current transform being applied by canvas

How can I determine the current transform that's being applied by an html5 canvas.
It seems that it only supports two methods for dealing with transforms "transform", "setTransform" but I can't seem to discover the results of applying the transforms.
Short of tracking them all myself and duplicating the the matrix mathematics that it must be doing natively, how can I figure out the current transform?
I've made a wrapper which adds this method to Canvas.
http://proceduralgraphics.blogspot.com/2010/03/canvas-wrapper-with-gettransform.html
Firefox's Canvas 2D contexts have (non-standard) mozCurrentTransform and mozCurrentTransformInverse properties.
The WhatWG have now defined currentTransform and currentTransformInverse properties (the former even being writable). Here's the relevant part of the spec:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations
However these probably won't be universally implemented in browsers for some time yet, so if you want portability you will have to fall back to tracking the matrix manually as #Dave and #James say.
Every man and his dog seems to have written such a Canvas-transform-matrix-tracker. I just had a look at #Dave Lawrence's one; I think mine is better in a few ways, even though I'm sure it's also inferior in other ways.
Mine doesn't require any changes to user JS code - it modifies the Canvas and context prototypes, so you just add a
script
tag and you're good to go.
It intercepts setting of the currentTransform property.
It tries hard only to do what it needs to do.
It works in latest Chrome and Firefox, but I haven't tested it in IE yet.
I put mine in a jsfiddle, with a simple demonstration:
http://jsfiddle.net/XmYqL/1/
Here is a code block to placate stackoverflow so it lets me link to jsfiddle (??):
code, code, wonderful code
I finally got around to uploading my polyfill to GitHub:
https://github.com/supermattydomain/canvas.currentTransform.js
I know it's not perfect, but I'd really like to see us all work together on implementing One True Solution to this problem. I don't care if it's mine or someone else's. This corner of JavaScript/HTML5/Canvas is too much like the Balkans: a sea of partial solutions.
Please, everybody, fork mine, add your changes and send me pull requests, or send me your URL so I can merge your code in, or replace mine wholesale with yours, or whatever.
This is a stupid problem that I just want to nail. If we work together we can do it.
You can look here for the functions that affect transformation:
http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#transformations
If you use the setTransform function, then the current transform matrix is set to the identity matrix, then it uses what was set.
At that point you have the current transform matrix.
Now, if you are going to reset it, then start to call the other transformation methods, if you need to know what it is, it is easy to do the math to calculate the transformation matrix, so just do the operations, using your own transformation functions, then you can set the transform, as you have calculated it.
If you can't do that, then you are currently out of luck, but this post also has the same problem, so you may want to petition to have a new function added, getTransform.
http://forums.whatwg.org/viewtopic.php?t=4164
Although not a solution for how to get the current transform, it may be an useful fact that contexts include a save() and a restore() function that can be used to push and pop context state, including the current transformation matrix.
(At least it may benefit those, who, similarly to me, were looking for getTransform in order to implement a stack using it...)

Categories