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.
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 planning on creating an interactive 3d application in js. My question is whether or not babylon.js or three.js supports interactivity? Can't seem to find any information on this, and the documentation doesn't help much either.
Note; by interactivity, I mean for the user to be able to draw elements on a given 3d scene.
I can't speak for babylon.js as I've never used it, but I do have some experience with three.js.
If by "draw elements" you mean creating or manipulating shapes/geometries on the fly based on user-input, then the following examples should prove that its definitely possible.
For instance, on the three.js docs page, there is a control-panel used for manipulating a CylinderGeometry() object in the top-right corner of the live-example.
An example of "drawing" from cursor-input using raycasting can be found on thee.js's examples page as well as another example where objects within the scene are draggable.
To be honest, the interactivity of your app is only limited by you.
I've been playing around with the threejs library and creating a basic scene with a bathtub and skybox.
You can find my original code (without any shaderimplementation) at;
https://liuloppan.github.io/watershader/
Now I want to make a shader for my water using GLSL, but I'm struggling to make it work just linking the vertex- and fragmentshader into a program. Right now I just want a standard blue shader using GLSL, I've looked at the ShaderMaterial function, RawShaderMaterial, and also WebGL tutorials trying to make it work. I have 3 different questions at this point.
With the ShaderMaterial and RawShaderMaterial examples, I noticed that most of the code examples use the ../build/three.js, but I use the minified three.min.js, how much of a difference does it make?
I followed this tutorial; https://aerotwist.com/tutorials/an-introduction-to-shaders-part-1/
I get an error "could not initialise shader" VALIDATE_STATUS false gl error.
How to fix this?
Do you know of any alternative up to date examples of shader-implementation with threejs? Most examples I find seem to use some or multiple deprecated methods so that I can't run the examples myself.
1 > There is no functional difference between full and minified.
2 & 3 > Look for two objects in the three.js code called ShaderLib and ShaderChunk.
These are the building blocks for the basic shaders in three.js. Those should help you learn how three.js expects shaders to be assembled, and you can be sure their way is correct for use in three.js.
I started to learn webgl, but it's very hard, so I dont know a lot of things. How do I move the camera in the 3D space and how do I set, where to focus?
WebGL is quite low level and doesn't support cameras as such. If you want to see details please refer to this tutorial which is a part of a big tutorial series you might find helpful.
I would recommend you to have a look at three.js which is a lighweight 3D engine built on top of WebGL. See this HTML presentation for a nice introduction into this library.
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