rohitvarkey / ThreeJS.jl

Julia interface to WebGL using Three-js custom elements and Patchwork.jl
https://rohitvarkey.github.io/ThreeJS.jl
Other
56 stars 15 forks source link

WireFrame bug #23

Closed StreetLevel closed 8 years ago

StreetLevel commented 8 years ago

I think i found a minor bug:

ThreeJS.mesh(0.,0.,0.) << 
                    [
                        ThreeJS.geometry(mesh_geom[convert(Int,x)]), ThreeJS.material(Dict(:kind=> "basic",:color=>"grey",:wireframe=>false))
                    ],

results in plotting a wireframe although the wireframe paramter is set to false. Only removing the :wireframe keyword results in plotting the surfaces.

Best, Max

StreetLevel commented 8 years ago

Another thing leaves me confused: I'm plotting some spheres (I don't know if i'm doing it the right way):

 ThreeJS.mesh(vert...) << 
                    [
                        ThreeJS.sphere(.03/(1.4^x)), ThreeJS.material(Dict(:kind=> "basic",:color=>"red"))
                    ] for vert in vertices
                    ],

The vertices

julia>  vertices
5-element Array{Array{Float64,1},1}:
 [2.0,0.0,0.0]
 [0.0,1.0,0.0]
 [0.0,0.0,0.0]
 [1.0,0.0,0.0]
 [0.0,0.0,0.0]

are 5 points defining two tetrahedrons. But in the canvas only 4 spheres are drawed bildschirmfoto 2016-03-23 um 14 53 51

Maybe you can tell me my error or the proper way to plot several meshes or particles.

Many thanks in advance!

Best, Max

rohitvarkey commented 8 years ago

Nice catch! I made a wrong assumption as to how Polymer treats Boolean attributes. Turns out, it just checks if it is set, in which case it turns out to be true and if not set, false. So if the wireframe keyword exists, then it sets the wireframe attribute as true on the Polymer end!

This bug affects all Boolean attributes, most notably the visible attribute which is by default set to true (and so can never be set to false!). I'll push a fix for this soon!

Thanks for the bug report again!

In the second problem, it seems that you are creating 2 spheres at the same location? The 3rd and last element in the vertices array seem to be the same! ([0.0, 0.0, 0.0]). The way you are doing it is correct!

StreetLevel commented 8 years ago

Thank you for the fast response.

...yeah you're totally right. I collected the wrong vertices. Now it works like a charm:

bildschirmfoto 2016-03-23 um 16 09 05

Is transparency support?

Your package is genious. I will dig a little deeper into it in the next few weeks. In general, if i want to extend the interface what would be the route to go? To my knowledge this 2 steps should be all i have to do (correct me if i'm wrong):

  1. write some new function in render.jl creating a Patchwork.Elem:
function some_element(radius::Float64)
    Elem(
        :"three-js-keyword",
        attributes = Dict(:r => radius)
    )
end
  1. In assets/bower_components/three-js/three-js.html create a new javascript<dom-module id="three-js-keyword">e.g.
<dom-module id="three-js-keyword">
<script>
  Polymer({
    is: 'three-js-keyword',
    properties: {
 ...

passing the attributes and then calling the appropriate Threejs javascript code.

If I'm right, it should be relatively easy to implement some functionality out of threejs.org/examples/ e.g. some gui elements.

Best, Max

rohitvarkey commented 8 years ago

That looks cool!

Is transparency support?

Not yet! But I can add support for it pretty easily. Just a couple of keywords to be added to the three-js-material Polymer element!

Your package is genious. I will dig a little deeper into it in the next few weeks.

Thank you for the compliment :smile:! And that sounds great. I think this package is in need of users (other than myself!) and feedback to isolate issues and suggest improvements, as you've seen so far.

In general, if i want to extend the interface what would be the route to go? To my knowledge this 2 steps should be all i have to do (correct me if i'm wrong):

The steps you've mentioned are the way to go to make the changes, but I'd prefer if the updates to the three-js.html file goes to https://github.com/rohitvarkey/three-js and you do a bower update here. Makes things cleaner. Modifying the file in bower_components and just copying the changes to the other repo will work too!

Looking forward to your involvement!

Regards, Rohit

rohitvarkey commented 8 years ago

I've just pushed to master and fixed this bug. I'm filtering out any attributes with false before an Elem is created to prevent this from happening.

Also master has support for transparency and opacity! Do check out the box.jl example to see how to use them.

Do let me know if you need anything else!

StreetLevel commented 8 years ago

Thank you. thats sounds pretty cool! i will test it as soon as i have time. Best Max