Selective Bloom in Three.js? - three.js

I am trying to make a Neon sign using three.js and I am using BloomPass and emmissive texture to create this effect. I am primarily following this example as I only want One of the models in my scene to glow. ((https://threejs.org/examples/webgl_postprocessing_unreal_bloom_selective.html))
The issue I am running in to is that this is occuring.
Some elements in my background model and my pacman glb model are glowing and the neon sign is barely glowing. When I tried to change the color of the neon sign or see any changes to it nothing happens. It also makes my scene super dark, it isn't generally this dark.
This is another example with higher exposure and settings 1: https://i.stack.imgur.com/KUPW9.jpg
An issue I was having before the exposure went really low is that the entire scene had the Bloom effect and was super blurry.
Based on other examples I have written the code with the intention of rendering everything in the scene black and then render the Neon scene with bloom then render everything back to original colors however, this is obviously not working.
Github
Don't worry about how messy the code is im just trying everything here lol
VERY IMPORTANT
I have the current code in the NeonSign.js file that is where I have been doing my post processing work. DO NOT use the code in postprocessing.js it is just for reference and is not correct and will not reproduce this error

Related

Cannot render objects in Blender

I am quite new to Blender and cannot figure out why the objects are not getting rendered. I have tried a lot of methods from various sites, but it didn't work for me, or maybe I missed some of it. I have enabled a white background for my animation, but upon rendering, I can only see a white image, this is due to the fact that the objects weren't rendered to even reach out to composite node.This is the link to my .blend file
At camera setting, you have too low Clip End distance.. And reduce sun strength, 1000 is pretty much, try 2.. :)

Parts of model are occluded strangely in OpenGL

I'm rendering a barrel object in Android with GLES20. The barrel is not rendered correctly and it's not clear to me where the problem is (texture? model? culling? depth?):
I've tried debugging with Google's debugger. The model can be rendered correctly in the debugger and the texture is also loaded correctly.
I have tried various parameters related to glFrontFace, glBlendFunc, GL_DEPTH_TEST and GL_CULL_FACE. But so far none of the combinations can render the barrel successfully.
Does anyone know what's wrong with this rendering?
PS: In the debugger GAPID, the depth buffer seem to be all black (Y=1.0). But I'm not sure if this is a issue with the debugger? I have enabled GL_DEPTH_TEST with GL_LEQUAL. I've also used setEGLConfigChooser(true).
Credit to #HolyBlackCat!
Both zNear and zFar need to be positive. The messed up perspective matrix produces this weired looking rendering.

Why is blender rigged animation distorted when exported as GLTF?

I created an animation in Blender with armature rigging. When I test it in Blender by pressing Alt-A, it works perfectly fine. However, when I export it as a .glb using the KhronosGroup GLTF exporter, the resulting animation is distorted (e.g., limbs are disconnected and moving in a weird way).
Why is this happening (and how can I fix it)?
For the past two days, I have been trying solutions from similar questions (such as applying location/rotation/scale with Ctrl-A, or deleting the Armature modifier on the mesh) but none of them have worked for me.
Links:
Here is a link to a screen-recording of what the animation should look like (this is me playing it in Blender):
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/correct-animation.mov
Here is a link to a screen-recording of what the animation actually looks like (this is me testing the exported .glb in the browser with Three.js):
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/distorted-animation.mov
Here is the .blend file:
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/soldier.blend
Here is the exported .glb file:
https://github.com/kylejlin/hosting-for-my-stackoverflow-questions/blob/master/soldier.glb
I looked at your setup a bit more.. I see you have a few IK bones that are partially driving the animation. Those won't translate correctly, and will have to have the IK baked into the animation. I also investigated the mirror modifier and realize the problem there.. to get the mirrored object to export, you have to click the "apply modifiers" checkbox, but that ALSO applies the Armature modifier, which distorts the mesh so you get the wrong mesh out. To fix that you have to apply the mirror modifier manually in blender, then export Without "apply modifiers" checked. Once you do that, and once you bake the IK into the animation, you might get it to work.
I've done the IK baking in the past but forget exactly how it works, but here's a starting point: https://blenderartists.org/t/bake-ik-to-fk/587226
fwiw Here is the .glb when I pre-applied the mirror modifier.. notice the arms animate correctly now, but the legs/feet are still screwy because of the IK. I didn't figure out how to bake that yet...
https://drive.google.com/open?id=1zeA-mMirOWYZHlzdURqNnykgh_g10kbr
Set Object's transformation values:0 before Rig.

Three.js Skeletal Animation Export Issue

I've been working with an animator to help with my game. The animations all work fine using morph targets, but the file size just gets way too large. Skeletal animations are the answer. We've spent a week working to get the animations exported from blender correctly.
After reading many many articles we were able to get basic animations working correctly. I make sure to set the armature to rest pose and export on the first frame and all that, but the more complicated animations are off.
You can see in this example here (click to cycle animations):
http://www.titansoftime.com/beta/animation2.html
My animator said the problems are related to bone constraints using his controllers. He said his technique is called "Inverse Kinematics".
Anyone have any ideas?
I have found the answer. For one you can not scale the geometry in the json loader (however you can scale the mesh object once created).
The main thing is that my animator was using inverse kinematics, which apparently three.js does not play nice with.

Three.js shadow map stripes in each light (now simplified, and with jsfiddle!)

I'm trying to create, modify and update (directional only for now) lights and shadowmaps dynamically. The light, shadow and shadow camera helper gets updated correctly as I move the light around or change shadow properties, except from the light's point of view, everything behind the origin (0,0,0) is shadowed for no apparent reason.
Screenshots:
http://i.imgur.com/n4AHvle.png
http://i.imgur.com/l0uaZHD.jpg
http://i.imgur.com/brKwCof.jpg
http://i.imgur.com/a6dqMGo.jpg (new, with spotlight)
You can see a scene with car and a piece of ground, they belong to a geometry imported with ColladaLoader. The problem is with shadowmapping, the car throws shadow correctly, but there are stripy shadows on the ground even though there is nothing else than the car obscuring light.
If I add more similar lights, they also have the same 4 stripes. They also appear with spotlight. If I change shadow map resolution, the stripes' size changes relative to each other, but there seems to be always four of them, spaced from center to both directions.
EDIT: JSFiddle here: http://jsfiddle.net/cL3hX/1/ There shouldn't be any shadows in the scene, unless some new geometry is introduced inside the shadow camera frustum.
Couple of notes on the fiddle:
I have r55, but the demo is r54 because jsfiddle apparently does not yet have r55.
I could only reproduce this with a Collada file. So it probably has something to do with the model. I created a simple cube in Sketchup 8, and tried to export it with various collada options.
In the JSFiddle I could only reproduce the bug with a file exported with "doublesided faces" -setting enabled. In my own application code, I do have the same bug on models created with or without that setting enabled, but in the fiddle, the bug seems to be triggered only when "doublesided faces" are exported. Anyway I do need to somehow show backsides of faces, because the tool I'm developing must work with Sketchup exports, and it's very hard to make models in Sketchup without having a mess of frontsides/backsides visible.
The very simple Collada file is included in the JSFiddle as javascript variable. Here's a download link for the same file: https://dl.dropbox.com/u/14489569/shadowmapdemo.dae
The problem is your Collada model.
Your "plane" is actually multiple coplanar faces back-to-back in a single geometry.
It's no wonder there are artifacts.
Replace it with a THREE.CubeGeometry.

Resources