Nice Work!

[theo-armour]

Hi stemkoski

I am really enjoying your work with Three.js.

You are building up a great range of examples and your coding style is easy to follow/

Thank you for all this work.

One routine that I admire a lot is your marching cubes algorithm. It is so much easier to follow than Altered Qualia's marching cubes Three.js example.

I have used your marching cubes routine here:

http://jaanga.github.io/jaanga/2-Algesurf/1-Overview/Builder.html

with credit here:

http://jaanga.github.io/#2_Algesurf/Overview/Credits

Here's a question:

Here's is Altered Qualia version: Note the unfaceted shading.

Here is my attempt to do the same thing:

http://jaanga.github.io/jaanga/2-Algesurf/algesurf-api.html?material=shiny*

Note the facets.

Can we work together on eliminating the facets?

If we can, then I think it would be possible to start developing some very shaders that could be applied to the algebraic surfaces. In turn this could lead to very interesting multivariate data visualization.

In any case, could we think about collaborating in some fashion?

Theo

[AndrewRayCode]

I actually came to the issue tracker to open a "this project is too damn awesome" issue. glad to see someone beat me to it :)

[stemkoski]

Hi Theo,

Thanks for the kind words -- and let me say, I love the work you did on the Three.js article in Wikipedia. I would be happy to join you in an effort to remove the facets, just give me a week to finish up my professorial duties for the spring semester and I'll be in touch. As a mathematician by training, I am excited by the potential of Three.js in this area.

And hello DelvarWorld (AndrewRay?), I'm glad you like the repository thus far. My goal, as you may have noticed, is not to build the most mind-blowing 3D demos, but rather to extract single features and try to code them in a straightforward and well-documented way for others to learn. So far, so good, but I still have 10-20 demos on my to-do list.

[theo-armour]

Hi Professor Stemkoski

And thank you for your kind words.

First off, there's no hurry in any of this. Students are the priority.

Three.js Wikipedia entry
The Three.js Wikipedia entry is sorely in need of an update. I am prepared
to do the grunt work in writing an update. But it would be really nice to
have somebody editing or commenting.

I tried to get help last year on the Three.js GitHub forum, but most
everybody there is too busy programming. If anybody reading this is
interested in editing what I do, please let me know.

Marching Cubes Improvements
In the next few days, I will push up my changes - which ameliorated the
faceting a bit.

Theo

On Sun, May 12, 2013 at 7:11 PM, stemkoski [email protected] wrote:

Hi Theo,

Thanks for the kind words -- and let me say, I love the work you did on
the Three.js article in Wikipedia. I would be happy to join you in an
effort to remove the facets, just give me a week to finish up my
professorial duties for the spring semester and I'll be in touch. As a
mathematician by training, I am excited by the potential of Three.js in
this area.

And hello DelvarWorld (AndrewRay?), I'm glad you like the repository thus
far. My goal, as you may have noticed, is not to build the most
mind-blowing 3D demos, but rather to extract single features and try to
code them in a straightforward and well-documented way for others to learn.
So far, so good, but I still have 10-20 demos on my to-do list.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-17790117
.

[SteveOW]

Hi Professor Stemkoski
Many thanks for your examples they are a great help for understanding Three.js.

I am building a Basic-like front-end scripting tool called Browzic to help novice programmers access the power of html5/javascript (example at http://www.zen226082.zen.co.uk/PongGoneWrong4.html)

I am thinking of using Three.js as a 3D graphics library for Browzic (example at http://www.zen226082.zen.co.uk/PONGO.html)

I would like to use one or more Three.js canvasses in a single html page and in each canvas use the mouse to control view and manipulate objects and maybe drive gui controls. But I dont know how to get the offsets.
In simple canvas I would use:-
var rect = canvas.getBoundingClientRect() and then use rect.left and rect.top as offsets.

Maybe sometime you could add mouse coordinate readout textboxes to your dual viewports demo
or perhaps you or someone else could tell me how you would do it? I have searched GitHub without joy.

cheers, SteveOW

[stemkoski]

Perhaps, if you are using the chrome browser, it would be simpler to output
information using console.log(data)?

Lee Stemkoski
Associate Professor of Mathematics
and Computer Science
Adelphi University
[email protected]

http://www.adelphi.edu/~stemkoski

On Tue, Sep 3, 2013 at 6:16 AM, SteveOW [email protected] wrote:

Hi Professor Stemkoski
Many thanks for your examples they are a great help for understanding
Three.js.
I am building a Basic-like front-end scripting tool called Browzic to help
novice programmers access the power of html5/javascript.
I am thinking of using Three.js as a 3D graphics library for Browzic.
I would like to use one or more Three.js canvasses in a single html page
and in each canvas use the mouse to control view and manipulate objects and
maybe drive gui controls. But I dont know how to get the offsets. In simple
canvas I would use:-
var rect = canvas.getBoundingClientRect() and then use rect.left and
rect.top as offsets.
Maybe sometime you could add mouse coordinate readout textboxes to your
dual viewports demo or perhaps tell me how you would do it? I have searched
GitHub without joy.
cheers, SteveOW

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-23702191
.

[SteveOW]

Hi and many thanks for your quick reply.

In Firefox I can go into Firebug/DOM and inspect the offsets of the container in a particular html page.

But I want to write some general toolkit code (in javascript initially) that automatically calculates position of a mouse click within the renderer/canvas rectangle for different page layouts.
Problem is I dont know how to write code that either (a) gets the offset values or (b) applies them correctly.

By trial and error I have come up with an algorithm which seems to work:-
http://www.zen226082.zen.co.uk/PONGO.html (clicking on most objects produces a sound).

Relevant code:-

within Init function...
SOW_scalar = 0.333; //...value selected by the page designer to size the graphics rectangle
var renderer01_WIDTH_px = window.innerWidth * SOW_scalar;
var renderer01_HEIGHT_px = window.innerHeight * SOW_scalar;

    if ( Detector.webgl )
        renderer01 = new THREE.WebGLRenderer( {antialias:true} );
    else
        renderer01 = new THREE.CanvasRenderer(); 

      //... set size of our new renderer01 (includes effect of the SOW_scalar)
     renderer01.setSize(renderer01_WIDTH_px, renderer01_HEIGHT_px); 


    //... create a DOM element container01, append it to the doc body, and then append our renderer01 object to it
    container01 = document.createElement( 'div' );
    document.body.appendChild( container01 );
    container01.appendChild( renderer01.domElement );
    container01.textAlign= 'right';//...has no visible effect on the displayed graphics canvas

...within onMouseMove event handler function
mouse.x = ( ( event.clientX - container01.offsetLeft ) / (container01.clientWidth * SOW_scalar)) * 2 - 1;
mouse.y = - ( ( event.clientY - container01.offsetTop ) / (container01.clientHeight )) * 2 + 1;

This works.
When the mouse clicks on objects the app finds the right object using the ray intersect method.
The mouse coordinate readout gives sensible values.

But it seems very strange to me that the expression for mouse.x requires the value of SOW-scalar, while that for mouse.y does not.

I would be glad if you could enlighten me, or steer me towards some relevant documentation or examples, but no pressure.:-)

cheers, SteveOW.
Date: Tue, 3 Sep 2013 10:48:57 -0700
From: [email protected]
To: [email protected]
CC: [email protected]
Subject: Re: [stemkoski.github.com] Nice Work! (#4)

Perhaps, if you are using the chrome browser, it would be simpler to output

information using console.log(data)?

Lee Stemkoski

Associate Professor of Mathematics

  and Computer Science

Adelphi University

[email protected]

http://www.adelphi.edu/~stemkoski

On Tue, Sep 3, 2013 at 6:16 AM, SteveOW [email protected] wrote:

Hi Professor Stemkoski

Many thanks for your examples they are a great help for understanding

Three.js.

I am building a Basic-like front-end scripting tool called Browzic to help

novice programmers access the power of html5/javascript.

I am thinking of using Three.js as a 3D graphics library for Browzic.

I would like to use one or more Three.js canvasses in a single html page

and in each canvas use the mouse to control view and manipulate objects and

maybe drive gui controls. But I dont know how to get the offsets. In simple

canvas I would use:-

var rect = canvas.getBoundingClientRect() and then use rect.left and

rect.top as offsets.

Maybe sometime you could add mouse coordinate readout textboxes to your

dual viewports demo or perhaps tell me how you would do it? I have searched

GitHub without joy.

cheers, SteveOW

—

Reply to this email directly or view it on GitHubhttps://github.com//issues/4#issuecomment-23702191

.

—
Reply to this email directly or view it on GitHub.

[eliazarx]

Hi Professor Stemkoski
Many thanks for your examples they are a great and fundamental help for understanding Three.js.

Sincerely,
Fabrizio.

[leefsmp]

A pretty slick set of examples! Thank you very much for those resources 👍
Philippe.

[theo-armour]

@paulmasson @stemkoski

Sounds good to me.

Some questions:

Since Three.js currently lacks a proper marching cubes implementation

I think it would be a good idea to point out the issues with the current Three,js implementation.
http://mrdoob.github.io/three.js/examples/#webgl_marchingcubes

Since this is about [implicit surfaces](Points of Interest), might it be more specific to title the method as 'ImplicitSurfaceGeometry'?

Will your method be based on BufferGeometry?

@paulmasson If I remember correctly, did you not devise a slightly more streamlined version of Professor Stemkoski's code? If so can you point us to it?

In any case, I look forward to seeing the results of your effort. The visualization of surfaces is one on the most beautiful things we can do in 3D. Please do help more people have access to such tools.

[theo-armour]

Most of the classes in Three.js labeled "Geometry" are surfaces, so I
don't think that needs to be explicit. Mr Doob would just remove it in any
case, since he likes brevity.

All good. And Mr.doob also seems to appreciate clarity. When I see
BoxGeometry, PlaneGeometry, IcosahedronGeometry I fairly much know what I'm
going to get. But 'ImplicitGeometry' doesn't immediately create a visual
image for me the way the others do. Could you come up with a more readily
identifiable name?

On Wed, Apr 27, 2016 at 7:55 PM paulmasson [email protected] wrote:

@theo-armour https://github.com/theo-armour haven't touched any
marching cubes stuff yet. Spent some time trying to decipher the existing
Three.js example in order to visualize the 27 lines on a cubic surface, but
need a better tool for that to be productive.

Most of the classes in Three.js labeled "Geometry" are surfaces, so I
don't think that needs to be explicit. Mr Doob would just remove it in any
case, since he likes brevity.

Since Three.js is moving to BufferGeometry in general, that would
certainly need to be addressed. Thank you for reminding me.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#4 (comment)

[theo-armour]

@paulmasson

yes

Would your code replace zz85's effort or supplement it?

https://github.com/mrdoob/three.js/blob/master/examples/js/ParametricGeometries.js