I've searched all over the internet and didn't have much luck so... I was wondering this seemingly simple question: How do you add shadows to a custom shader?
Related
It might be me, as I'm not very experienced with Three.js, but the Three.js instancing example seems very vague.
I thought BufferGeometries were automatically created from Geometries in the new Three.js, and I don't understand why a shader is being added to the example.
The documentation says nothing about instancing. Searching up 'inst' in the Three.js docs already gives 0 results.
Is there someone who would give me a simple example?
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 create a THREE.PlaneGeometry with heights, in the highest point locate a THREE.PointLight, but this illuminates areas that are not seen from this point.
Why?
I want light from a point only the areas that are viewed from.
By default, the appearance of any given point on a surface is calculated using the lights, their properties and of course the material properties - it does not take the rest of the scene into account, as that would be very computationally expensive. Various ray tracing renderers do this, but they are really slow, and that's not how WebGL and Three.js work.
What you want is shadows. Three.js is capable of rendering shadows using Shadow Map method. There are various examples on using shadow maps both on the net and Three.js examples folder.
A word of warning though, getting shadows to work well can be hard if you don't have the basics down well - you may need to do some studying. Shadows can slow your application down (specially with many lighs) and look ugly if not properly configured and fine-tuned. Also I think shadow maps are only supported for SpotLight and DirectionalLight, PointLights are trickier.
Coming from ActionScript + Papervision I am familiar with "AS3DMod" a library that modifies 3D meshes to bend, twist,etc. Now I am working with THREE.js and found this:"#MOD3 As3dMod 3D Modifier Library port for Javascript and Three.js, Pre3d and J3D and Copperlicht" but the code is outmoded for any remotely current versions of THREE.js (and also is written for canvas rendering, NOT webGL). The creator has not been able to update. Does anyone know of any similar 3D libs that can "bend ,twist, bloat" 3D meshes in webGL? I am not sufficiently skilled to update this myself.
Thanks for any suggestions.
Not that I know of, but depending on what modifiers you are utilize, it may not be too difficult to write a modifier yourself. Typically you can reuse the logic in js for Canvas renderer, and as for WebGLRenderer, you can implement it in the Vertex shaders.
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.