HTML Javascript - Need help learning to transition to 3D from Canvas - javascript

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

Related

How can I implement a 3D model viewer using canvas such as the one used by wowhead's website?

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.

Build a webpage with a flock of birds flying endlessly around on it

I would like to build a webpage with a flock of birds flying around on it. White background, black, "bird-shapes" to begin with - I'm thinking folding triangles. Eventually I would be interested to generate random flying patterns but for now I would be happy to make regular, repeating patterns, with one "bird" to begin.
I'm wondering how might this best be achieved or where to begin? I have plenty of programming experience with Java, and some in HTML/JavaScript. But I'm interested to learn. I'm just looking for a few pointers. WebGL? Or just use JavaScript?
You're best bet is html 5's canvas tag. Canvas also supports WebGL, so using that would be easy too.
http://www.html5canvastutorials.com/advanced/html5-canvas-animation-stage/
Here is an example:
http://cssdeck.com/labs/flying-bird-animation
&
http://cssdeck.com/labs/o1jukgxc
You can use this idea to replicate your needs.
It depends on the effect you're looking for. If you want a 3d effect you should look into THREE.js. This tutorial is a pretty decent introduction. Personally I think you could do what you need using the 2d canvas. Daniel Shiffman's Nature of Code is a great tutorial on vehicles, all with the standard canvas context. Most of the examples have been translated into JavaScript (using p5.js), but it's originally in Java so it could be a great way to get your feet wet.

How to make 3D animation with Canvas

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.

Getting started with marching cubes in three.js

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

Is there a water physics engine for javascript?

I want to make a demo using javascript and <canvas>, I was thinking of doing a little moving creature, seen from the top and swimming in a water environment.
Concept "art" :
Is there something I can use to start this project, or do I need to create everything from scratch ?
Here's one demo
http://code.almeros.com/code-examples/water-effect-canvas/
http://rumpetroll.com/ is open source and has the kind of movement you could probably modify to do as you wanted
I'm not sure what exactly do you intend to simulate (or whether I got the conceptual art :) ), but this might be a direction:
processing.js is not a physics engine, but rather a graphics library port to javascript (utilizing canvas) - http://processingjs.org/ .
However, you might find something in their demos that is similiar to what you are trying to create.
One of the original processing library examples has a nice fluid simulation using a particle system, and it runssuccessfully on processing.js - http://processing.org/learning/topics/fluid.html , however the framerate is very poor. You can try it yourself at http://processingjs.org/learning/ide - just copy&paste the code from the example (and prepare for your computer to crawl to a halt).
You can try to adjust the particle numbers (pnum), to improve speed, and play around with other variables.
Sorry I don't know of a library, but I did see a water physics in canvas demo recently:
http://hakim.se/experiments/html5/wave/03/
Maybe you can get some inspiration there...you might be able to accomplish it with a normal JS physics library like Box2DJS.
Just an idea, but you could search for a Java engine and then use GWT to compile it to Javascript.

Categories