I have used InstancedBufferGeometry to create a lot of box then update position with Perlin noise. But the mesh has cast and has received wrong shadow. How to calculate a right shadow?
vertexShader
attribute vec3 offset;
attribute vec4 orientation;
attribute vec3 color;
varying vec3 pos;
varying vec3 vNormal;
varying vec3 vWorldPosition;
varying vec3 vColor;
vec3 applyQuaternionToVector( vec4 q, vec3 v ){
return v + 2.0 * cross( q.xyz, cross( q.xyz, v ) + q.w * v );
}
THREE.ShaderChunk["common"]
THREE.ShaderChunk["shadowmap_pars_vertex"]
void main() {
vColor = color;
vec3 vPosition = applyQuaternionToVector( orientation, position );
pos = vPosition + offset;
vNormal = normalMatrix * vec3(normal + normalize(offset) * 0.3);
vec4 worldPosition = modelMatrix * vec4(pos, 1.0);
vWorldPosition = worldPosition.xyz;
gl_Position = projectionMatrix * modelViewMatrix * worldPosition;
THREE.ShaderChunk["shadowmap_vertex"]
}
fragmentShader
THREE.ShaderChunk['common']
THREE.ShaderChunk['packing']
varying vec3 pos;
varying vec3 vNormal;
varying vec3 vWorldPosition;
varying vec3 vColor;
uniform vec3 lightPosition;
THREE.ShaderChunk['shadowmap_pars_fragment']
void main() {
vec3 lightDirection = normalize(lightPosition + pos);
float c = max(0.0, dot(vNormal, lightDirection)) * 2.;
gl_FragColor = vec4(.3+c , .3+c , .3+c , 1.);
THREE.ShaderChunk['shadowmap_fragment']
}
demo link is here
three.js r.106
Thanks
var scene, camera, renderer;
var plane, temp, vnh, point;
var radius = 10;
var stats = new Stats();
var start = Date.now();
var options = {
scale: 200,
density: 2.5
}
var currentQ = new THREE.Quaternion();
var initedBoxes = false;
var init = function() {
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 25;
var controls = new THREE.OrbitControls(camera);
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild(renderer.domElement);
var gui = new dat.GUI({
width: 300
});
gui.add(options, 'scale').min(0).max(200).name('Scale');
gui.add(options, 'density').min(0).max(10).name('Density');
// stats
stats.showPanel(0);
stats.domElement.style.position = 'fixed';
stats.domElement.style.top = 0;
document.body.appendChild(stats.domElement);
initLights();
initSphere();
initBoxes();
renderer.setAnimationLoop(function() {
update();
render();
});
}
var initLights = function() {
var ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);
light1 = new THREE.SpotLight(0xffffff, 2, 200, 10);
light1.position.set(-30, 30, 40);
light1.castShadow = true;
scene.add(light1);
light1Helper = new THREE.SpotLightHelper(light1, 0xffffff);
scene.add(light1Helper);
}
var initSphere = function() {
var geometry = new THREE.IcosahedronGeometry(radius, 3);
var material = new THREE.MeshPhongMaterial({
color: 0x999999,
wireframe: false
});
material.shininess = 0;
sphere = new THREE.Mesh(geometry, material);
// sphere.castShadow = true;
// sphere.receiveShadow = true;
// scene.add(sphere);
tempGeo = new THREE.Geometry();
tempGeo.copy(geometry);
temp = new THREE.Mesh(tempGeo, material);
var pGeo = new THREE.PlaneGeometry(100, 100, 1, 1);
plane = new THREE.Mesh(pGeo, material);
plane.receiveShadow = true;
plane.position.y = -radius - 3;
plane.rotation.x = -90 * Math.PI / 180;
scene.add(plane);
}
var initBoxes = function() {
initedBoxes = true;
var bufferGeometry = new THREE.BoxBufferGeometry(1, 1, 1);
var geometry = new THREE.InstancedBufferGeometry();
geometry.index = bufferGeometry.index;
geometry.attributes.position = bufferGeometry.attributes.position;
// geometry.attributes.normal = bufferGeometry.attributes.normal;
// per instance data
var offsets = [];
var orientations = [];
var colors = [];
var vector = new THREE.Vector4();
var x, y, z, w;
var cscale = chroma.scale(['#ff0000', '#00ff00', '#0000ff']).classes(10);
for (var i = 0; i < sphere.geometry.faces.length; i++) {
center = getCenter(sphere.geometry.faces[i]);
x = center.x;
y = center.y;
z = center.z;
vector.set(x, y, z, 0).normalize();
offsets.push(x + vector.x, y + vector.y, z + vector.z);
// rotate
rotation = getRotation(sphere.geometry.faces[i].normal);
vector.copy(rotation).normalize();
orientations.push(vector.x, vector.y, vector.z, vector.w);
var color = chroma(cscale(THREE.Math.randFloat(0, 1))).brighten(1).hex();
color = new THREE.Color(color);
colors.push(color.r, color.g, color.b);
}
offsetAttribute = new THREE.InstancedBufferAttribute(new Float32Array(offsets), 3);
orientationAttribute = new THREE.InstancedBufferAttribute(new Float32Array(orientations), 4);
colorAttribute = new THREE.InstancedBufferAttribute(new Float32Array(colors), 3);
geometry.addAttribute('offset', offsetAttribute);
geometry.addAttribute('orientation', orientationAttribute);
geometry.addAttribute('color', colorAttribute);
var material = new THREE.ShaderMaterial({
lights: true,
uniforms: THREE.UniformsUtils.merge([
THREE.UniformsLib["shadowmap"],
THREE.UniformsLib["lights"],
{
lightPosition: {
type: 'v3',
value: light1.position
},
time: {
type: 'f',
value: 0
}
}
]),
vertexShader: [
'attribute vec3 offset;',
'attribute vec4 orientation;',
'attribute vec3 color;',
'varying vec3 pos;',
'varying vec3 vNormal;',
'varying vec3 vWorldPosition;',
'varying vec3 vColor;',
'vec3 applyQuaternionToVector( vec4 q, vec3 v ){',
'return v + 2.0 * cross( q.xyz, cross( q.xyz, v ) + q.w * v );',
'}',
THREE.ShaderChunk["common"],
THREE.ShaderChunk["shadowmap_pars_vertex"],
'void main() {',
'vColor = color;',
'vec3 vPosition = applyQuaternionToVector( orientation, position );',
'pos = vPosition + offset;',
'vNormal = normalMatrix * vec3(normal + normalize(offset) * 0.3);',
'vec4 worldPosition = modelMatrix * vec4(pos, 1.0);',
'vWorldPosition = worldPosition.xyz;',
'gl_Position = projectionMatrix * modelViewMatrix * worldPosition;',
THREE.ShaderChunk["shadowmap_vertex"],
'}'
].join('\n'),
fragmentShader: [
THREE.ShaderChunk['common'],
THREE.ShaderChunk['packing'],
'varying vec3 pos;',
'varying vec3 vNormal;',
'varying vec3 vWorldPosition;',
'varying vec3 vColor;',
'uniform vec3 lightPosition;',
THREE.ShaderChunk['shadowmap_pars_fragment'],
'void main() {',
'vec3 lightDirection = normalize(lightPosition + pos);',
'float c = max(0.0, dot(vNormal, lightDirection)) * 2.;',
// 'gl_FragColor = vec4(vColor.r + c , vColor.g + c , vColor.b + c , 1.);',
'gl_FragColor = vec4(.3+c , .3+c , .3+c , 1.);',
THREE.ShaderChunk['shadowmap_fragment'],
'}'
].join('\n')
});
boxes = new THREE.Mesh(geometry, material);
boxes.castShadow = true;
boxes.receiveShadow = true;
scene.add(boxes);
}
// find center position from 3 vertices
function getCenter(face) {
var centroid = new THREE.Vector3(0, 0, 0);
centroid.add(sphere.geometry.vertices[face.a]);
centroid.add(sphere.geometry.vertices[face.b]);
centroid.add(sphere.geometry.vertices[face.c]);
centroid.divideScalar(3);
return centroid;
}
function getRotation(normal) {
var planeVector1 = new THREE.Vector3(0, 1, 0);
var matrix1 = new THREE.Matrix4();
var quaternion = new THREE.Quaternion().setFromUnitVectors(planeVector1, normal);
var matrix = new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
var a = new THREE.Euler();
a.setFromRotationMatrix(matrix, 'XYZ')
// return a.toVector3();
return quaternion;
}
// noise.seed(Math.random());
var update = function() {
stats.update();
var timer = (Date.now() - start) * .0002;
// animate vertices of sphere with noise
for (var i = 0; i < sphere.geometry.vertices.length; i++) {
var p = sphere.geometry.vertices[i];
var tp = temp.geometry.vertices[i];
var n = noise.perlin3(tp.x / (10 - options.density) + timer, tp.y / (10 - options.density) + timer, tp.z / (10 - options.density) + timer) * options.scale;
// move vertices with noise
p.normalize().multiplyScalar(radius + n / 100);
}
sphere.geometry.verticesNeedUpdate = true;
sphere.geometry.normalsNeedUpdate = true;
sphere.geometry.computeVertexNormals();
sphere.geometry.computeFaceNormals();
// animate boxes
if (initedBoxes) {
for (var i = 0; i < sphere.geometry.faces.length; i++) {
center = getCenter(sphere.geometry.faces[i]);
x = center.x;
y = center.y;
z = center.z;
offsetAttribute.setXYZ(i, center.x, center.y, center.z);
rotation = getRotation(sphere.geometry.faces[i].normal);
currentQ.copy(rotation).normalize();
orientationAttribute.setXYZW(i, currentQ.x, currentQ.y, currentQ.z, currentQ.w);
}
offsetAttribute.needsUpdate = true;
orientationAttribute.needsUpdate = true;
}
}
var animate = function() {
draw();
}
var render = function() {
renderer.render(scene, camera);
}
init();
<html>
<head>
<title>Instanced buffer test</title>
<style>
* {
padding: 0px;
margin: 0px;
}
html,
body {
overflow: hidden;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min.js"></script>
<script src="https://josephg.github.io/noisejs/perlin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js"></script>
<script src="https://unpkg.com/three#0.85.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
</head>
<body>
</body>
</html>
If you want that the mesh casts proper shadow, it is not sufficient to use a ShaderMaterial for the .material property of the mesh.
The shadow of point lights depends on the .customDepthMaterial property. This means you've to write a shader (ShaderMaterial) which renders the object with the model transformations to the shadow map.
The shadow of the mesh is partially clipped by the near plane of the shadow camera.
Use a closer near plane (e.g. 0.1 rather than 0.5) by setting the .near property of the perspective shadow camera (light1.shadow.camera), to solve the issue:
light1 = new THREE.SpotLight( 0xffffff, 2, 200, 10 );
light1.position.set( -30, 30, 40 );
light1.castShadow = true;
light1.shadow.mapSize.x = 2048;
light1.shadow.mapSize.y = 2048;
light1.shadow.camera.near = 0.1;
scene.add(light1);
Further there are some issues in the shader. The statement
vec3 lightDirection = normalize(lightPosition + pos);
doesn't make any sense, because a direction is the vector from an point to another point, which is calculated by the (-)-operator (e.g. lightPosition - pos).
But that won't fix the issue, because lightPosition is a point in world space and pos is a point in model space.
You've to calculate the vector in view space, because in
float c = max(0.0, dot(vNormal, lightDirection)) * 2.;
vNormal is a vector in view space.
I recommend to calculate the light direction in the vertex shader (vLightDir) and to pass it to the fragment shader.
Calculate the direction in world space and transform it by the upper 3x3 of the view matrix (mat3(viewMatrix)):
vLightDir = mat3(viewMatrix) * (lightPosition - vWorldPosition);
Since worldPosition (as the name indicates) is is a position in world space, it has to be transformed by the viewMatrix rather than the modelViewMatrix:
gl_Position = projectionMatrix * viewMatrix * worldPosition;
Note, the modelViewMatrix transforms from object space to view space. The viewMatrix transforms from world space to view space. See also WebGLProgram .
Vertex shader:
vertexShader:
[
'attribute vec3 offset;',
'attribute vec4 orientation;',
'attribute vec3 color;',
'varying vec3 pos;',
'varying vec3 vNormal;',
'varying vec3 vWorldPosition;',
'varying vec3 vColor;',
'varying vec3 vLightDir;',
'uniform vec3 lightPosition;',
'vec3 applyQuaternionToVector( vec4 q, vec3 v ){',
'return v + 2.0 * cross( q.xyz, cross( q.xyz, v ) + q.w * v );',
'}',
THREE.ShaderChunk["common"],
THREE.ShaderChunk["shadowmap_pars_vertex"],
'void main() {',
'vColor = color;',
'vec3 vPosition = applyQuaternionToVector( orientation, position );',
'pos = vPosition + offset;',
'vNormal = normalMatrix * vec3(normal + normalize(offset) * 0.3);',
'vec4 worldPosition = modelMatrix * vec4(pos, 1.0);',
'vWorldPosition = worldPosition.xyz;',
'vLightDir = mat3(viewMatrix) * (lightPosition - vWorldPosition);',
'gl_Position = projectionMatrix * viewMatrix * worldPosition;',
THREE.ShaderChunk["shadowmap_vertex"],
'}'
].join('\n')
Fragmetn shader:
fragmentShader:
[
THREE.ShaderChunk['common'],
THREE.ShaderChunk['packing'],
'varying vec3 pos;',
'varying vec3 vNormal;',
'varying vec3 vWorldPosition;',
'varying vec3 vColor;',
'varying vec3 vLightDir;',
THREE.ShaderChunk['shadowmap_pars_fragment'],
'void main() {',
'vec3 lightDirection = normalize(vLightDir);',
'float c = max(0.0, dot(vNormal, lightDirection)) * 2.;',
// 'gl_FragColor = vec4(vColor.r + c , vColor.g + c , vColor.b + c , 1.);',
'gl_FragColor = vec4(.3+c , .3+c , .3+c , 1.);',
THREE.ShaderChunk['shadowmap_fragment'],
'}'
].join('\n')
var scene,camera,renderer;
var plane, temp, vnh, point;
var radius = 10;
var stats = new Stats();
var start = Date.now();
var options = {
scale:200,
density:2.5
}
var currentQ = new THREE.Quaternion();
var initedBoxes = false;
var init = function(){
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 25;
var controls = new THREE.OrbitControls( camera );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
document.body.appendChild( renderer.domElement );
window.onresize = function() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
}
var gui = new dat.GUI({width: 300});
gui.add(options,'scale').min(0).max(200).name('Scale');
gui.add(options,'density').min(0).max(10).name('Density');
// stats
stats.showPanel(0);
stats.domElement.style.position = 'fixed';
stats.domElement.style.top = 0;
document.body.appendChild( stats.domElement );
initLights();
initSphere();
initBoxes();
renderer.setAnimationLoop(function(){
update();
render();
});
}
var initLights = function(){
var ambientLight = new THREE.AmbientLight( 0x555555 );
scene.add( ambientLight );
light1 = new THREE.SpotLight( 0xffffff, 2, 200, 10 );
light1.position.set( -30, 30, 40 );
light1.castShadow = true;
light1.shadow.mapSize.x = 2048;
light1.shadow.mapSize.y = 2048;
light1.shadow.camera.near = 0.1;
scene.add(light1);
light1Helper = new THREE.SpotLightHelper(light1, 0xffffff);
scene.add(light1Helper);
}
var initSphere = function(){
var geometry = new THREE.IcosahedronGeometry( radius, 3 );
var material = new THREE.MeshPhongMaterial( {color: 0x999999, wireframe:false} );
// var material = new THREE.ShaderMaterial({
// vertexShader: document.getElementById('vertexShader').innerHTML,
// fragmentShader: document.getElementById('fragmentShader').innerHTML
// });
material.shininess = 0;
sphere = new THREE.Mesh( geometry, material );
sphere.castShadow = true;
sphere.receiveShadow = true;
// scene.add(sphere);
tempGeo = new THREE.Geometry();
tempGeo.copy(geometry);
temp = new THREE.Mesh( tempGeo, material );
var pGeo = new THREE.PlaneGeometry(200, 200, 1, 1);
plane = new THREE.Mesh( pGeo, material );
plane.receiveShadow = true;
plane.position.y = -radius - 10;
plane.rotation.x = -90 * Math.PI/180;
scene.add(plane);
}
var initBoxes = function(){
initedBoxes = true;
var bufferGeometry = new THREE.BoxBufferGeometry(1,1,1);
var geometry = new THREE.InstancedBufferGeometry();
geometry.index = bufferGeometry.index;
geometry.attributes.position = bufferGeometry.attributes.position;
// geometry.attributes.normal = bufferGeometry.attributes.normal;
// per instance data
var offsets = [];
var orientations = [];
var colors = [];
var vector = new THREE.Vector4();
var x, y, z, w;
var cscale = chroma.scale(['#ff0000','#00ff00','#0000ff']).classes(10);
for(var i=0; i<sphere.geometry.faces.length; i++){
center = getCenter(sphere.geometry.faces[i]);
x = center.x;
y = center.y;
z = center.z;
vector.set( x, y, z, 0 ).normalize();
offsets.push( x + vector.x, y + vector.y, z + vector.z );
// rotate
rotation = getRotation(sphere.geometry.faces[i].normal);
vector.copy(rotation).normalize();
orientations.push( vector.x, vector.y, vector.z, vector.w );
var color = chroma(cscale(THREE.Math.randFloat(0,1))).brighten(1).hex();
color = new THREE.Color(color);
colors.push(color.r, color.g, color.b);
}
offsetAttribute = new THREE.InstancedBufferAttribute( new Float32Array( offsets ), 3 );
orientationAttribute = new THREE.InstancedBufferAttribute( new Float32Array( orientations ), 4 );
colorAttribute = new THREE.InstancedBufferAttribute( new Float32Array( colors ), 3 );
geometry.addAttribute( 'offset', offsetAttribute );
geometry.addAttribute( 'orientation', orientationAttribute );
geometry.addAttribute( 'color', colorAttribute );
var material = new THREE.ShaderMaterial( {
lights: true,
uniforms: THREE.UniformsUtils.merge([
// THREE.UniformsLib["shadowmap"],
THREE.UniformsLib["lights"],
{
lightPosition: {type: 'v3', value: light1.position},
time: {type: 'f', value: 0}
}
]),
vertexShader:
[
'attribute vec3 offset;',
'attribute vec4 orientation;',
'attribute vec3 color;',
'varying vec3 pos;',
'varying vec3 vNormal;',
'varying vec3 vWorldPosition;',
'varying vec3 vColor;',
'varying vec3 vLightDir;',
'uniform vec3 lightPosition;',
'vec3 applyQuaternionToVector( vec4 q, vec3 v ){',
'return v + 2.0 * cross( q.xyz, cross( q.xyz, v ) + q.w * v );',
'}',
THREE.ShaderChunk["common"],
THREE.ShaderChunk["shadowmap_pars_vertex"],
'void main() {',
'vColor = color;',
'vec3 vPosition = applyQuaternionToVector( orientation, position );',
'pos = vPosition + offset;',
'vNormal = normalMatrix * vec3(normal + normalize(offset) * 0.3);',
'vec4 worldPosition = modelMatrix * vec4(pos, 1.0);',
'vWorldPosition = worldPosition.xyz;',
'vLightDir = mat3(viewMatrix) * (lightPosition - vWorldPosition);',
'gl_Position = projectionMatrix * viewMatrix * worldPosition;',
THREE.ShaderChunk["shadowmap_vertex"],
'}'
].join('\n')
,
fragmentShader:
[
THREE.ShaderChunk['common'],
THREE.ShaderChunk['packing'],
'varying vec3 pos;',
'varying vec3 vNormal;',
'varying vec3 vWorldPosition;',
'varying vec3 vColor;',
'varying vec3 vLightDir;',
THREE.ShaderChunk['shadowmap_pars_fragment'],
'void main() {',
'vec3 lightDirection = normalize(vLightDir);',
'float c = max(0.0, dot(vNormal, lightDirection)) * 2.;',
// 'gl_FragColor = vec4(vColor.r + c , vColor.g + c , vColor.b + c , 1.);',
'gl_FragColor = vec4(.3+c , .3+c , .3+c , 1.);',
THREE.ShaderChunk['shadowmap_fragment'],
'}'
].join('\n')
});
boxes = new THREE.Mesh( geometry, material );
boxes.castShadow = true;
boxes.receiveShadow = true;
boxes.customDepthMaterial = new THREE.ShaderMaterial({
vertexShader:
[
'attribute vec3 offset;',
'attribute vec4 orientation;',
'varying vec3 vWorldPosition;',
'vec3 applyQuaternionToVector( vec4 q, vec3 v ){',
'return v + 2.0 * cross( q.xyz, cross( q.xyz, v ) + q.w * v );',
'}',
'void main() {',
'vec3 vPosition = applyQuaternionToVector( orientation, position );',
'vec3 pos = vPosition + offset;',
'vec4 worldPosition = modelMatrix * vec4(pos, 1.0);',
'vWorldPosition = worldPosition.xyz;',
'gl_Position = projectionMatrix * viewMatrix * worldPosition;',
'}',
].join('\n')
,
fragmentShader: THREE.ShaderLib.distanceRGBA.fragmentShader,
uniforms: material.uniforms
});
scene.add(boxes);
}
// find center position from 3 vertices
function getCenter(face){
var centroid = new THREE.Vector3(0,0,0);
centroid.add(sphere.geometry.vertices[face.a]);
centroid.add(sphere.geometry.vertices[face.b]);
centroid.add(sphere.geometry.vertices[face.c]);
centroid.divideScalar(3);
return centroid;
}
function getRotation(normal){
var planeVector1 = new THREE.Vector3(0,1,0);
var matrix1 = new THREE.Matrix4();
var quaternion = new THREE.Quaternion().setFromUnitVectors(planeVector1, normal);
var matrix = new THREE.Matrix4().makeRotationFromQuaternion(quaternion);
var a = new THREE.Euler( );
a.setFromRotationMatrix ( matrix, 'XYZ' )
// return a.toVector3();
return quaternion;
}
// noise.seed(Math.random());
var update = function(){
stats.update();
var timer = (Date.now() - start) * .0002;
// animate vertices of sphere with noise
for(var i=0; i<sphere.geometry.vertices.length; i++){
var p = sphere.geometry.vertices[i];
var tp = temp.geometry.vertices[i];
var n = noise.perlin3(tp.x / (10-options.density) + timer, tp.y / (10-options.density) + timer, tp.z / (10-options.density) + timer) * options.scale;
// move vertices with noise
p.normalize().multiplyScalar(radius + n/100);
}
sphere.geometry.verticesNeedUpdate = true;
sphere.geometry.normalsNeedUpdate = true;
sphere.geometry.computeVertexNormals();
sphere.geometry.computeFaceNormals();
// animate boxes
if(initedBoxes){
for(var i=0; i<sphere.geometry.faces.length; i++){
center = getCenter(sphere.geometry.faces[i]);
x = center.x;
y = center.y;
z = center.z;
offsetAttribute.setXYZ(i, center.x, center.y, center.z);
rotation = getRotation(sphere.geometry.faces[i].normal);
currentQ.copy(rotation).normalize();
orientationAttribute.setXYZW( i, currentQ.x, currentQ.y, currentQ.z, currentQ.w );
}
offsetAttribute.needsUpdate = true;
orientationAttribute.needsUpdate = true;
}
}
var animate = function(){
draw();
}
var render = function(){
renderer.render( scene, camera );
}
init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min.js"></script>
<script src="https://josephg.github.io/noisejs/perlin.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/2.0.3/chroma.min.js"></script>
<script src="https://unpkg.com/three#0.85.0/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
Related
I have a sphere lit by a DirectionalLight to mimic the sun shining on the earth. I am trying to add a shader that will show the earth at night on the unlit parts of the globe, and the earth during the day for the lit parts. I'm planning on eventually having the DirectionalLight rotate around the globe, updating the shader to show the parts of the earth that are currently in shadow. I came across the following codepen that partially does what I want: https://codepen.io/acauamontiel/pen/yvJoVv
In the codepen above, the day/night textures shown are based on the camera's position in relation to the globe, and I need those to stay fixed relative to the light source's position, rather than the camera's.
constructor(selector) {
this.selector = selector;
this.width = window.innerWidth;
this.height = window.innerHeight;
this.frameEvent = new Event('frame');
this.textureLoader = new THREE.TextureLoader();
}
setScene() {
this.scene = new THREE.Scene();
this.scenary = new THREE.Object3D;
this.scene.add(this.scenary);
}
setCamera() {
this.camera = new THREE.PerspectiveCamera(50, this.width/this.height, 1, 20000);
this.camera.position.y = 25;
this.camera.position.z = 300;
}
setRenderer() {
this.renderer = new THREE.WebGLRenderer({
antialias: true
});
this.renderer.setSize(this.width, this.height);
this.canvas = document.querySelector(this.selector).appendChild(this.renderer.domElement);
}
setControls() {
this.controls = new THREE.OrbitControls(this.camera, this.canvas);
this.controls.maxDistance = 500;
this.controls.minDistance = 200;
}
addHelpers() {
this.axes = new THREE.AxesHelper(500);
this.scenary.add(this.axes);
}
addLights() {
this.ambientLight = new THREE.AmbientLight(0x555555);
this.directionalLight = new THREE.DirectionalLight(0xffffff);
this.directionalLight.position.set(10, 0, 10).normalize();
this.scenary.add(this.ambientLight);
this.scenary.add(this.directionalLight);
}
render() {
this.renderer.render(this.scene, this.camera);
this.canvas.dispatchEvent(this.frameEvent);
this.frameRequest = window.requestAnimationFrame(this.render.bind(this));
}
destroy() {
window.cancelAnimationFrame(this.frameRequest);
this.scene.children = [];
this.canvas.remove();
}
addSky() {
let radius = 400,
segments = 50;
this.skyGeometry = new THREE.SphereGeometry(radius, segments, segments);
this.skyMaterial = new THREE.MeshPhongMaterial({
color: 0x666666,
side: THREE.BackSide,
shininess: 0
});
this.sky = new THREE.Mesh(this.skyGeometry, this.skyMaterial);
this.scenary.add(this.sky);
this.loadSkyTextures();
}
loadSkyTextures() {
this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/sky-texture.jpg', texture => {
this.skyMaterial.map = texture;
this.skyMaterial.needsUpdate = true;
});
}
addEarth() {
let radius = 100,
segments = 50;
this.earthGeometry = new THREE.SphereGeometry(radius, segments, segments);
this.earthMaterial = new THREE.ShaderMaterial({
bumpScale: 5,
specular: new THREE.Color(0x333333),
shininess: 50,
uniforms: {
sunDirection: {
value: new THREE.Vector3(1, 1, .5)
},
dayTexture: {
value: this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-texture.jpg')
},
nightTexture: {
value: this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-night.jpg')
}
},
vertexShader: this.dayNightShader.vertex,
fragmentShader: this.dayNightShader.fragment
});
this.earth = new THREE.Mesh(this.earthGeometry, this.earthMaterial);
this.scenary.add(this.earth);
this.loadEarthTextures();
this.addAtmosphere();
}
loadEarthTextures() {
this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-texture.jpg', texture => {
this.earthMaterial.map = texture;
this.earthMaterial.needsUpdate = true;
});
this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-bump.jpg', texture => {
this.earthMaterial.bumpMap = texture;
this.earthMaterial.needsUpdate = true;
});
this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-specular.jpg', texture => {
this.earthMaterial.specularMap = texture;
this.earthMaterial.needsUpdate = true;
});
}
addAtmosphere() {
this.innerAtmosphereGeometry = this.earthGeometry.clone();
this.innerAtmosphereMaterial = THREEx.createAtmosphereMaterial();
this.innerAtmosphereMaterial.uniforms.glowColor.value.set(0x88ffff);
this.innerAtmosphereMaterial.uniforms.coeficient.value = 1;
this.innerAtmosphereMaterial.uniforms.power.value = 5;
this.innerAtmosphere = new THREE.Mesh(this.innerAtmosphereGeometry, this.innerAtmosphereMaterial);
this.innerAtmosphere.scale.multiplyScalar(1.008);
this.outerAtmosphereGeometry = this.earthGeometry.clone();
this.outerAtmosphereMaterial = THREEx.createAtmosphereMaterial();
this.outerAtmosphereMaterial.side = THREE.BackSide;
this.outerAtmosphereMaterial.uniforms.glowColor.value.set(0x0088ff);
this.outerAtmosphereMaterial.uniforms.coeficient.value = .68;
this.outerAtmosphereMaterial.uniforms.power.value = 10;
this.outerAtmosphere = new THREE.Mesh(this.outerAtmosphereGeometry, this.outerAtmosphereMaterial);
this.outerAtmosphere.scale.multiplyScalar(1.06);
this.earth.add(this.innerAtmosphere);
this.earth.add(this.outerAtmosphere);
}
get dayNightShader() {
return {
vertex: `
varying vec2 vUv;
varying vec3 vNormal;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
vNormal = normalMatrix * normal;
gl_Position = projectionMatrix * mvPosition;
}
`,
fragment: `
uniform sampler2D dayTexture;
uniform sampler2D nightTexture;
uniform vec3 sunDirection;
varying vec2 vUv;
varying vec3 vNormal;
void main(void) {
vec3 dayColor = texture2D(dayTexture, vUv).rgb;
vec3 nightColor = texture2D(nightTexture, vUv).rgb;
float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);
cosineAngleSunToNormal = clamp(cosineAngleSunToNormal * 5.0, -1.0, 1.0);
float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;
vec3 color = mix(nightColor, dayColor, mixAmount);
gl_FragColor = vec4(color, 1.0);
}
`
}
}
animate() {
this.canvas.addEventListener('frame', () => {
this.scenary.rotation.x += 0.0001;
this.scenary.rotation.y -= 0.0005;
});
}
init() {
this.setScene();
this.setCamera();
this.setRenderer();
this.setControls();
this.addLights();
this.render();
this.addSky();
this.addEarth();
this.animate();
}
}
let canvas = new Canvas('#canvas');
canvas.init();
From what I can tell, it looks like the shader is being updated by the camera inside of get dayNightShader(). It looks like the modelViewMatrix, projectionMatrix, and normalMatrix are all based on the camera based on what I could find in the documentation for three.js, and I've tried changing these to a fixed vector position, but the only thing I've seen it do is hide the globe and show the atmosphere texture. Is there a way to use the light source's position to determine what the shader shows, rather than the camera?
The issue is the line
float cosineAngleSunToNormal = dot(normalize(vNormal), sunDirection);
in the fragment shader.
vNormal is a direction in view space, because it is transformed by the normalMatrix in the vertex shader, but sunDirection is a world space direction.
To solve the issue you've to transform the sun light direction by the view matrix in the vertex shader and to pass the transformed direction vector to the fragment shader.
vSunDir = mat3(viewMatrix) * sunDirection;
Note, the viewMatrix transforms from world space to view space. It is important to use the viewMatrix rather than the normalMatrix, because the normalMatrix transforms from model space to world space.
Vertex shader:
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vSunDir;
uniform vec3 sunDirection;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
vNormal = normalMatrix * normal;
vSunDir = mat3(viewMatrix) * sunDirection;
gl_Position = projectionMatrix * mvPosition;
}
Fragment shader:
uniform sampler2D dayTexture;
uniform sampler2D nightTexture;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vSunDir;
void main(void) {
vec3 dayColor = texture2D(dayTexture, vUv).rgb;
vec3 nightColor = texture2D(nightTexture, vUv).rgb;
float cosineAngleSunToNormal = dot(normalize(vNormal), normalize(vSunDir));
cosineAngleSunToNormal = clamp(cosineAngleSunToNormal * 5.0, -1.0, 1.0);
float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;
vec3 color = mix(nightColor, dayColor, mixAmount);
gl_FragColor = vec4(color, 1.0);
}
class Canvas {
constructor(selector) {
this.selector = selector;
this.width = window.innerWidth;
this.height = window.innerHeight;
this.frameEvent = new Event('frame');
this.textureLoader = new THREE.TextureLoader();
}
setScene() {
this.scene = new THREE.Scene();
this.scenary = new THREE.Object3D;
this.scene.add(this.scenary);
}
setCamera() {
this.camera = new THREE.PerspectiveCamera(50, this.width/this.height, 1, 20000);
this.camera.position.y = 25;
this.camera.position.z = 300;
}
setRenderer() {
this.renderer = new THREE.WebGLRenderer({
antialias: true
});
this.renderer.setSize(this.width, this.height);
var container = document.getElementById(this.selector);
this.canvas = container.appendChild(this.renderer.domElement);
//this.canvas = document.querySelector(this.selector).appendChild(this.renderer.domElement);
}
setControls() {
this.controls = new THREE.OrbitControls(this.camera, this.canvas);
this.controls.maxDistance = 500;
this.controls.minDistance = 200;
}
addHelpers() {
this.axes = new THREE.AxesHelper(500);
this.scenary.add(this.axes);
}
addLights() {
this.ambientLight = new THREE.AmbientLight(0x555555);
this.directionalLight = new THREE.DirectionalLight(0xffffff);
this.directionalLight.position.set(10, 0, 10).normalize();
this.scenary.add(this.ambientLight);
this.scenary.add(this.directionalLight);
}
render() {
this.renderer.render(this.scene, this.camera);
this.canvas.dispatchEvent(this.frameEvent);
this.frameRequest = window.requestAnimationFrame(this.render.bind(this));
}
destroy() {
window.cancelAnimationFrame(this.frameRequest);
this.scene.children = [];
this.canvas.remove();
}
addSky() {
let radius = 400,
segments = 50;
this.skyGeometry = new THREE.SphereGeometry(radius, segments, segments);
this.skyMaterial = new THREE.MeshPhongMaterial({
color: 0x666666,
side: THREE.BackSide,
shininess: 0
});
this.sky = new THREE.Mesh(this.skyGeometry, this.skyMaterial);
this.scenary.add(this.sky);
this.loadSkyTextures();
}
loadSkyTextures() {
this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/sky-texture.jpg', texture => {
this.skyMaterial.map = texture;
this.skyMaterial.needsUpdate = true;
});
}
addEarth() {
let radius = 100,
segments = 50;
this.earthGeometry = new THREE.SphereGeometry(radius, segments, segments);
this.earthMaterial = new THREE.ShaderMaterial({
bumpScale: 5,
specular: new THREE.Color(0x333333),
shininess: 50,
uniforms: {
sunDirection: {
value: new THREE.Vector3(1, 1, .5)
},
dayTexture: {
value: this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-texture.jpg')
},
nightTexture: {
value: this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-night.jpg')
}
},
vertexShader: this.dayNightShader.vertex,
fragmentShader: this.dayNightShader.fragment
});
this.earth = new THREE.Mesh(this.earthGeometry, this.earthMaterial);
this.scenary.add(this.earth);
this.loadEarthTextures();
this.addAtmosphere();
}
loadEarthTextures() {
this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-texture.jpg', texture => {
this.earthMaterial.map = texture;
this.earthMaterial.needsUpdate = true;
});
this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-bump.jpg', texture => {
this.earthMaterial.bumpMap = texture;
this.earthMaterial.needsUpdate = true;
});
this.textureLoader.load('https://acaua.gitlab.io/webgl-with-threejs/img/textures/earth/earth-specular.jpg', texture => {
this.earthMaterial.specularMap = texture;
this.earthMaterial.needsUpdate = true;
});
}
addAtmosphere() {
/*
this.innerAtmosphereGeometry = this.earthGeometry.clone();
this.innerAtmosphereMaterial = THREEx.createAtmosphereMaterial();
this.innerAtmosphereMaterial.uniforms.glowColor.value.set(0x88ffff);
this.innerAtmosphereMaterial.uniforms.coeficient.value = 1;
this.innerAtmosphereMaterial.uniforms.power.value = 5;
this.innerAtmosphere = new THREE.Mesh(this.innerAtmosphereGeometry, this.innerAtmosphereMaterial);
this.innerAtmosphere.scale.multiplyScalar(1.008);
this.outerAtmosphereGeometry = this.earthGeometry.clone();
this.outerAtmosphereMaterial = THREEx.createAtmosphereMaterial();
this.outerAtmosphereMaterial.side = THREE.BackSide;
this.outerAtmosphereMaterial.uniforms.glowColor.value.set(0x0088ff);
this.outerAtmosphereMaterial.uniforms.coeficient.value = .68;
this.outerAtmosphereMaterial.uniforms.power.value = 10;
this.outerAtmosphere = new THREE.Mesh(this.outerAtmosphereGeometry, this.outerAtmosphereMaterial);
this.outerAtmosphere.scale.multiplyScalar(1.06);
this.earth.add(this.innerAtmosphere);
this.earth.add(this.outerAtmosphere);
*/
}
get dayNightShader() {
return {
vertex: `
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vSunDir;
uniform vec3 sunDirection;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.0);
vNormal = normalMatrix * normal;
vSunDir = mat3(viewMatrix) * sunDirection;
gl_Position = projectionMatrix * mvPosition;
}
`,
fragment: `
uniform sampler2D dayTexture;
uniform sampler2D nightTexture;
varying vec2 vUv;
varying vec3 vNormal;
varying vec3 vSunDir;
void main(void) {
vec3 dayColor = texture2D(dayTexture, vUv).rgb;
vec3 nightColor = texture2D(nightTexture, vUv).rgb;
float cosineAngleSunToNormal = dot(normalize(vNormal), normalize(vSunDir));
cosineAngleSunToNormal = clamp(cosineAngleSunToNormal * 5.0, -1.0, 1.0);
float mixAmount = cosineAngleSunToNormal * 0.5 + 0.5;
vec3 color = mix(nightColor, dayColor, mixAmount);
gl_FragColor = vec4(color, 1.0);
}
`
}
}
animate() {
this.canvas.addEventListener('frame', () => {
this.scenary.rotation.x += 0.0001;
this.scenary.rotation.y -= 0.0005;
});
}
init() {
this.setScene();
this.setCamera();
this.setRenderer();
this.setControls();
this.addLights();
this.render();
this.addSky();
this.addEarth();
this.animate();
}
}
let canvas = new Canvas('container');
canvas.init();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/106/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="container"></div>
I'm using the uv output of threejs's torus to create moving lines across the torus. It works, but doesn't look crisp.
How can I improve the line quality?
I've tried making the material two-sided, and increasing the width of the lines, but the quality isn't improving much.
I haven't tried completely reproducing the torus outside of threejs, but that's out of my comfort zone.
I'm hoping there's way to change the logic of the fragment shader to produce clearer lines. I'd be greatful for any suggestions.
Codepen
/* Scene Initialization */
var startTime = Date.now();
var scene = new THREE.Scene();
var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById('canvas');
var camera = new THREE.PerspectiveCamera(75, 1, 1, 1200);
// var camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 1200 );
camera.position.set(0, -420, 600);
camera.lookAt(new THREE.Vector3(0, 0, 0));
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth * .2, window.innerWidth * .2);
renderer.setClearColor( 0xffffff, 1);
canvas.appendChild(renderer.domElement);
var geometry = new THREE.TorusGeometry(200, 200, 260, 260);
material = new THREE.ShaderMaterial( {
uniforms: {time: { type: "f", value: Date.now() - startTime}, },
vertexShader: `attribute vec3 center;
varying vec3 vCenter;
varying vec2 vUv;
void main() {
vCenter = center;
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`,
fragmentShader: `varying vec3 vCenter;
varying vec2 vUv;
uniform float time;
uniform sampler2D tDiffuse;
void main() {
float sh = 0.005;
float PI = 3.1415926535897932384626433832795;
// float linesX = mod(time + vUv.x, 0.03);
float linesX = sin((time + vUv.x) * PI * 30.)/30.;
// float linesY = mod(time + vUv.y, 0.05);
float linesY = sin((time + vUv.y) * PI * 20.)/20.;
float smoothX =
smoothstep( 0.0 - sh, 0.0, linesX) -
smoothstep( 0.0, 0.0 + sh, linesX);
float smoothY =
smoothstep( 0.0 - sh, 0.0, linesY) -
smoothstep( 0.0, 0.0 + sh, linesY);
float uvOutput = smoothX + smoothY;
gl_FragColor.rgb = vec3(1.0, 0, 0);
gl_FragColor.a = uvOutput;
// gl_FragColor = vec4(1.,0,0,1.)
}`
} );
//material.extensions.derivatives = true;
material.side = THREE.DoubleSide;
material.transparent = true;
//material.blending = THREE.Add;
material.depthTest = false;
var torus = new THREE.Mesh(geometry, material);
var geom = torus.geometry;
geometry.sortFacesByMaterialIndex();
torus.position.x = 0;
scene.add(torus);
/* Request Animation Frame */
function animation() {
camera.lookAt(new THREE.Vector3(0, 0, 0));
renderer.render(scene, camera);
material.uniforms.time.value = (Date.now() - startTime)/20000;
requestAnimationFrame(animation);
}
animation();
setupDraggableEvents();
function setupDraggableEvents() {
var hammer = new Hammer(document.getElementsByTagName('canvas')[0]);
hammer.on('pan', function(event) {
torus.rotation.y += event.velocityX / 10;
torus.rotation.x += event.velocityY / 10;
});
}
I recommend to define the number of lines for both directions and to calculate the distance to a line in terms of UV coordinates:
float t = time;
vec2 noLines = vec2(30.0, 20.0);
vec2 floorUV = floor((t + vUv) * noLines);
vec2 distUV = t + vUv - (floorUV+0.5) / noLines;
Smoothly interpolate between the thickness and the half thickness of a line (smoothstep), to calculate the "saturation". This causes that the line always has the full "strength" in the middle (of course you can experiment with this e.g. sh*0.66, sh*0.33):
float sh = 0.005;
vec2 lineUV = smoothstep(sh, sh*0.5, abs(distUV));
The alpha channel is the maximum "saturation" value of both directions:
float uvOutput = max(lineUV.x, lineUV.y);
gl_FragColor = vec4(1.0, 0.0, 0.0, uvOutput);
See the example, where I applied the suggested changes to your original code:
/* Scene Initialization */
var startTime = Date.now();
var scene = new THREE.Scene();
var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById('canvas');
var camera = new THREE.PerspectiveCamera(75, 1, 1, 1200);
camera.position.set(0, -420, 600);
camera.lookAt(new THREE.Vector3(0, 0, 0));
orbitControls = new THREE.OrbitControls(camera);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth * .2, window.innerWidth * .2);
renderer.setClearColor( 0xffffff, 1);
canvas.appendChild(renderer.domElement);
var geometry = new THREE.TorusGeometry(200, 200, 260, 260);
material = new THREE.ShaderMaterial( {
uniforms: {time: { type: "f", value: Date.now() - startTime}, },
vertexShader: `attribute vec3 center;
varying vec3 vCenter;
varying vec2 vUv;
void main() {
vCenter = center;
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`,
fragmentShader: `varying vec3 vCenter;
varying vec2 vUv;
uniform float time;
uniform sampler2D tDiffuse;
void main() {
float t = time;
vec2 noLines = vec2(30.0, 20.0);
vec2 floorUV = floor((t + vUv) * noLines);
vec2 distUV = t + vUv - (floorUV+0.5) / noLines;
float sh = 0.005;
vec2 lineUV = smoothstep(sh, sh*0.5, abs(distUV));
float uvOutput = max(lineUV.x, lineUV.y);
gl_FragColor = vec4(1.0, 0.0, 0.0, uvOutput);
}`,
transparent: true
} );
//material.extensions.derivatives = true;
material.side = THREE.DoubleSide;
material.transparent = true;
//material.blending = THREE.Add;
material.depthTest = false;
var torus = new THREE.Mesh(geometry, material);
var geom = torus.geometry;
geometry.sortFacesByMaterialIndex();
torus.position.x = 0;
scene.add(torus);
/* Request Animation Frame */
function animation() {
camera.lookAt(new THREE.Vector3(0, 0, 0));
renderer.render(scene, camera);
material.uniforms.time.value = (Date.now() - startTime)/20000;
requestAnimationFrame(animation);
}
resize();
window.onresize = resize;
animation();
setupDraggableEvents();
function setupDraggableEvents() {
var hammer = new Hammer(document.getElementsByTagName('canvas')[0]);
hammer.on('pan', function(event) {
torus.rotation.y += event.velocityX / 10;
torus.rotation.x += event.velocityY / 10;
});
}
function resize() {
var aspect = window.innerWidth / window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.aspect = aspect;
camera.updateProjectionMatrix();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<div id="canvas"></div>
Hello I have searched the internet but I have not found anything on, I am trying to make 1 globe in the form of particles with the mix of 3 colors pink, dark pink and white equal to that image down
I need the colors to look like this picture, normal pink, dark pink and whit
the problem is that my Globe is left with 1 single color instead of varios like the image, all help is grateful, thank you all at once
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth /
window.innerHeight, 1, 1000);
camera.position.z = 10;
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0x2675AD);
renderer.setSize(window.innerWidth, window.innerHeight);
var globe = document.getElementById('globe')
globe.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var geom = new THREE.SphereBufferGeometry(5, 320, 160);
var colors = [];
var color = new THREE.Color();
var q = 0xC83C84;
for (let i = 0; i < geom.attributes.position.count; i++) {
color.set(Math.random() * q);
color.toArray(colors, i * 3);
}
geom.addAttribute('color', new THREE.BufferAttribute(new
Float32Array(colors), 3));
var loader = new THREE.TextureLoader();
loader.setCrossOrigin('');
var texture = loader.load('../img/equirectangle_projection.png');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
var disk = loader.load('../img/circleround.png');
var points = new THREE.Points(geom, new THREE.ShaderMaterial({
vertexColors: THREE.VertexColors,
uniforms: {
visibility: {
value: texture
},
shift: {
value: 0
},
shape: {
value: disk
},
size: {
value: 0.125
},
scale: {
value: window.innerHeight / 2
}
},
vertexShader: `
uniform float scale;
uniform float size;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vUv = uv;
vColor = color;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
`,
fragmentShader: `
uniform sampler2D visibility;
uniform float shift;
uniform sampler2D shape;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vec2 uv = vUv;
uv.x += shift;
vec4 v = texture2D(visibility, uv);
if (length(v.rgb) > 1.0) discard;
gl_FragColor = vec4( vColor, 1.0 );
vec4 shapeData = texture2D( shape, gl_PointCoord );
if (shapeData.a < 0.5) discard;
gl_FragColor = gl_FragColor * shapeData;
}
`,
transparent: true
}));
scene.add(points);
var blackGlobe = new THREE.Mesh(geom, new
THREE.MeshBasicMaterial({
color: 0x2675AD
}));
blackGlobe.scale.setScalar(0.99);
points.add(blackGlobe);
var clock = new THREE.Clock();
var time = 0;
render();
function render() {
requestAnimationFrame(render);
time += clock.getDelta();
points.rotation.y += 0.0009
renderer.render(scene, camera);
}
You can use an array of colour values and pick those values randomly:
var q = ["white", "pink", 0xb2497d, "gray"];
for (let i = 0; i < geom.attributes.position.count; i++) {
color.set(q[THREE.Math.randInt(0,3)]);
color.toArray(colors, i * 3);
}
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(1.25, 7, 7);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
antialias: true
});
renderer.setClearColor(0x080808);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var controls = new THREE.OrbitControls(camera, renderer.domElement);
var geom = new THREE.SphereBufferGeometry(5, 120, 60);
var colors = [];
var color = new THREE.Color();
var q = ["white", "pink", 0xb2497d, "gray"];
for (let i = 0; i < geom.attributes.position.count; i++) {
color.set(q[THREE.Math.randInt(0,3)]);
color.toArray(colors, i * 3);
}
geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3));
var loader = new THREE.TextureLoader();
loader.setCrossOrigin('');
var texture = loader.load('http://learningthreejs.com/data/2013-09-16-how-to-make-the-earth-in-webgl/demo/bower_components/threex.planets/images/earthspec1k.jpg');
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set(1, 1);
var disk = loader.load('https://threejs.org/examples/textures/sprites/circle.png');
var points = new THREE.Points(geom, new THREE.ShaderMaterial({
vertexColors: THREE.VertexColors,
uniforms: {
visibility: {
value: texture
},
shift: {
value: 0
},
shape: {
value: disk
},
size: {
value: 0.125
},
scale: {
value: window.innerHeight / 2
}
},
vertexShader: `
uniform float scale;
uniform float size;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vUv = uv;
vColor = color;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
`,
fragmentShader: `
uniform sampler2D visibility;
uniform float shift;
uniform sampler2D shape;
varying vec2 vUv;
varying vec3 vColor;
void main() {
vec2 uv = vUv;
uv.x += shift;
vec4 v = texture2D(visibility, uv);
if (length(v.rgb) > 1.0) discard;
gl_FragColor = vec4( vColor, 1.0 );
vec4 shapeData = texture2D( shape, gl_PointCoord );
if (shapeData.a < 0.5) discard;
gl_FragColor = gl_FragColor * shapeData;
}
`,
transparent: true
}));
scene.add(points);
var blackGlobe = new THREE.Mesh(geom, new THREE.MeshBasicMaterial({
color: 0x000000
}));
blackGlobe.scale.setScalar(0.99);
points.add(blackGlobe);
var clock = new THREE.Clock();
var time = 0;
render();
function render() {
requestAnimationFrame(render);
time += clock.getDelta();
points.material.uniforms.shift.value = time * 0.1;
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
I am making my first steps coding with JavaScript and playing with Three.js.
I am learning how to use Shaders and I have a week stuck with a vertex animation that doesn't work.
This one is my Vertex Shader:
uniform float fresnelBias;
uniform float amplitude;
uniform float fresnelScale;
uniform float fresnelPower;
attribute float displacement;
varying float vReflectionFactor;
varying vec3 vReflect;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
vec3 I = worldPosition.xyz - cameraPosition;
vReflect = reflect( I, worldNormal );
vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );
gl_Position = projectionMatrix * mvPosition;
}
and this one is Fragment Shader:
uniform vec3 color;
uniform samplerCube envMap;
varying vec3 vReflect;
varying float vReflectionFactor;
void main() {
vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
}
Then I declared a variable to my attributes and another to my uniforms to assign it to a geometry but when I load the site I don't see anything. The JavaScript console tells that in this line uniforms.amplitude.value = Math.sin(frame); uniforms is not defined.
Do you have some recomendation? Do you know something that I can do?
I let here my complete code I hope it could help:
<script id="vertexShader" type="x-shader/x-vertex">
uniform float fresnelBias;
uniform float amplitude;
uniform float fresnelScale;
uniform float fresnelPower;
attribute float displacement;
varying float vReflectionFactor;
varying vec3 vReflect;
void main() {
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
vec3 I = worldPosition.xyz - cameraPosition;
vReflect = reflect( I, worldNormal );
vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 color;
uniform samplerCube envMap;
varying vec3 vReflect;
varying float vReflectionFactor;
void main() {
vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
}
</script>
<script>
var camera, scene, renderer;
var mesh, material, controls, sky;
init();
animate();
function init(){
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0xfffff, 0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 400;
//controls = new THREE.TrackballControls( camera );
scene = new THREE.Scene();
var numberOfImages = 46, images = [];
for (var i = 1; i <= numberOfImages; i++) {
images.push('sources/instagram2/image' + i + ".jpg");
}
var urls = images.sort(function(){return .6 - Math.random()}).slice(0,6);
var textureCube = THREE.ImageUtils.loadTextureCube( urls );
// Skybox
var skyshader = THREE.ShaderLib[ "cube" ];
skyshader.uniforms[ "tCube" ].value = textureCube;
var skymaterial = new THREE.ShaderMaterial( {
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
uniforms: skyshader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
sky = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), skymaterial );
sky.visible = false;
scene.add( sky );
var attributes = {
displacement: {
type: 'f', // a float
value: [] // an empty array
}
};
var uniforms = {
color: {
type: "c",
value: new THREE.Color(0x000000),
},
envMap: {
type: "t",
value: textureCube
},
fresnelBias: {
type: "f",
value: 0.1
},
fresnelScale: {
type: "f",
value: 1.0
},
fresnelPower: {
type: 'f',
value: 2.0
},
amplitude: {
type: 'f',
value: 0
}
};
var vertexShader = document.getElementById('vertexShader').text;
var fragmentShader = document.getElementById('fragmentShader').text;
material = new THREE.ShaderMaterial(
{
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
});
var loader = new THREE.BinaryLoader();
loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set( 300, 300, 300 );
var vertices = mesh.geometry.vertices;
var values = attributes.displacement.value
for(var v = 0; v < vertices.length; v++) {
values.push(Math.random() * 10);
}
scene.add(mesh);
} );
var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
window.addEventListener('resize', onWindowResize, false);
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
var frame = 0;
function animate() {
uniforms.amplitude.value = Math.sin(frame);
frame += 0.01;
requestAnimationFrame(animate);
//controls.update();
//mesh.rotation.x += 0.005;
//mesh.rotation.y += 0.005;
renderer.render(scene, camera);
stats.update();
}
Update:
I Added the uniforms variable to the global scope and now the console doesn't show me any problem but I can't see the vertex animation:
<script id="vertexShader" type="x-shader/x-vertex">
uniform float fresnelBias;
uniform float amplitude;
uniform float fresnelScale;
uniform float fresnelPower;
attribute float displacement;
varying float vReflectionFactor;
varying vec3 vReflect;
void main() {
vec3 newPosition = position + normal * vec3(displacement * amplitude);
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
vec4 worldPosition = modelMatrix * vec4( position, 1.0 );
vec3 worldNormal = normalize( mat3( modelMatrix[0].xyz, modelMatrix[1].xyz, modelMatrix[2].xyz ) * normal );
vec3 I = worldPosition.xyz - cameraPosition;
vReflect = reflect( I, worldNormal );
vReflectionFactor = fresnelBias + fresnelScale * pow( 1.0 + dot( normalize( I ), worldNormal ), fresnelPower );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
uniform vec3 color;
uniform samplerCube envMap;
varying vec3 vReflect;
varying float vReflectionFactor;
void main() {
vec4 envColor = textureCube( envMap, vec3( -vReflect.x, vReflect.yz ) );
gl_FragColor = vec4(mix(color, envColor.xyz, vec3(clamp( vReflectionFactor, 0.0, 1.0 ))), 1.0);
}
</script>
<script>
var camera, scene, renderer;
var mesh, material, controls, sky;
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor(0xfffff, 0);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.z = 400;
scene = new THREE.Scene();
var numberOfImages = 46, images = [];
for (var i = 1; i <= numberOfImages; i++) {
images.push('sources/instagram2/image' + i + ".jpg");
}
var urls = images.sort(function(){return .6 - Math.random()}).slice(0,6);
var textureCube = THREE.ImageUtils.loadTextureCube( urls );
var skyshader = THREE.ShaderLib[ "cube" ];
skyshader.uniforms[ "tCube" ].value = textureCube;
var skymaterial = new THREE.ShaderMaterial( {
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
vertexShader: document.getElementById( 'vertexShader' ).textContent,
uniforms: skyshader.uniforms,
depthWrite: false,
side: THREE.BackSide
} );
sky = new THREE.Mesh( new THREE.BoxGeometry( 1500, 1500, 1500 ), skymaterial );
sky.visible = false;
scene.add( sky );
var attributes = {
displacement: {
type: 'f',
value: []
}
};
var uniforms = {
color: {
type: "c",
value: new THREE.Color(0x000000),
},
envMap: {
type: "t",
value: textureCube
},
fresnelBias: {
type: "f",
value: 0.1
},
fresnelScale: {
type: "f",
value: 1.0
},
fresnelPower: {
type: 'f',
value: 2.0
},
amplitude: {
type: 'f',
value: 0
}
};
var vertexShader = document.getElementById('vertexShader').text;
var fragmentShader = document.getElementById('fragmentShader').text;
material = new THREE.ShaderMaterial(
{
uniforms : uniforms,
vertexShader : vertexShader,
fragmentShader : fragmentShader,
});
var loader = new THREE.BinaryLoader();
loader.load( "sources/obj/mmlogo/mm_logo.js", function ( geometry ) {
mesh = new THREE.Mesh(geometry, material);
mesh.scale.set( 100, 100, 100 );
var vertices = mesh.geometry.vertices;
var values = attributes.displacement.value
for(var v = 0; v < vertices.length; v++) {
values.push(Math.random() * 30);
}
scene.add(mesh);
} );
var light = new THREE.AmbientLight( 0x404040 );
scene.add( light );
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
window.addEventListener('resize', onWindowResize, false);
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
}
var frame = 0;
function animate() {
uniforms.amplitude.value = Math.sin(frame);
frame += 0.1;
requestAnimationFrame(animate);
//controls.update();
//mesh.rotation.x += 0.005;
//mesh.rotation.y += 0.005;
renderer.render(scene, camera);
}
animate();
</script>
Do you have some conseil to make it?
You have defined the uniforms variable in the init() function so it's scope is within that function and can not be accessed in the animate() function.
Add the uniforms variable to the global scope and you should be fine.
I stumbled upon this SO post describing a way to port shadertoy examples into threejs.
I tried following along and ended up with this plunk. The fragment shader looks like this
#ifdef GL_ES
precision highp float;
#endif
uniform float iGlobalTime;
uniform sampler2D iChannel0;
uniform sampler2D iChannel1;
varying vec2 vUv;
void main(void)
{
vec2 p = -1.0 + 2.0 *vUv;
vec2 q = p - vec2(0.5, 0.5);
q.x += sin(iGlobalTime* 0.6) * 0.2;
q.y += cos(iGlobalTime* 0.4) * 0.3;
float len = length(q);
float a = atan(q.y, q.x) + iGlobalTime * 0.3;
float b = atan(q.y, q.x) + iGlobalTime * 0.3;
float r1 = 0.3 / len + iGlobalTime * 0.5;
float r2 = 0.2 / len + iGlobalTime * 0.5;
float m = (1.0 + sin(iGlobalTime * 0.5)) / 2.0;
vec4 tex1 = texture2D(iChannel0, vec2(a + 0.1 / len, r1 ));
vec4 tex2 = texture2D(iChannel1, vec2(b + 0.1 / len, r2 ));
vec3 col = vec3(mix(tex1, tex2, m));
gl_FragColor = vec4(col * len * 1.5, 1.0);
}
and the threejs code like this
window.addEventListener("load", function () {
// Camera variables.
var width = window.innerWidth;
var height = window.innerHeight;
var aspect = width/height;
var fov = 65;
var clipPlaneNear = 0.1;
var clipPlaneFar = 1000;
var clearColor = 0x221f26;
var clearAlpha = 1.0;
// main container.
var $container = $('#container');
// Clock
var clock = new THREE.Clock();
// Set up uniform.
var tuniform = {
iGlobalTime: { type: 'f', value: 0.1 },
iChannel0: { type: 't', value: THREE.ImageUtils.loadTexture( 'images/tex07.jpg') },
iChannel1: { type: 't', value: THREE.ImageUtils.loadTexture( 'images/tex03.jpg' ) },
};
tuniform.iChannel0.value.wrapS = tuniform.iChannel0.value.wrapT = THREE.RepeatWrapping;
tuniform.iChannel1.value.wrapS = tuniform.iChannel1.value.wrapT = THREE.RepeatWrapping;
// Set up our scene.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(fov, aspect, clipPlaneNear, clipPlaneFar);
//camera.position.z = 10;
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(width, height);
renderer.setClearColor(new THREE.Color(clearColor, clearAlpha));
$container.append(renderer.domElement);
var mat = new THREE.ShaderMaterial( {
uniforms: tuniform,
vertexShader: $('#vertexshader').text(),
fragmentShader: $('#fragmentshader').text(),
side:THREE.DoubleSide
} );
tuniform.iGlobalTime.value += clock.getDelta();
var tobject = new THREE.Mesh( new THREE.PlaneGeometry(700, 394,1,1), mat);
//var tobject = new THREE.Mesh( new THREE.PlaneBufferGeometry (700, 394,1,1), mat);
scene.add(tobject);
// Keep updating our scene.
var loop = function loop() {
renderer.render(scene, camera);
};
loop();
}, false);
As you can see from the plunk, there is no output in the page. What have I done wrong in this case, and how can I successfully implement the shader in threejs?
Your camera should be at camera.position.z = 1000; and
Your loop code should be:
var loop = function loop() {
requestAnimationFrame(loop);
tuniform.iGlobalTime.value += clock.getDelta();
renderer.render(scene, camera);
};
loop();
Updated plunker: