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.
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.
I'm very new to three.js, so please forgive me if my question has already been answered some place else or is obvious.
What I'm trying to do is the following: I have data from a motion capture system. This data consists of frames where each frame has the Cartesian coordinates of multiple markers. I'd like to visualise this data using three.js in a web browser.
So far so good. My initial thought was to simply use geometric primitives for each marker and connect some markers to create a sort of 3D "stickman". However, I found out that three.js has a concept called Skeleton, which consists of a set of Bones. That seems precisely like what I want. However, I do not have any sort of "skin" that I would like to use (e.g. a SkinnedMesh).
My question therefore is two-fold: 1) Should I even use Skeleton for my intentions or is the primitive approach described earlier the way to go and 2) if I'm to use the Skeleton stuff, how do I present it in a scene without using any skin?
Any help here is greatly appreciated!
To answer my own question: The easiest solution that I found was simply using spheres for the markers and connecting them with lines. This has some shortcomings (e.g. lines do not scale with the zoom level), but overall it works quite well.
If you are interested in doing the same, I've put together a simple demo, which is also available on Github.
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.
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