threejs


WebGL and Three JS dedicated forum. Here we can discuss about Three JS 3D library.
 
HomeCalendarGalleryFAQSearchRegisterLog in

Share | 
 

 Changing Resolution

View previous topic View next topic Go down 
AuthorMessage
Admin
Admin
avatar

Posts : 46
Points : 78
Reputation : 3
Join date : 2017-02-06
Location : London, Milan

PostSubject: Changing Resolution   Wed Feb 08, 2017 3:16 pm

This is a script that can solve the problem when you need to change the resolution also respecting size of the object:
just do experimentations with this 4 numbers:

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );
document.body.appendChild( renderer.domElement );
renderer.domElement.style.width = renderer.domElement.width * 1 + 'px';
renderer.domElement.style.height = renderer.domElement.height * 1 + 'px';


Code:
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );
document.body.appendChild( renderer.domElement );
renderer.domElement.style.width = renderer.domElement.width * 1 + 'px';
renderer.domElement.style.height = renderer.domElement.height * 1 + 'px';

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var render = function () {
    requestAnimationFrame( render );
    
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    
    renderer.render(scene, camera);
};

render();
Back to top Go down
http://threejs.forumotion.com
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 12:39 pm

ok, my renderer code is like:

Code:
renderer = new THREE.WebGLRenderer({ alpha: true });


            renderer.setClearColor( 0xffffff, 0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );

            renderer.domElement.id = 'myCanvas';
            container.appendChild( renderer.domElement );
Back to top Go down
SamCorny

avatar

Posts : 40
Points : 56
Reputation : 0
Join date : 2017-02-06
Location : NYC

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 2:07 pm

Well now you should change this:

Code:
renderer.setSize( window.innerWidth, window.innerHeight );
as

Code:
renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );

then add these 2 lines of code as the admin said after your code above:

renderer.domElement.style.width = renderer.domElement.width * 1 + 'px';
renderer.domElement.style.height = renderer.domElement.height * 1 + 'px';


This should be correct Smile
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 2:14 pm

nope Razz
here is all the code:

Code:
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.style.width = renderer.domElement.width * 1 + 'px';
            renderer.domElement.style.height = renderer.domElement.height * 1 + 'px';

            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 );
            window.addEventListener( 'resize', onWindowResize, false );



            initWater();
            heightmapVariable.material.uniforms.mouseSize.value=20;
            heightmapVariable.material.uniforms.viscosityConstant.value=0.03;


         }


         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>
Back to top Go down
SamCorny

avatar

Posts : 40
Points : 56
Reputation : 0
Join date : 2017-02-06
Location : NYC

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 2:21 pm

You must declare the dom element before changeing it.

            renderer.setClearColor( 0xffffff, 0 );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );


            renderer.domElement.id = 'myCanvas';
            container.appendChild( renderer.domElement );


            renderer.domElement.style.width = renderer.domElement.width * 1 + 'px';
            renderer.domElement.style.height = renderer.domElement.height * 1 + 'px';


Try the code above.
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 2:41 pm

Now all the site is messed up,when i load the site the mesh is to small, i go to inspect the the mesh gets big,and doesnt change in real time.it doesnt change at all.Should i make changes to onresize function?
Back to top Go down
SamCorny

avatar

Posts : 40
Points : 56
Reputation : 0
Join date : 2017-02-06
Location : NYC

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 2:46 pm

you can reduce the meshes resolution multiply these value:

            renderer.domElement.style.width = renderer.domElement.width * 2 + 'px';
            renderer.domElement.style.height = renderer.domElement.height * 2 + 'px';


But that's strange, do you have a link where can i have a look please?


And also, consider to stop using a Canvas and render the site using only webgl, there are a lot of example about that.
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 2:50 pm

i can ngrok it,but i consider not making public,if you want pm
Back to top Go down
SamCorny

avatar

Posts : 40
Points : 56
Reputation : 0
Join date : 2017-02-06
Location : NYC

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 2:52 pm

ok send me link via pm Smile
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 3:07 pm

i send you
Back to top Go down
SamCorny

avatar

Posts : 40
Points : 56
Reputation : 0
Join date : 2017-02-06
Location : NYC

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 3:34 pm

ah ok no i ment, some website where can i check it. Anyway, please save some screenshot about what it happens to you program ans post it here ok?
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 3:51 pm

ok here is the code:

Code:
<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>
Back to top Go down
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Changing Resolution   Thu Feb 09, 2017 3:55 pm

and here are the pictures

http://imgur.com/a/3j5PC

on load
on inspect
on refresh
and
on closed inspect
Back to top Go down
Admin
Admin
avatar

Posts : 46
Points : 78
Reputation : 3
Join date : 2017-02-06
Location : London, Milan

PostSubject: Re: Changing Resolution   Fri Feb 10, 2017 1:54 pm

Hi Phaidonas

as I see you are building a interface, right?
I suggest you to use a "div" for that problem.
Soon we will publish a program we are going to build where you can see a good combination between webgl and html elements and thrust me, its a very good solution
Back to top Go down
http://threejs.forumotion.com
phaidonas



Posts : 24
Points : 32
Reputation : 0
Join date : 2017-02-07

PostSubject: Re: Changing Resolution   Fri Feb 10, 2017 2:03 pm

i removed the gui, i made the responsivity manual,with check screen.width and for mobiles i removed the webgl, and used only html elements because it was intense for the mobiles and the site.
Back to top Go down
Admin
Admin
avatar

Posts : 46
Points : 78
Reputation : 3
Join date : 2017-02-06
Location : London, Milan

PostSubject: Re: Changing Resolution   Fri Feb 10, 2017 3:38 pm

Depends on your css style. If you develop a good css style you can make your application very light. CSS3 are today the susbtitution of the old and heavy flash (terrible).
Back to top Go down
http://threejs.forumotion.com
Sponsored content




PostSubject: Re: Changing Resolution   

Back to top Go down
 
Changing Resolution
View previous topic View next topic Back to top 
Page 1 of 1
 Similar topics
-
» changing max ammo and hp
» Trp2 and colour changing of the names.
» Resolution of Median XL
» Problem with resolution
» Can we adjust the Blood Timer?

Permissions in this forum:You cannot reply to topics in this forum
threejs :: WEBGL and Three JS Library :: Coding and new Examples-
Jump to: