How to put image in this code?

Asked

Viewed 144 times

1

Hi, I was wondering how can I add an image to this code that makes use of the three.js. I wanted to add it and make that same effect of the site Bad TV Shader (https://www.airtightinteractive.com/demos/js/badtvshader/) can generate noise and distortion like an old TV. On the site, the effect is performed with the addition of a video. In my case, I wanted to change the code and add an image.

Look at the code: 

<script>

    //Bad TV Effect Demo
    //Using Three.js r.66
    //by Felix Turner / www.airtight.cc / @felixturner

    var camera, scene, renderer;
    var video, videoTexture,videoMaterial;
    var composer;
    var shaderTime = 0;
    var badTVParams, badTVPass;     
    var staticParams, staticPass;       
    var rgbParams, rgbPass; 
    var filmParams, filmPass;   
    var renderPass, copyPass;
    var gui;
    var pnoise, globalParams;

    init();
    animate();

    function init() {

        camera = new THREE.PerspectiveCamera(55, 1080/ 720, 20, 3000);
        camera.position.z = 1000;
        scene = new THREE.Scene();

        //Load Video
        video = document.createElement( 'video' );
        video.loop = true;
        video.src = "res/fits.mp4";
        video.play();

        //Use webcam
        // video = document.createElement('video');
        // video.width = 320;
        // video.height = 240;
        // video.autoplay = true;
        // video.loop = true;
        // //Webcam video
        // window.URL = window.URL || window.webkitURL;
        // navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
        // //get webcam
        // navigator.getUserMedia({
        //  video: true
        // }, function(stream) {
        //  //on webcam enabled
        //  video.src = window.URL.createObjectURL(stream);
        // }, function(error) {
        //  prompt.innerHTML = 'Unable to capture WebCam. Please reload the page.';
        // });

        //init video texture
        videoTexture = new THREE.Texture( video );
        videoTexture.minFilter = THREE.LinearFilter;
        videoTexture.magFilter = THREE.LinearFilter;

        videoMaterial = new THREE.MeshBasicMaterial( {
            map: videoTexture
        } );

        //Add video plane
        var planeGeometry = new THREE.PlaneGeometry( 1080, 720,1,1 );
        var plane = new THREE.Mesh( planeGeometry, videoMaterial );
        scene.add( plane );
        plane.z = 0;
        plane.scale.x = plane.scale.y = 1.45;

        //add stats
        stats = new Stats();
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.top = '0px';
        container.appendChild( stats.domElement );

        //init renderer
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( 800, 600 );
        document.body.appendChild( renderer.domElement );

        //POST PROCESSING
        //Create Shader Passes
        renderPass = new THREE.RenderPass( scene, camera );
        badTVPass = new THREE.ShaderPass( THREE.BadTVShader );
        rgbPass = new THREE.ShaderPass( THREE.RGBShiftShader );
        filmPass = new THREE.ShaderPass( THREE.FilmShader );
        staticPass = new THREE.ShaderPass( THREE.StaticShader );
        copyPass = new THREE.ShaderPass( THREE.CopyShader );

        //set shader uniforms
        filmPass.uniforms[ "grayscale" ].value = 0;

        //Init DAT GUI control panel
        badTVParams = {
            mute:true,
            show: true,
            distortion: 3.0,
            distortion2: 1.0,
            speed: 0.3,
            rollSpeed: 0.1
        }

        staticParams = {
            show: true,
            amount:0.5,
            size2:4.0
        }

        rgbParams = {
            show: true,
            amount: 0.005,
            angle: 0.0,
        }

        filmParams = {
            show: true,
            count: 800,
            sIntensity: 0.9,
            nIntensity: 0.4
        }

        gui = new dat.GUI();

        gui.add(badTVParams, 'mute').onChange(onToggleMute);

        var f1 = gui.addFolder('Bad TV');
        f1.add(badTVParams, 'show').onChange(onToggleShaders);
        f1.add(badTVParams, 'distortion', 0.1, 20).step(0.1).listen().name("Thick Distort").onChange(onParamsChange);
        f1.add(badTVParams, 'distortion2', 0.1, 20).step(0.1).listen().name("Fine Distort").onChange(onParamsChange);
        f1.add(badTVParams, 'speed', 0.0,1.0).step(0.01).listen().name("Distort Speed").onChange(onParamsChange);
        f1.add(badTVParams, 'rollSpeed', 0.0,1.0).step(0.01).listen().name("Roll Speed").onChange(onParamsChange);
        f1.open();

        var f2 = gui.addFolder('RGB Shift');
        f2.add(rgbParams, 'show').onChange(onToggleShaders);
        f2.add(rgbParams, 'amount', 0.0, 0.1).listen().onChange(onParamsChange);
        f2.add(rgbParams, 'angle', 0.0, 2.0).listen().onChange(onParamsChange);
        f2.open();

        var f4 = gui.addFolder('Static');
        f4.add(staticParams, 'show').onChange(onToggleShaders);
        f4.add(staticParams, 'amount', 0.0,1.0).step(0.01).listen().onChange(onParamsChange);
        f4.add(staticParams, 'size2', 1.0,100.0).step(1.0).onChange(onParamsChange);
        f4.open();

        var f3 = gui.addFolder('Scanlines');
        f3.add(filmParams, 'show').onChange(onToggleShaders);
        f3.add(filmParams, 'count', 50, 1000).onChange(onParamsChange);
        f3.add(filmParams, 'sIntensity', 0.0, 2.0).step(0.1).onChange(onParamsChange);
        f3.add(filmParams, 'nIntensity', 0.0, 2.0).step(0.1).onChange(onParamsChange);
        f3.open();

        gui.close();

        onToggleShaders();
        onToggleMute();
        onParamsChange();

        window.addEventListener('resize', onResize, false);
        renderer.domElement.addEventListener('click', randomizeParams, false);
        onResize();
        randomizeParams();
    }

    function onParamsChange() {
        //copy gui params into shader uniforms
        badTVPass.uniforms[ "distortion" ].value = badTVParams.distortion;
        badTVPass.uniforms[ "distortion2" ].value = badTVParams.distortion2;
        badTVPass.uniforms[ "speed" ].value = badTVParams.speed;
        badTVPass.uniforms[ "rollSpeed" ].value = badTVParams.rollSpeed;

        staticPass.uniforms[ "amount" ].value = staticParams.amount;
        staticPass.uniforms[ "size" ].value = staticParams.size2;

        rgbPass.uniforms[ "angle" ].value = rgbParams.angle*Math.PI;
        rgbPass.uniforms[ "amount" ].value = rgbParams.amount;

        filmPass.uniforms[ "sCount" ].value = filmParams.count;
        filmPass.uniforms[ "sIntensity" ].value = filmParams.sIntensity;
        filmPass.uniforms[ "nIntensity" ].value = filmParams.nIntensity;
    }


    function randomizeParams() {

        if (Math.random() <0.2){
            //you fixed it!
            badTVParams.distortion = 0.1;
            badTVParams.distortion2 =0.1;
            badTVParams.speed =0;
            badTVParams.rollSpeed =0;
            rgbParams.angle = 0;
            rgbParams.amount = 0;
            staticParams.amount = 0;

        }else{
            badTVParams.distortion = Math.random()*10+0.1;
            badTVParams.distortion2 =Math.random()*10+0.1;
            badTVParams.speed =Math.random()*.4;
            badTVParams.rollSpeed =Math.random()*.2;
            rgbParams.angle = Math.random()*2;
            rgbParams.amount = Math.random()*0.03;
            staticParams.amount = Math.random()*0.2;
        }

        onParamsChange();
    }



    function onToggleMute(){
        video.volume  = badTVParams.mute ? 0 : 1;
    }

    function onToggleShaders(){

        //Add Shader Passes to Composer
        //order is important 
        composer = new THREE.EffectComposer( renderer);
        composer.addPass( renderPass );

        if (filmParams.show){
            composer.addPass( filmPass );
        }

        if (badTVParams.show){
            composer.addPass( badTVPass );
        }

        if (rgbParams.show){
            composer.addPass( rgbPass );
        }

        if (staticParams.show){
            composer.addPass( staticPass );
        }

        composer.addPass( copyPass );
        copyPass.renderToScreen = true;
    }

    function animate() {

        shaderTime += 0.1;
        badTVPass.uniforms[ 'time' ].value =  shaderTime;
        filmPass.uniforms[ 'time' ].value =  shaderTime;
        staticPass.uniforms[ 'time' ].value =  shaderTime;

        if ( video.readyState === video.HAVE_ENOUGH_DATA ) {
            if ( videoTexture ) videoTexture.needsUpdate = true;
        }

        requestAnimationFrame( animate );
        composer.render( 0.1);
        stats.update();
    }

    function onResize() {
        renderer.setSize(window.innerWidth, window.innerHeight);
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
    }

</script>

If you can help me, I really appreciate it. I’ve been trying to reach this goal for a long time. I don’t have much knowledge of three.js or javascript.

image script

  • try to change: video = document.createElement( 'img' ); take it off video.loop = true; and here the img address video.src = "res/fits.mp4"; and removes/comments video.play(); use an img on .png semi-transparent.

  • It doesn’t work. In the three.js library (https://www.airtightinteractive.com/demos/js/badtvshader/lib/three.min.js) if you search crtl + f for the word "image" you will need to make some calls in order to upload an image. The problem is I haven’t got those calls right.

  • The images I think only load in the form of "data:image/jpeg" or "data:image/png". The common url doesn’t seem to work. I realized that after exchanging the url for this guy in another code of the same author.

1 answer

1

try this:

window.onload = function(){

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// camera 
var camera = new THREE.PerspectiveCamera(95, window.innerWidth / window.innerHeight, 1, 1000); 
camera.position.y = -250; 
camera.position.z = 400; 
camera.rotation.x = 45 * (Math.PI / 180); 

// scene 
var scene = new THREE.Scene();
scene.add(camera); //ADDED

var img = new THREE.MeshBasicMaterial({ //CHANGED to MeshBasicMaterial
    map:THREE.ImageUtils.loadTexture('img/front.jpg')
});
img.map.needsUpdate = true; //ADDED

// plane
var plane = new THREE.Mesh(new THREE.PlaneGeometry(200, 200),img);
plane.overdraw = true;
scene.add(plane);

 // add subtle ambient lighting
var ambientLight = new THREE.AmbientLight(0x555555);
scene.add(ambientLight);

// add directional light source
var directionalLight = new THREE.DirectionalLight(0xffffff);
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);

// create wrapper object that contains three.js objects
var three = {
    renderer: renderer,
    camera: camera,
    scene: scene,
    plane: plane
};
     renderer.render(scene,camera);
};

and if you need to rotate the plane:

Plane.rotation.x = (-Math.PI / 2);
Plane.rotation.z = (-Math.PI / 2);

Source

  • Yes, it worked well to upload the image. But how to join this code to the effect of noise and distortion? Thanks for the help!

  • is as much as I can go, I don’t know anything about three.js know only javascript, I just searched in google rs

  • All right, anyway thanks!

Browser other questions tagged image script

You are not signed in. Login or sign up in order to post.