I've read the "learning webgl" tutorial, but it does not explain everything. Something like google experiments with webgl are amazing, but I've been wondering... how do you move a 3D object along a custom path to swing into the scene or create a custom transition?
webgl -> opengl in web, so how do you do that in opengl?
what you're looking for is pretty common functionality, but it is hard to find concrete examples showing how to do it.
the easiest way i have found to do it is using Apple's J3DIMath.js webgl library.
you basically want to define a "camera" perspective matrix, then move the camera along a predefined path of vertices through your 3d space. as you move along the "track" of vertices, at each draw frame you can call the function J3DIMatrix4.lookat(), passing it the position vector along the path, the direction to look at, and the "up" direction, and it will create the appearance of a moving camera.
i hope this helps!
J3DIMath.js
Related
I am a newbie in both OpenGL as well as Three.js, I am working on a streaming based "on-line" viewer which uses websockets to transmit points (with surface normals) from one system application to a remote web interface. Long story short, I have modified BufferGeometry and use THREE.PointsMaterial to visualize incoming data with points.
Since I already am sending points locations [xyz], color [rgb] and normals [abc] so I would love to use technique such as surface-splatting Splatting. Unfortunately due to my limited knowledge and lack of internet resources can any one guide me to implement a very basic surface splatting technique using three.js?
Question: How to draw elliptical surfaces instead of points in three.js
Any help will be highly appreciated.
it would probably work using points if you compute the point-size per point such that the whole ellipsis fits in there and use the fragment-shader to compute the area of the ellipsis based on the viewing-angle (i suppose this is what you want to do, right?).
Alternatively, you can use instancing based on a simple quad and use instance-attributes for position and orientation of the quads. In this case, you just need to render a circle into each of the quads.
Does Three.JS have a function or capability of AI( Artificial intelligence )? Specifically let's say a FPS game. I want enemies to look for me and try to kill me, is it possible in three.js? Do they have a functionality or a system of such?
Webgl
create buffer
bind buffer
allocate data
set up state
issue draw call
run GLSL shaders
three.js
create a 3d context using WebGL
create 3 dimensional objects
create a scene graph
create primitives like spheres, cubes, toruses
move objects around, rotate them scale them
test for intersections between rays, triangles, planes, spheres, etc.
create 'materials' (rather than shaders)
javascript
write algorithms
I want enemies to look for me and try to kill me
Yes, three.js is capable of doing this, you just have to write an algorithm using three's classes. Your enemies would be 3d objects, casting rays, intersecting with other objects, etc.
You would be building a game engine, and you could use three.js as your rendering framework within that engine. Rendering is just one part of it. Think of a 2d shooter, you could make it using a 2d context, but you could also enhance it and make it 2.5d, by working with a 3d context. Everything else can stay the same.
any webgl engine that might have it ? or is it just not a webgl thing
Unity probably has everything you can possibly think of. Unity is capable of outputting WebGL, so it could be considered a 'webgl engine'.
Bablyon.js is more engine like.
Three Js is the best and most powerfull WebGL 3d engine that has no equal on the market , and its missing out on such an ability
Three.js isn't exactly a 3d engine. Wikipedia says:
Three.js is a lightweight cross-browser JavaScript library/API used to
create and display animated 3D computer graphics on a Web browser.
Three.js uses WebGL.
so if i need to just draw a car, or a spinning logo, i don't need them to come looking for me, or try to shoot me. I just need them to stay in one place, and rotate.
For a graphics demo you don't even need this - with a few draw instructions, you could render a full screen quad with a very elaborate pixel shader. Three gives you a ton of options, especially if you consider all the featured examples.
It works both ways, while you can expand three.js anyway you want, you can strip it down for just a very specific purpose.
If you need to build an app that needs to do image processing, and feature no '3d' graphics, you could still leverage webgl with three.js.
You don't need any vector, matrix, ray , geometry classes.
If you don't have vector3, you probably cant keep planeGeometry, but you would use bufferGeometry, and manually construct a plane. No transformations need to happen, so no need for matrix classes. You'd use shaders, and textures, and perhaps something like the EffectsComposer.
I’m afraid not. Three.js is just a engine for displaying 3d content.
Using it to create games only is one possibility. However few websites raise with pre-coded stuff like AI (among other things) to attract game creators, but using them is more restrictive than writing the exact code you need
Three.js itself doesn't however https://mugen87.github.io/yuka/ is a great AI engine that can work in collaboration with three to create AI.
They do a line if sight and a shooting game logic, as well as car logic which I've been playing around with recently, a React Three Fiber example here: https://codesandbox.io/s/loving-tdd-u1fs9o
I am working on a project where I am to use the Kinect to track facial expressions and animate a 3D model (.ply) accordingly.
So far I have managed to track a human face with a finite number of key-points on the face. I am able to get the coordinates of each key-point at every frame.
I am not very adept with animating techniques and general concepts of Mesh deformation and would really appreciate if one could provide a library which provides a high-level API so as to do said animation using x,y coordinates of key-points.
I am aware of CUBICA but unsure whether it can be used for what I want. Please excuse me as I am not very adept with this and would appreciate any help.
I too am looking for something that would do this (with .NET if possible), so I could hook Kinect up, set the position of each joint and see the character animate - without needing to set the position and angle of each bone which quickly gets very complex when you take into account the X,Y and Z positions.
So far my research has lead me to believe I will need a 3D engine that supports inverse kinematics - if anyone else had any better advice I'd be keen to hear it.
I have a photos that is taken by 360 degree lance now does anyone know how to create 360 degree photo viewer ?
please don't send the link of already developed softwares , it would be better if someone has
the road map / example code / articles.
Preferred Technologies Could be
Java/Flash/Flex/HTML 5 / javascript
Well I haven't done it myself yet but it basically boils down to projecting the photos you have to some camera surrounding primitive.
Easiest would be a cube but this will probably result in not so good results especially at the edges and corners. Better would be a sphere on which the images are projected.
But basically, adding 3D-primitives and mapping textures on it should easily be capable with Java or Flash. If you try to program it for browsers, have a look at WebGL. This would be a more future-oriented approach that doesn't need Flash... And it already provides good methods for texture mapping on surfaces.
If by 360° you only mean the horizontal plane you could also use a cylinder, which makes it much easier than projecting on spheres. You'll just need a wide panorama photo that goes around completely and map it to the cylinder.
So basically no matter which primitive you choose you'll need to position your camera within this primitive, project the photos to the primitive and implement some controls that allow the user to rotate the camera freely.
Can you provide any example photos? This would make it easier to find a way to solve your problem and find a good way of projecting the texture...
Hope that helps... if not, keep asking...
I want to convert mouse's current X and Y coordinates into the 3D space I have drawn in the viewport. I need to do this on the OpenGL ES platform. I found following possible solutions implemented in OpenGL, but none fits what I am looking for.
I found NeHe's tutorial on doing exactly this, but in traditional OpenGL way. It uses gluUnProject.
http://nehe.gamedev.net/data/articles/article.asp?article=13
Although gluUnProject is not available in OpenGL ES, its implementation seems simple enough to port back. But before calling it, we need to call glReadPixels with GL_DEPTH_COMPONENT and that is not possible in OpenGL ES. (The reason I found in this thread: http://www.khronos.org/message_boards/viewtopic.php?f=4&t=771)
What I want to do is similar to picking, except that I don't want to select the object but I want exact coordinates so that I can recognize particular portion of the object that is currently under mouse cursor. I went through the Picking tutorials in this answer.
https://stackoverflow.com/posts/2211312/revisions
But they need glRenderMode, which I believe is absent in OpenGL ES.
If you know how to solve this problem in OpenGL ES, please let me know.
Thanks.
I think the general solution is to figure out where in world space the clicked coordinate falls, assuming the screen is a plane in the world (at the camera's location). Then you shoot a ray perpendicular to the plane, into your scene.
This requires "world-space" code to figure out which object(s) the ray intersects with; the solutions you mention as being unsuitable for OpenGL ES seem to be image-based, i.e. depend on the pixels generated when rendering the scene.
With OpenGL ES 2.0 you could use a FBO and render the depth values to a texture. Obviously, this wouldn't be exactly cheap (just a way around the restriction of glReadPixels)...
Further, since - as I understand it - you want to pick certain parts of your object you might want to do some sort of color-picking where each selectable portion of the object has an unique color (note that the Lighthouse 3D tutorial only shows the general idea behind color-picking, your implementation would probably be different). You could optimize a little by performing a ray/bounding-box intersection beforehand and only rendering the relevant candidates to the texture used for picking.