How can I use spline interpolation in 3D with WebGL?. This is for molecule modeling, specifically Trace representation. I have been searching information about it, but i hven't found how to use it in WebGL. Will i need create the algorithm?
You can use it, but there're no ready-to-use facilities in WebGL. What you need to do is instead of generating geometry for strait lines between atoms (?) generate appropriately segmented splines. Also, WebGL 2 geometry shaders may come in handy to generate such splines in a performant manner.
However, if you're implementing a molecular viewer or editor and need to display alpha helices, beta sheets and such for a protein, maybe the best way would be to render them as pre-made primitives (e.g., modeled in a 3d software, exported and used as a ready geometry).
Related
For some time now I have been meaning to improve the visualization on the web of some surfaces. So far, I record an animation (say on Matlab or Julia) which I upload online. Rather, I would love to use javascript (with WebGL or other if you have a suggestion?) to call it in my index.html file.
To be more precise, suppose I have three 2D arrays X,Y,Z which represent a surface. The goal would be to have a javascript code (unless there is a better solution) to visualize the surface and say allow for 3D rotations.
Unfortunately I have no experience with the language and more generally not much knowledge in visualization. In particular, I was unable to adapt the "rotating cube" example of WebGL for my needs...
Does anyone have a suggestion on how to accomplish this? If there is a slicker way of achieving this I am all ears :)
Which programming language and libraries would you recommend me to recreate the 3D geometric and linear algebra visualizations displayed in this book http://immersivemath.com/ila/learnmore.html ? I speculate it's either JavaScript or Python, but I'm not sure.
The most used JS library for 3D visualizations is Three. It's not the simplest to learn but the docs are great, it's powerful, and its popularity makes it "community-validated".
Another choice would be Babylon, which also have great documentation and also relies on WebGL for rendering.
D3, the de-facto standard for custom JS visualizations in JS, also handles a bit of 3D, although it's not focused on that.
If library size is a factor you consider, then Light might be a better choice, and if zero-dependency is also a plus, then you might consider Seen.
Cannon is more a 3D physics engine than a 3D visualization library, but it might come handy sometimes.
Consider also CopperLicht, Phoria, and Scene.
I wouldn't recommend doing 3D visualizations on the browser in Python, since there are many libraries in JS that are quite powerful, and moving a computationally expensive task such as 3D rendering on the server might overload it, not to mention the lack of interactivity that server-side rendering might incur.
After a couple of days searching i decide to come here to ask if someone knows how to display 3D images (CAD images) in a website using only javascript.
My goal is to display .stp or .igs formats and allow user to interact with.
So far I've found a couple of frameworks:
https://github.com/tbuser/thingiview.js
http://threejs.org/
https://github.com/humu2009/jsc3d
But they are outdated or they don't allow me to display the formats mentioned.
Does anyone had a similar problem to this that can share how to work with?
Another possibility I've thought is to extract jpg images from the above formats and display it with a 360 image view plugin such as:
http://reel360.org/reel
http://spritespin.ginie.eu/
(to mention a few)
Pros:
loads faster
easier to implement
Cons:
Need to convert to jpg
More difficult to implement
Outdated frameworks (except Three.js)
note: I don't need to have any interaction with the image such as go inside the image, make it transparent, explode... I just have to be able to display it like a 360 picture.
Do you have a nice way to achieve this?
Any comments would be helpful.
Thank in advance,
André
Step and IGES are cad formats and most 3d development in webgl is game development. This is on the other side of the art/games tech divide, the CAD format does not describe polygonal models*. So any program that could show these formats would need to have a geometric solver back end called a CAD kernel. No basic 3D framework will do for you. This is on the other side of simple 3D.
STEP is also a hideously complex format doing a importer is hard even with a CAD kernel. I would look for something like opencascade for the job of converting the cad data to polygons for display. Generally speaking there aren't many free B-Rep backends.
You could also use your existing cad app to do this. I doubt you will find a pure javascript version of a CAD kernel.
* think of it like this a normal 3d model is mostly polygonal. But a B-Rep model does not describe polygons but rather the interconnection of mathematical shapes. So before you can display a step of iges file you need to solve it. Start by reading this
Does webGL contain push/popMatrix? and if not, how would I go about recreating them?
No, WebGL is based off of OpenGL ES 2.0, so there is no built in matrix management or fixed function pipeline. The model view and projection matrices need to be completely managed in your own code and passed to shaders at draw time. You really don't need push and pop matrix if you are using a scene graph or some kind of other similar scene management system. All you really need is a good matrix and vector math library.
If you are still set on using push and pop matrix, you could simply use an array of matrices, and write functions like push and pop that simply save your current matrix into the array and push or pop the index down.
I would get the OpenGL ES 2.0 programming guide if you need more help with transitioning to WebGL. The book's website here: http://opengles-book.com/ contains a download link to some source code with demos for a variety of platforms and languages including WebGL. It also contains a decent math library if you need it.
From what I see here and there, there is no native support but you can easily build such a stack with an Array.
I'm looking for a way to load a virtual human (ie; a model rigged with a skeleton, preferably with moving eyebrows/etc) onto a web page. The functionality should be similar to the dated library Haptek Player (http://www.youtube.com/watch?v=c2iIuiT3IW8), but allow for a transparent background. Ideally it would be in WebGL/O3D since it can be directly integrated with my existing code. However, if there's an implementation out there already in Flash3D or a different plugin, I can quickly switch my codebase to actionscript.
I've investigated trying to send the Haptek Player vertices to a Float32Array (used by WebGL) using an npapi plugin. I can place the vertex data into a javascript array and draw the virtual human. The vertex data cannot be changed, however, since the array must be copied to a typed array (Float32Array) to be used by WebGL.
Thanks for any input!
try http://expression.sourceforge.net/
C++ and OpenGL
you can experiment with converting the code to javascript using emscripten