Hi,
I am trying to build sun with three.js example of shaders (donut example).
Using the same code my page showing blured shader. Tried to change values but nothing worked so far.
Any advice can help me put my work online.
resource: three.js examples
my example: http://salmanrazak.epizy.com/portfolio/test-webgl-01/
my code
let wrapper = document.getElementById('webgl');
let camera, renderer, composer, clock, controls, scene;
let uniforms, mesh, sphere, textureLoader, cube;
let image1 = galleryUrl[0], image2 = galleryUrl[1];
console.log(image1);
let width = window.innerWidth;
let height = window.innerHeight;
init();
animate();
function init() {
var vertex = `
uniform vec2 uvScale;
varying vec2 vUv;
void main(){
vUv = uvScale * uv;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_Position = projectionMatrix * mvPosition;
}
`;
var frag = `
uniform float time;
uniform float fogDensity;
uniform vec3 fogColor;
uniform sampler2D texture1;
uniform sampler2D texture2;
varying vec2 vUv;
void main( void ) {
vec2 position = - 1.0 + 2.0 * vUv;
vec4 noise = texture2D( texture1, vUv );
vec2 T1 = vUv + vec2( 1.5, - 1.5 ) * time * 0.02;
vec2 T2 = vUv + vec2( - 0.5, 2.0 ) * time * 0.01;
T1.x += noise.x * 2.0;
T1.y += noise.y * 2.0;
T2.x -= noise.y * 0.2;
T2.y += noise.z * 0.2;
float p = texture2D( texture1, T1 * 2.0 ).a;
vec4 color = texture2D( texture2, T2 * 2.0 );
vec4 temp = color * ( vec4( p, p, p, p ) * 2.0 ) + ( color * color - 0.1 );
if( temp.r > 1.0 ) { temp.bg += clamp( temp.r - 2.0, 0.0, 100.0 ); }
if( temp.g > 1.0 ) { temp.rb += temp.g - 1.0; }
if( temp.b > 1.0 ) { temp.rg += temp.b - 1.0; }
gl_FragColor = temp;
float depth = gl_FragCoord.z / gl_FragCoord.w;
const float LOG2 = 1.442695;
float fogFactor = exp2( - fogDensity * fogDensity * depth * depth * LOG2 );
fogFactor = 1.0 - clamp( fogFactor, 0.0, 1.0 );
gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
}
`;
clock = new THREE.Clock();
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer({ antialias: true, canvas: wrapper, aplha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
camera = new THREE.PerspectiveCamera( 35, window.innerWidth / window.innerHeight, 1, 3000 );
camera.position.z = 5;
textureLoader = new THREE.TextureLoader();
uniforms = {
'fogDensity': { value: 0.25 },
'fogColor': { value: new THREE.Vector3( 0, 0, 0 ) },
'time': { value: 1.0 },
'uvScale': { value: new THREE.Vector2( 3.0, 1.0 ) },
'texture1': { value: textureLoader.load( image1 ) },
'texture2': { value: textureLoader.load( image2 ) }
};
uniforms['texture1'].value.wrapS=uniforms['texture1'].value.wrapT=THREE.RepeatWrapping;
uniforms[ 'texture2' ].value.wrapS = uniforms[ 'texture2' ].value.wrapT = THREE.RepeatWrapping;
const material = new THREE.ShaderMaterial( { uniforms: uniforms, vertexShader: vertex, fragmentShader: frag, } );
sphere = new THREE.SphereGeometry( 1, 32, 32 );
cube = new THREE.Mesh( sphere, material );
cube.addEventListener( 'added', () => {
console.log( 'added' );
} );
scene.add( cube );
const renderModel = new RenderPass( scene, camera );
const effectBloom = new BloomPass( 1.0 );
const effectFilm = new FilmPass( 0.05, 0.05, 2048, false );
composer = new EffectComposer( renderer );
composer.addPass( renderModel );
composer.addPass( effectBloom );
composer.addPass( effectFilm );
controls = new OrbitControls(camera, renderer.domElement);
controls.update();
onWindowResize();
window.addEventListener( 'resize', onWindowResize );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
composer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
const delta = 2 * clock.getDelta();
uniforms[ 'time' ].value += 0.3 * delta;
controls.update();
renderer.clear();
composer.render( 0.01 );
};
animate();
what result localhost shows
