I've been learning Playcanvas and on the examples, I see that I can achieve layer animation by masking the bones. My question is can I apply something similar on three.js?
this is the example:
https://playcanvas.github.io/#/animation/layer-masks
Thank you
Something like this is not supported in current three.js version (r141).
You can layer animations with via additive blending like demonstrated in the following example. However, the animations affect the entire skeleton and not specific bones.
https://threejs.org/examples/webgl_animation_skinning_additive_blending
Related
I have been trying to instance some tree meshes in react-three-fiber and threejs,
this is what i have got so far: https://codesandbox.io/s/silly-sunset-74wmt?file=/src/App.js
The trees from one angle look see through, I am able to see the barks of ALL trees.
but the behavior is normal from the opposite angle.
To me it seems to be some issue with render order or meshes or the shader, not able to wrap my head around it.
I need the see-through thing to not happen and the set should look like how it looks like in the second picture from all angles
As suggested in the comments byDon McCurdy. I needed to use AlphaClip property on blender while exporting my mesh.
Found an answer here which was quite helpful in understanding the problems with threejs transparency at play
Updated with the solution: https://codesandbox.io/s/silly-sunset-74wmt?file=/src/App.js
Trying to achieve this kind of effect, but not sure which direction to head to.
I have tried to use a Multi-side Refraction technique using shaders, but can’t really seem to achieve the effect. Is there a simpler approach by any chance?
What I’ll have is a plane in the background, using shaders to achieve the marquee effect. That’s all fine and working. However, I need that geometry to have some sort of frosted glass effect, and at the same time, distort the text in the background. Would using some sort of material on the geometry, and adding transparent, which some parameters work?
Hoping for some guidance
This effect (as opposed to simpler alpha blending transparency) is called "transmission", and the frosted part is called "transmission roughness". THREE.MeshPhysicalMaterial is the preferred way to do that in three.js, see these examples:
https://threejs.org/examples/?q=transmission#webgl_materials_physical_transmission
However, the material type does not yet support refraction, the distortion of the background shown above. three.js#21000 includes some discussion of supporting that in the future.
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've always found lighting and shading to be the most difficult part of WebGL / Three.js to get right – I feel like I'm making it up.
What combination of lighting and shading do you think I would need to achieve a similar look and feel to the following image? It's so soft and yet well-defined, whereas my attempts always come out harsh and haphazard.
http://threejs.org/examples/#webgl_shadowmap
http://threejs.org/examples/#webgl_morphtargets_horse
This examples use the same lightning effect, check out the Code.
I'm struggling with a visualization I'm working on that involves a stream of repeated images. I have it working with a single sprite with a ParticleSystem, but I can only apply a single material to the system. Since I want to choose between textures I tried creating a pool of Particle objects so that I could choose the materials individually, but I can't get an individual Particle to show up with the WebGL renderer.
This is my first foray into WebGL/Three.js, so I'm probably doing something bone-headed, but I thought it would be worth asking what the proper way to go about this is. I'm seeing three possibilities:
I'm using Particle wrong (initializing with a mapped material, adding to the scene, setting position) and I need to fix what I'm doing.
I need a ParticleSystem for each sprite I want to display.
What I'm doing doesn't fit into particles at all and I really should be using another object type.
All the examples I see using the canvas renderer use Particle directly, but I can't find an example using the WebGL renderer that doesn't use ParticleSystem. Any hints?
Ok, I am going from what I have read elsewhere on this github issues page. You should start by reading it. It seems that the Particle is simply for the Canvas Renderer, and it will become Sprite in a further edition of Three.JS. ParticleSystem, however is not going to fulfill your needs either it seems. I don't think these classes are going to help you accomplish this in WebGL in 3D. Depending on what you are doing you might be better off with the CanvasRenderer anyway. ParticleSystem will only allow you to apply a single material which will serve as the material for each particle in the system as you suggested.
Short answer:
You can render THREE.Particle using THREE.CanvasRenderer only.