I am new to Three.js and looking for a tutorial to get me started on how to use Marching Cubes in three.js. Some of the projects I have seen so far in three.js which use this are a bit complicated for me, so a simple tutorial would be nice.
Thank you.
Like yourself, I was looking for a non-metaballs example of the Marching Cubes algorithm -- I am particularly interested in graphing implicitly defined surfaces. Since I couldn't find one, I wrote an introductory Marching Cubes example that uses Three.js and posted it at:
https://stemkoski.github.io/Three.js/Marching-Cubes.html
For more details on the theory, you should check out the article at
http://paulbourke.net/geometry/polygonise/
I looked at three.js and their marching cubes demo. It seems to have been built specifically for rendering meatballs :-) I started fresh and copied over the lookup tables and rewrote the main functions and linear interprolation methods and got a new working engine working. My advice would be to do a rewrite yourself (it took me some time), but it will be a lot easier to integrate your own code with this new implementation. Especially, if you want to do more than just meatballs with a single texture. I actually used this site polygonize more while trying to understand the Al Gore Rhythm.
Here is a video of it in action -> http://youtu.be/_oML6USPs20
You can track the release date here highdensitygames.com
I'll be releasing the source once I release this game in the Chrome App marketplace. I'm not so sure it will help you though. It would be just like looking at the three.js source. You will need to dig in yourself with your own implementation. Good luck!
Maybe not quite a tutorial but the 3 dreams of black demo has a metaballs sample with source
Related
So now I can pretty much do almost whatever I want in 2 dimensional games/apps, using HTML Javascript Canvas.
Problem is now I want to make some 3D applications, but have NO IDEA where to start.
3D is completely new to me and I think regardless it seems like it will be very difficult for me to learn, but I want to try - I just don't know what to do now.
I've looked into three.js a bit, but it's chinese for me.
Thanks!
start learning from three.js
three.js
you can create mini to almost-enterprise quality of application with it. But here is a little issue, if you think about creating large games, where you need to put a lot of collisions , you can try babylon.js
they are for your coding aspect. Besides, you need to learn blender/3d studio max. try to get the basic philosophy of three basic operations (i suppose you already have..) rotation,translation,scaling.
try to edit the examples of three.js and see what it comes, trust me, it is not that tough that you are thinking.
After that, you can try shader (GLSL). you can find many shader examples in GLSL playground and shadertoy
Also this website is legendary for learning three.js
and try some others libraries like playcanvas,unity3d(webGL)
happy learning
I'm trying to experiment with ways to create a more realistic look in webGL and stumbled on this demo http://madebyevan.com/webgl-path-tracing/.
I'm fairly new to javascript and have been using THREE.JS to learn webGL. I noticed in the demo they use a sylvester.src.js which I assume is calculating the path tracing for the lights/shadows. Can path traced lighting be used with threejs? If so how?
Sorry to be so vague on this one. I haven't found much info to go off of in this matter.
Today I came across with wowhead's 3d model viewer (you should be able to see an interactive 3d spider model at the right side banner) which seems to be using HTML5 canvas to render the interactive 3d model. The problem is that I still didn't figure out how can I do the same with a personal application.
Maybe someone can share some knowledge into this type of 3d features.
I've made something for a prototype for a school project a while ago. I used the GLGE framework after failing with SceneJS.
The result, ugly as it may be, shows how to load and unload models in a WebGL view. This results in the possibility to configure an action figure. The demo can still be found here, and I have no intention to bring it down any time soon.
http://goleztrol.nl/SO/GLGE/03/
I haven't done much experimenting with 3D since, and I don't remember all the details, but it was one of my first experiments, only a couple of dozens of lines of code, so it should be pretty straightforward.
The code is well commented although it is in Dutch. So if you run into problems, please let me know, and I'll try to translate the comments and maybe put everything in a fiddle and maybe dive into it again to explain details that are unclear to you.
I hope this is the right place this time, but I am trying to figure out how to use three.js to create a star the way the chrome experiments 100,000 stars was done. I tried looking into the source code but it is extremely difficult to decipher, it seems to be many parts, I have tried using textures, and I don't know how to get the glow or the halo around the sun, I would appreciate any assistance from someone with knowledge on how this was done.
Did you see this article?
The section on the sun gives a high-level overview of how to achieve the effects.
You'll probably want to look into GLSL shaders, which is an entire field in itself.
For now it might be best to find the shaders in the source and tweak them to see what effect your changes have.
Also consider checking out this tutorial for an example of glow and bloom shaders.
For learning more about OpenGL in general, the latest edition of The Red Book supposedly does a good job of explaining OpenGL while avoiding the failings of the previous edition.
Here is an example of a halo-style glow effect using shaders:
http://stemkoski.github.io/Three.js/Shader-Halo.html
It is still a work in progress -- panning or zooming will change the appearance of the glow, but perhaps it will be enough to be of assistance.
Hope it helps!
I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.