Posted in Uncategorized

Using webGlRenderer with big width and height or ratio crops the shader.

   January 6, 2021  1 Comment on Using webGlRenderer with big width and height or ratio crops the shader.

Using webGlRenderer with big width and height or ratio crops the shader with chrome.

<body>

<div id="container"></div>
<script src="libraries/three.min.js"></script>


<script id="vertexShader" type="x-shader/x-vertex">
varying vec2 vUv;

    void main() {
				vUv = uv;

        gl_Position = vec4( position, 1.0 );
    }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
			varying vec2 vUv;

    uniform vec2 u_resolution;
    uniform float u_time;

    void main() {
        vec2 st = gl_FragCoord.xy/u_resolution.xy;

        gl_FragColor=vec4(st.x,st.y,1.0,1.0);
    }
</script>
<script>
    var container;
    var camera, scene, renderer;
    var uniforms;
			let ratio=1;
			let a=7000;
    init();
    animate();

    function init() {
        container = document.getElementById( 'container' );

        camera = new THREE.Camera();
        camera.position.z = 1;

        scene = new THREE.Scene();

        var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

        uniforms = {
            u_time: { type: "f", value: 1.0 },
            u_resolution: { type: "v2", value: new THREE.Vector2() },
            u_mouse: { type: "v2", value: new THREE.Vector2() }
        };

        var material = new THREE.ShaderMaterial( {
            uniforms: uniforms,
            vertexShader: document.getElementById( 'vertexShader' ).textContent,
            fragmentShader: document.getElementById( 'fragmentShader' ).textContent
        } );

        var mesh = new THREE.Mesh( geometry, material );
        scene.add( mesh );

        renderer = new THREE.WebGLRenderer();
        renderer.setPixelRatio( ratio );

        container.appendChild( renderer.domElement );

        onWindowResize();
        window.addEventListener( 'resize', onWindowResize, false );

        document.onmousemove = function(e){
          uniforms.u_mouse.value.x = e.pageX
          uniforms.u_mouse.value.y = e.pageY
        }
    }

    function onWindowResize( event ) {
        renderer.setSize( a,a);
        uniforms.u_resolution.value.x =a*ratio;
        uniforms.u_resolution.value.y = a*ratio;
    }

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        uniforms.u_time.value += 0.05;
        renderer.render( scene, camera );
    }
</script>

I expect the top right corner to be white like in firefox.

Screenshots

image
image

First image in chrome, second in firefox
Platform:

  • Device: Desktop
  • OS: Windows
  • Browser: Chrome
  • Three.js version: r124

Author: Fantashit

1 thought on “Using webGlRenderer with big width and height or ratio crops the shader.”

Comments are closed.