Three.js glow effect renders differently on shapes
up vote
0
down vote
favorite
I am working on an animation that involves display of diamonds. I coded a shape that is good looking and i wanted to add a glow effect. Unfortunately my shaders knowledge is close to zero so i had to find some good tutorial. I was able to apply and modify found code but the result is quite bad. Found glow effect looks good on for example torus shape, but when i placed it on my diamonds it doesnt looks like glow at all. On torus shape you can see that its nicely fading while on diamond its just solid.
This is glow applied on torus:
While this is actual code with diamond in place:
let SCENE_WIDTH = window.innerWidth;
let SCENE_HEIGHT = window.innerHeight;
let FIELD_OF_VIEW = 45;
let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;
let NEAR = 0.1;
let FAR = 10000;
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x8d8d8d, 1);
renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);
document.getElementById('webgl-container').appendChild(renderer.domElement);
let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);
camera.position.set(-1, 1, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
let light = new THREE.PointLight(0xffffff, 0.8);
light.position.set(30, 100, 50);
scene.add(light);
var geometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.3, 0.7, 0.3, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.7, 0, 0.6, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
let material = new THREE.MeshPhongMaterial({color: 0x00ff00});
let object = new THREE.Mesh( geometry, material );
let glowMaterial = new THREE.ShaderMaterial({
uniforms: {
glowAlpha: {
type: "float",
value: 1
},
glowColor: {
type: "v3",
value: new THREE.Vector3(0, 1, 0)
},
viewVector: {
type: "v3",
value: camera.position
}
},
vertexShader: document.getElementById('vertexShaderSun').textContent,
fragmentShader: document.getElementById('fragmentShaderSun').textContent,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
var glowGeometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.4, 0.8, 0.4, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.8, 0, 0.7, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
let glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
object.add(glowMesh);
object.glow = glowMesh;
scene.add(object);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
function update () {
let viewVector = new THREE.Vector3().subVectors( camera.position, object.glow.getWorldPosition());
object.glow.material.uniforms.viewVector.value = viewVector;
renderer.render(scene, camera);
requestAnimationFrame(update);
}
requestAnimationFrame(update);#webgl-container {
position: absolute;
left: 0;
top: 0;
background-color: aqua;
}<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShaderSun" type="x-shader/x-vertex">
uniform vec3 viewVector;
varying float intensity;
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
vec3 actual_normal = vec3(modelMatrix * vec4(normal, 0.0));
intensity = pow( dot(normalize(viewVector), actual_normal), 6.0 );
}
</script>
<script id="fragmentShaderSun" type="x-shader/x-vertex">
uniform float glowAlpha;
uniform vec3 glowColor;
varying float intensity;
void main() {
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, glowAlpha );
}
</script>
<div id="webgl-container"></div>So as you can see this particular glow code appears to be different depending on shape it was used on. How could one modify the code to have good looking glow on a diamond (like the one on torus).
javascript three.js shapes fragment-shader vertex-shader
asked Nov 20 at 11:37
Mevia
351420
add a comment |
up vote
0
down vote
favorite
I am working on an animation that involves display of diamonds. I coded a shape that is good looking and i wanted to add a glow effect. Unfortunately my shaders knowledge is close to zero so i had to find some good tutorial. I was able to apply and modify found code but the result is quite bad. Found glow effect looks good on for example torus shape, but when i placed it on my diamonds it doesnt looks like glow at all. On torus shape you can see that its nicely fading while on diamond its just solid.
This is glow applied on torus:
While this is actual code with diamond in place:
let SCENE_WIDTH = window.innerWidth;
let SCENE_HEIGHT = window.innerHeight;
let FIELD_OF_VIEW = 45;
let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;
let NEAR = 0.1;
let FAR = 10000;
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x8d8d8d, 1);
renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);
document.getElementById('webgl-container').appendChild(renderer.domElement);
let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);
camera.position.set(-1, 1, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
let light = new THREE.PointLight(0xffffff, 0.8);
light.position.set(30, 100, 50);
scene.add(light);
var geometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.3, 0.7, 0.3, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.7, 0, 0.6, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
let material = new THREE.MeshPhongMaterial({color: 0x00ff00});
let object = new THREE.Mesh( geometry, material );
let glowMaterial = new THREE.ShaderMaterial({
uniforms: {
glowAlpha: {
type: "float",
value: 1
},
glowColor: {
type: "v3",
value: new THREE.Vector3(0, 1, 0)
},
viewVector: {
type: "v3",
value: camera.position
}
},
vertexShader: document.getElementById('vertexShaderSun').textContent,
fragmentShader: document.getElementById('fragmentShaderSun').textContent,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
var glowGeometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.4, 0.8, 0.4, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.8, 0, 0.7, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
let glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
object.add(glowMesh);
object.glow = glowMesh;
scene.add(object);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
function update () {
let viewVector = new THREE.Vector3().subVectors( camera.position, object.glow.getWorldPosition());
object.glow.material.uniforms.viewVector.value = viewVector;
renderer.render(scene, camera);
requestAnimationFrame(update);
}
requestAnimationFrame(update);#webgl-container {
position: absolute;
left: 0;
top: 0;
background-color: aqua;
}<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShaderSun" type="x-shader/x-vertex">
uniform vec3 viewVector;
varying float intensity;
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
vec3 actual_normal = vec3(modelMatrix * vec4(normal, 0.0));
intensity = pow( dot(normalize(viewVector), actual_normal), 6.0 );
}
</script>
<script id="fragmentShaderSun" type="x-shader/x-vertex">
uniform float glowAlpha;
uniform vec3 glowColor;
varying float intensity;
void main() {
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, glowAlpha );
}
</script>
<div id="webgl-container"></div>So as you can see this particular glow code appears to be different depending on shape it was used on. How could one modify the code to have good looking glow on a diamond (like the one on torus).
javascript three.js shapes fragment-shader vertex-shader
asked Nov 20 at 11:37
Mevia
351420
Have you looked into the 'postprocessing' npm module, which could be another option to consider? Check out the bloom demo here - vanruesc.github.io/postprocessing/public/demo/#bloom.
– danlong
Nov 20 at 11:46
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am working on an animation that involves display of diamonds. I coded a shape that is good looking and i wanted to add a glow effect. Unfortunately my shaders knowledge is close to zero so i had to find some good tutorial. I was able to apply and modify found code but the result is quite bad. Found glow effect looks good on for example torus shape, but when i placed it on my diamonds it doesnt looks like glow at all. On torus shape you can see that its nicely fading while on diamond its just solid.
This is glow applied on torus:
While this is actual code with diamond in place:
let SCENE_WIDTH = window.innerWidth;
let SCENE_HEIGHT = window.innerHeight;
let FIELD_OF_VIEW = 45;
let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;
let NEAR = 0.1;
let FAR = 10000;
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x8d8d8d, 1);
renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);
document.getElementById('webgl-container').appendChild(renderer.domElement);
let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);
camera.position.set(-1, 1, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
let light = new THREE.PointLight(0xffffff, 0.8);
light.position.set(30, 100, 50);
scene.add(light);
var geometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.3, 0.7, 0.3, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.7, 0, 0.6, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
let material = new THREE.MeshPhongMaterial({color: 0x00ff00});
let object = new THREE.Mesh( geometry, material );
let glowMaterial = new THREE.ShaderMaterial({
uniforms: {
glowAlpha: {
type: "float",
value: 1
},
glowColor: {
type: "v3",
value: new THREE.Vector3(0, 1, 0)
},
viewVector: {
type: "v3",
value: camera.position
}
},
vertexShader: document.getElementById('vertexShaderSun').textContent,
fragmentShader: document.getElementById('fragmentShaderSun').textContent,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
var glowGeometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.4, 0.8, 0.4, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.8, 0, 0.7, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
let glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
object.add(glowMesh);
object.glow = glowMesh;
scene.add(object);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
function update () {
let viewVector = new THREE.Vector3().subVectors( camera.position, object.glow.getWorldPosition());
object.glow.material.uniforms.viewVector.value = viewVector;
renderer.render(scene, camera);
requestAnimationFrame(update);
}
requestAnimationFrame(update);#webgl-container {
position: absolute;
left: 0;
top: 0;
background-color: aqua;
}<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShaderSun" type="x-shader/x-vertex">
uniform vec3 viewVector;
varying float intensity;
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
vec3 actual_normal = vec3(modelMatrix * vec4(normal, 0.0));
intensity = pow( dot(normalize(viewVector), actual_normal), 6.0 );
}
</script>
<script id="fragmentShaderSun" type="x-shader/x-vertex">
uniform float glowAlpha;
uniform vec3 glowColor;
varying float intensity;
void main() {
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, glowAlpha );
}
</script>
<div id="webgl-container"></div>So as you can see this particular glow code appears to be different depending on shape it was used on. How could one modify the code to have good looking glow on a diamond (like the one on torus).
javascript three.js shapes fragment-shader vertex-shader
asked Nov 20 at 11:37
Mevia
351420
I am working on an animation that involves display of diamonds. I coded a shape that is good looking and i wanted to add a glow effect. Unfortunately my shaders knowledge is close to zero so i had to find some good tutorial. I was able to apply and modify found code but the result is quite bad. Found glow effect looks good on for example torus shape, but when i placed it on my diamonds it doesnt looks like glow at all. On torus shape you can see that its nicely fading while on diamond its just solid.
This is glow applied on torus:
While this is actual code with diamond in place:
let SCENE_WIDTH = window.innerWidth;
let SCENE_HEIGHT = window.innerHeight;
let FIELD_OF_VIEW = 45;
let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;
let NEAR = 0.1;
let FAR = 10000;
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x8d8d8d, 1);
renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);
document.getElementById('webgl-container').appendChild(renderer.domElement);
let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);
camera.position.set(-1, 1, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
let light = new THREE.PointLight(0xffffff, 0.8);
light.position.set(30, 100, 50);
scene.add(light);
var geometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.3, 0.7, 0.3, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.7, 0, 0.6, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
let material = new THREE.MeshPhongMaterial({color: 0x00ff00});
let object = new THREE.Mesh( geometry, material );
let glowMaterial = new THREE.ShaderMaterial({
uniforms: {
glowAlpha: {
type: "float",
value: 1
},
glowColor: {
type: "v3",
value: new THREE.Vector3(0, 1, 0)
},
viewVector: {
type: "v3",
value: camera.position
}
},
vertexShader: document.getElementById('vertexShaderSun').textContent,
fragmentShader: document.getElementById('fragmentShaderSun').textContent,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
var glowGeometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.4, 0.8, 0.4, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.8, 0, 0.7, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
let glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
object.add(glowMesh);
object.glow = glowMesh;
scene.add(object);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
function update () {
let viewVector = new THREE.Vector3().subVectors( camera.position, object.glow.getWorldPosition());
object.glow.material.uniforms.viewVector.value = viewVector;
renderer.render(scene, camera);
requestAnimationFrame(update);
}
requestAnimationFrame(update);#webgl-container {
position: absolute;
left: 0;
top: 0;
background-color: aqua;
}<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShaderSun" type="x-shader/x-vertex">
uniform vec3 viewVector;
varying float intensity;
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
vec3 actual_normal = vec3(modelMatrix * vec4(normal, 0.0));
intensity = pow( dot(normalize(viewVector), actual_normal), 6.0 );
}
</script>
<script id="fragmentShaderSun" type="x-shader/x-vertex">
uniform float glowAlpha;
uniform vec3 glowColor;
varying float intensity;
void main() {
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, glowAlpha );
}
</script>
<div id="webgl-container"></div>So as you can see this particular glow code appears to be different depending on shape it was used on. How could one modify the code to have good looking glow on a diamond (like the one on torus).
let SCENE_WIDTH = window.innerWidth;
let SCENE_HEIGHT = window.innerHeight;
let FIELD_OF_VIEW = 45;
let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;
let NEAR = 0.1;
let FAR = 10000;
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x8d8d8d, 1);
renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);
document.getElementById('webgl-container').appendChild(renderer.domElement);
let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);
camera.position.set(-1, 1, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
let light = new THREE.PointLight(0xffffff, 0.8);
light.position.set(30, 100, 50);
scene.add(light);
var geometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.3, 0.7, 0.3, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.7, 0, 0.6, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
let material = new THREE.MeshPhongMaterial({color: 0x00ff00});
let object = new THREE.Mesh( geometry, material );
let glowMaterial = new THREE.ShaderMaterial({
uniforms: {
glowAlpha: {
type: "float",
value: 1
},
glowColor: {
type: "v3",
value: new THREE.Vector3(0, 1, 0)
},
viewVector: {
type: "v3",
value: camera.position
}
},
vertexShader: document.getElementById('vertexShaderSun').textContent,
fragmentShader: document.getElementById('fragmentShaderSun').textContent,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
var glowGeometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.4, 0.8, 0.4, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.8, 0, 0.7, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
let glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
object.add(glowMesh);
object.glow = glowMesh;
scene.add(object);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
function update () {
let viewVector = new THREE.Vector3().subVectors( camera.position, object.glow.getWorldPosition());
object.glow.material.uniforms.viewVector.value = viewVector;
renderer.render(scene, camera);
requestAnimationFrame(update);
}
requestAnimationFrame(update);#webgl-container {
position: absolute;
left: 0;
top: 0;
background-color: aqua;
}<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShaderSun" type="x-shader/x-vertex">
uniform vec3 viewVector;
varying float intensity;
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
vec3 actual_normal = vec3(modelMatrix * vec4(normal, 0.0));
intensity = pow( dot(normalize(viewVector), actual_normal), 6.0 );
}
</script>
<script id="fragmentShaderSun" type="x-shader/x-vertex">
uniform float glowAlpha;
uniform vec3 glowColor;
varying float intensity;
void main() {
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, glowAlpha );
}
</script>
<div id="webgl-container"></div>let SCENE_WIDTH = window.innerWidth;
let SCENE_HEIGHT = window.innerHeight;
let FIELD_OF_VIEW = 45;
let ASPECT = SCENE_WIDTH / SCENE_HEIGHT;
let NEAR = 0.1;
let FAR = 10000;
let scene = new THREE.Scene();
let renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0x8d8d8d, 1);
renderer.setSize(SCENE_WIDTH, SCENE_HEIGHT);
document.getElementById('webgl-container').appendChild(renderer.domElement);
let camera = new THREE.PerspectiveCamera(FIELD_OF_VIEW, ASPECT, NEAR, FAR);
camera.position.set(-1, 1, 1);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);
let light = new THREE.PointLight(0xffffff, 0.8);
light.position.set(30, 100, 50);
scene.add(light);
var geometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.3, 0.7, 0.3, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.7, 0, 0.6, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
geometry.merge(tmpGeometry, tmpMatrix);
let material = new THREE.MeshPhongMaterial({color: 0x00ff00});
let object = new THREE.Mesh( geometry, material );
let glowMaterial = new THREE.ShaderMaterial({
uniforms: {
glowAlpha: {
type: "float",
value: 1
},
glowColor: {
type: "v3",
value: new THREE.Vector3(0, 1, 0)
},
viewVector: {
type: "v3",
value: camera.position
}
},
vertexShader: document.getElementById('vertexShaderSun').textContent,
fragmentShader: document.getElementById('fragmentShaderSun').textContent,
side: THREE.FrontSide,
blending: THREE.AdditiveBlending,
transparent: true
});
var glowGeometry = new THREE.Geometry(),
tmpGeometry = new THREE.CylinderGeometry(0.4, 0.8, 0.4, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, +tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
var tmpGeometry = new THREE.CylinderGeometry(0.8, 0, 0.7, 6, 1, false),
tmpMatrix = new THREE.Matrix4().makeTranslation(0, -tmpGeometry.parameters.height/2, 0);
glowGeometry.merge(tmpGeometry, tmpMatrix);
let glowMesh = new THREE.Mesh(glowGeometry, glowMaterial);
object.add(glowMesh);
object.glow = glowMesh;
scene.add(object);
let controls = new THREE.OrbitControls(camera, renderer.domElement);
function update () {
let viewVector = new THREE.Vector3().subVectors( camera.position, object.glow.getWorldPosition());
object.glow.material.uniforms.viewVector.value = viewVector;
renderer.render(scene, camera);
requestAnimationFrame(update);
}
requestAnimationFrame(update);#webgl-container {
position: absolute;
left: 0;
top: 0;
background-color: aqua;
}<script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
<script id="vertexShaderSun" type="x-shader/x-vertex">
uniform vec3 viewVector;
varying float intensity;
void main() {
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
vec3 actual_normal = vec3(modelMatrix * vec4(normal, 0.0));
intensity = pow( dot(normalize(viewVector), actual_normal), 6.0 );
}
</script>
<script id="fragmentShaderSun" type="x-shader/x-vertex">
uniform float glowAlpha;
uniform vec3 glowColor;
varying float intensity;
void main() {
vec3 glow = glowColor * intensity;
gl_FragColor = vec4( glow, glowAlpha );
}
</script>
<div id="webgl-container"></div>javascript three.js shapes fragment-shader vertex-shader
javascript three.js shapes fragment-shader vertex-shader
asked Nov 20 at 11:37
Mevia
351420
asked Nov 20 at 11:37
Mevia
351420
asked Nov 20 at 11:37
Mevia
351420
asked Nov 20 at 11:37
Mevia
351420
asked Nov 20 at 11:37
Mevia
351420
351420
Have you looked into the 'postprocessing' npm module, which could be another option to consider? Check out the bloom demo here - vanruesc.github.io/postprocessing/public/demo/#bloom.
– danlong
Nov 20 at 11:46
add a comment |
Have you looked into the 'postprocessing' npm module, which could be another option to consider? Check out the bloom demo here - vanruesc.github.io/postprocessing/public/demo/#bloom.
– danlong
Nov 20 at 11:46
Have you looked into the 'postprocessing' npm module, which could be another option to consider? Check out the bloom demo here - vanruesc.github.io/postprocessing/public/demo/#bloom.
– danlong
Nov 20 at 11:46
Have you looked into the 'postprocessing' npm module, which could be another option to consider? Check out the bloom demo here - vanruesc.github.io/postprocessing/public/demo/#bloom.
– danlong
Nov 20 at 11:46
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392188%2fthree-js-glow-effect-renders-differently-on-shapes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53392188%2fthree-js-glow-effect-renders-differently-on-shapes%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Have you looked into the 'postprocessing' npm module, which could be another option to consider? Check out the bloom demo here - vanruesc.github.io/postprocessing/public/demo/#bloom.
– danlong
Nov 20 at 11:46