<script>
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var hash = document.location.hash.substr( 1 );
if ( hash ) hash = parseInt( hash, 0 );
// Texture width for simulation
var WIDTH;
var BOUNDS;
if(screen.width<=500){
WIDTH = 256;
BOUNDS = 535;
WIDTH.needsUpdate = true;
BOUNDS.needsUpdate = true;
}else if (screen.width>500)
{ WIDTH = 512;
BOUNDS = 1071;
WIDTH.needsUpdate = true;
BOUNDS.needsUpdate = true;
}
//var WIDTH = 512;
var NUM_TEXELS = WIDTH * WIDTH;
// Water size in system units
//var BOUNDS = 1071;
var BOUNDS_HALF = BOUNDS * 0.5;
var container;
var camera, scene, renderer;
var backgroundScene, backgroundCamera;
var mouseMoved = false;
var mouseCoords = new THREE.Vector2();
var raycaster = new THREE.Raycaster();
var ticking =false;
var waterMesh;
var meshRay;
var gpuCompute;
var heightmapVariable;
var waterUniforms;
var smoothShader;
var simplex = new SimplexNoise();
var windowHalfX = window.innerWidth/2;
var windowHalfY = window.innerHeight/2;
var GrText;
var EngText;
var neheTexture;
function insertText(){
document.getElementById('TextBy').innerHTML = 'Text by Nadjia Argyropoulou';
document.getElementById('TextBy').style.fontFamily = "Raisonne"
GrText=false;
EngText=true;
}
function GreekText(){
if(GrText==true){
document.getElementById('TextBy').innerHTML = 'Κείμενο απο Ναντια Αργυροπουλου';
document.getElementById('TextBy').style.fontFamily = "CFAsty"
EngText=false;
}else if (GrText==false) {
document.getElementById('TextBy').innerHTML = 'Κείμενο απο Ναντια Αργυροπουλου';
document.getElementById('TextBy').style.fontFamily = "CFAsty"
EngText=false;
}
}
function EnglText(){
if(EngText==true){
document.getElementById('TextBy').innerHTML = 'Text by Nadjia Argyropoulou';
document.getElementById('TextBy').style.fontFamily = "Raisonne"
GrText=false;
}else if (EngText==false) {
document.getElementById('TextBy').innerHTML = 'Text by Nadjia Argyropoulou';
document.getElementById('TextBy').style.fontFamily = "Raisonne"
GrText=false;
}
}
var neheTexture = new THREE.TextureLoader().load("images/PHAIDON_ENG.png");
var GreekClick = function() {
waterMesh.material.uniforms.map.value = new THREE.TextureLoader().load("images/PHAIDON_GR.png");
waterMesh.material.uniforms.map.value.needsUpdate = true;
};
var EngClick = function() {
waterMesh.material.uniforms.map.value = new THREE.TextureLoader().load("images/PHAIDON_ENG.png");
waterMesh.material.uniforms.map.value.needsUpdate = true;
};
$('#Gr').click(GreekClick);
$('#En').click(EngClick);
/*Here declare the water size */
//WIDTH=512;
init();
animate();
smoothWater();
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
camera = new THREE.PerspectiveCamera( 100, window.innerWidth/ window.innerHeight, 100, 3000 );
//The middle value is heightof camera(height of camera=with the analogy of the water such as the water is always on fullscreen)
//switc Statement
/*if(screen.width<=1280 && screen.width>500){
camera.position.x = -10;
camera.position.z = -370;
}else if (screen.width<=500){
camera.position.x = 0;
camera.position.z = -75;
}else if (screen.width>1280)
{ camera.position.x = -70;
camera.position.z = -370;
}
camera.position.x.needsUpdate = true;
camera.position.z.needsUpdate = true;*/
camera.position.x = -70;
camera.position.z = -370;
camera.position.y = 170;
//camera.position.set( -70,170,-370);
camera.rotation.x = - Math.PI / 2;
//camera.rotation.z =90* MATH_PI /180;
scene = new THREE.Scene();
var sun = new THREE.DirectionalLight( 0xFFFFFF, 1.0 );
sun.position.set( 300, 400, 175 );
scene.add( sun );
var sun2 = new THREE.DirectionalLight( 0x40A040, 0.6 );
sun2.position.set( -100, 350, -200 );
scene.add( sun2 );
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setClearColor( 0xffffff, 0 );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );
renderer.domElement.id = 'myCanvas';
container.appendChild( renderer.domElement );
//controls
//controls = new THREE.OrbitControls( camera, renderer.domElement );
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
document.addEventListener( 'touchstart', onDocumentTouchStart, false );
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
// W Pressed: Toggle wireframe
document.addEventListener( 'keydown', function( event ) {
if ( event.keyCode === 87 ) {
waterMesh.material.wireframe = ! waterMesh.material.wireframe;
waterMesh.material.needsUpdate = true;
}
} , false );
window.addEventListener( 'resize', onWindowResize, false );
var gui = new dat.GUI();
var effectController = {
mouseSize: 20.0,
viscosity: 0.03
};
var valuesChanger = function() {
heightmapVariable.material.uniforms.mouseSize.value = effectController.mouseSize;
heightmapVariable.material.uniforms.viscosityConstant.value = effectController.viscosity;
};
gui.add( effectController, "mouseSize", 1.0, 100.0, 1.0 ).onChange( valuesChanger );
gui.add( effectController, "viscosity", 0.0, 0.1, 0.001 ).onChange( valuesChanger );
initWater();
valuesChanger();
}
function initWater() {
//var materialColor = "rgba(255, 255, 255, 0.5)";
//(width,height,widthSegment,heightsegment)
var geometry = new THREE.PlaneBufferGeometry(WIDTH, BOUNDS, WIDTH-1, WIDTH-1);
// material: make a ShaderMaterial clone of MeshPhongMaterial, with customized vertex shader
var material = new THREE.ShaderMaterial( {
uniforms: THREE.UniformsUtils.merge( [
THREE.ShaderLib[ 'phong' ].uniforms,
{
heightmap: { value: null }
}
] ),
vertexShader: document.getElementById( 'waterVertexShader' ).textContent,
fragmentShader: THREE.ShaderChunk[ 'meshphong_frag' ],
defines: {USE_MAP:1}
} );
material.lights = true;
// Material attributes from MeshPhongMaterial
//material.color = new THREE.Color( materialColor );
material.specular = new THREE.Color( 0x111111 );
material.shininess = 50;
material.transparent = true;
material.opacity = 1;
// Sets the uniforms with the material values
//material.uniforms.diffuse.value = material.color;
material.uniforms.map.value = neheTexture;
material.uniforms.map.needsUpdate = true;
material.uniforms.specular.value = material.specular;
material.uniforms.shininess.value = Math.max( material.shininess, 1e-4 );
material.uniforms.opacity.value = material.opacity;
// Defines
material.defines.WIDTH = WIDTH.toFixed( 1 );
material.defines.BOUNDS = BOUNDS.toFixed( 1 );
waterUniforms = material.uniforms;
waterMesh = new THREE.Mesh( geometry, material );
waterMesh.rotation.x = - Math.PI/2;
waterMesh.matrixAutoUpdate = false;
waterMesh.updateMatrix();
scene.add( waterMesh );
// Mesh just for mouse raycasting
var geometryRay = new THREE.PlaneBufferGeometry( 512, 1071, 1, 1 );
meshRay = new THREE.Mesh( geometryRay, new THREE.MeshBasicMaterial( { color: 0xFFFFFF, visible: false} ) );
meshRay.rotation.x = - Math.PI / 2;
meshRay.matrixAutoUpdate = false;
meshRay.updateMatrix();
scene.add( meshRay );
// Creates the gpu computation class and sets it up
gpuCompute = new GPUComputationRenderer( WIDTH, WIDTH, renderer );
var heightmap0 = gpuCompute.createTexture();
fillTexture( heightmap0 );
heightmapVariable = gpuCompute.addVariable( "heightmap", document.getElementById( 'heightmapFragmentShader' ).textContent, heightmap0 );
gpuCompute.setVariableDependencies( heightmapVariable, [ heightmapVariable ] );
//mouseCord-------->Here
heightmapVariable.material.uniforms.mousePos = { value: new THREE.Vector2( 10000, 10000 ) };
heightmapVariable.material.uniforms.mouseSize = { value: 20.0 };
heightmapVariable.material.uniforms.viscosityConstant = { value: 0.03 };
heightmapVariable.material.defines.BOUNDS = BOUNDS.toFixed( 1 );
var error = gpuCompute.init();
if ( error !== null ) {
console.error( error );
}
// Create compute shader to smooth the water surface and velocity
smoothShader = gpuCompute.createShaderMaterial( document.getElementById( 'smoothFragmentShader' ).textContent, { texture: { value: null } } );
}
function fillTexture( texture ) {
var waterMaxHeight = 10;
function noise( x, y, z ) {
var multR = waterMaxHeight;
var mult = 0.025;
var r = 0;
for ( var i = 0; i < 15; i++ ) {
r += multR * simplex.noise3d( x * mult, y * mult, z * mult );
multR *= 0.53 + 0.025 * i;
mult *= 1.25;
}
return r;
}
var pixels = texture.image.data;
var p = 0;
for ( var j = 0; j < WIDTH; j++ ) {
for ( var i = 0; i < WIDTH; i++ ) {
var x = i * 128 / WIDTH;
var y = j * 128 / WIDTH;
pixels[ p + 0 ] = noise( x, y, 123.4 );
pixels[ p + 1 ] = 0;
pixels[ p + 2 ] = 0;
pixels[ p + 3 ] = 1;
p += 4;
}
}
}
function smoothWater() {
var currentRenderTarget = gpuCompute.getCurrentRenderTarget( heightmapVariable );
var alternateRenderTarget = gpuCompute.getAlternateRenderTarget( heightmapVariable );
for ( var i = 0; i < 10; i++ ) {
smoothShader.uniforms.texture.value = currentRenderTarget.texture;
gpuCompute.doRenderTarget( smoothShader, alternateRenderTarget );
smoothShader.uniforms.texture.value = alternateRenderTarget.texture;
gpuCompute.doRenderTarget( smoothShader, currentRenderTarget );
}
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight);
}
function setMouseCoords( x, y ) {
mouseCoords.set( ( x / renderer.domElement.clientWidth ) * 2 - 1, - ( y / renderer.domElement.clientHeight ) * 2 + 1 );
mouseMoved = true;
}
function onDocumentMouseMove( event ) {
setMouseCoords( event.clientX, event.clientY );
}
function onDocumentTouchStart( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
setMouseCoords( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
}
function onDocumentTouchMove( event ) {
if ( event.touches.length === 1 ) {
event.preventDefault();
setMouseCoords( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
}
function animate() {
requestAnimationFrame( animate );
onWindowResize();
render();
}
function render() {
// Set uniforms: mouse interaction
var uniforms = heightmapVariable.material.uniforms;
if ( mouseMoved ) {
this.raycaster.setFromCamera( mouseCoords, camera );
var intersects = this.raycaster.intersectObject( meshRay );
if ( intersects.length > 0 ) {
var point = intersects[ 0 ].point;
uniforms.mousePos.value.set( point.x, point.z );
}
else {
uniforms.mousePos.value.set( 10000, 10000 );
}
mouseMoved = false;
}
else {
uniforms.mousePos.value.set( 10000, 10000 );
}
// Do the gpu computation
gpuCompute.compute();
// Get compute output in custom uniform
waterUniforms.heightmap.value = gpuCompute.getCurrentRenderTarget( heightmapVariable ).texture;
// Render
//Here is a problem......------>
/*$(window).bind('mousewheel DOMMouseScroll', function(event){
if(!ticking){
if (event.originalEvent.wheelDelta/120 > 0 || event.originalEvent.detail/120 < 0) {
camera.position.z+=0.1;
}
else{
camera.position.z-=0.1;
}
}
else{
ticking=true;
} //console.log(camera.position.z);
});*/
var scl=0;
$(window).on('DOMMouseScroll mousewheel', function (e) {
if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
while(scl==0) {
scl=0.05;
camera.position.z+=scl;
//console.log("1."+" "+scl);
}
} else {
while(scl==0) {
scl=0.05;
camera.position.z-=scl;
//console.log("2."+" "+scl);
}
}
http://console.log("3."+" "+scl);;
});
window.setInterval(function(){
scl=0;
}, 10);
http://console.log("4."+" "+scl);
if(camera.position.z>670){
camera.position.z=-670;
}else if (camera.position.z<-670) {
camera.position.z=670;
}
http://console.log(camera.position.z); camera.updateProjectionMatrix();
renderer.render( scene, camera );
}
</script>
Subject: Changing Resolution 
Wed Feb 08, 2017 3:16 pm
