test

In this example below you will see how to do a test with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by tksiiii, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright tksiiii ©

Technologies

  • HTML
  • CSS
  • JavaScript
    <html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <style>
        body { margin: 0; overflow: hidden;}
    </style>
</head>

<body id="body">
    <div id="WebGL-output"></div>
  
  <script id="vs" type="x-shader/x-vertex">

			precision mediump float;

			attribute vec3 position;
			attribute vec3 color;
			uniform mat4 modelViewMatrix;
			uniform mat4 projectionMatrix;
			attribute vec2 uv;

			varying vec2 vUv;

			void main() {
				vUv = uv;
				gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
			}

		</script>

		<script id="fs" type="x-shader/x-fragment">

			precision mediump float;

			vec3 mod289(vec3 x) {
				return x - floor(x * (1.0 / 289.0)) * 289.0;
			}
			
			vec2 mod289(vec2 x) {
				return x - floor(x * (1.0 / 289.0)) * 289.0;
			}
			
			vec3 permute(vec3 x) {
				return mod289(((x * 34.0) + 1.0) * x);
			}
			
			float snoise(vec2 v) {
				const vec4 C = vec4(0.211324865405187, // (3.0-sqrt(3.0))/6.0,
					0.366025403784439, // 0.5*(sqrt(3.0)-1.0),
					-0.577350269189626, // -1.0 + 2.0 * C.x,
					0.024390243902439); // 1.0 / 41.0,
				vec2 i = floor(v + dot(v, C.yy));
				vec2 x0 = v - i + dot(i, C.xx);
			
				vec2 i1;
				i1 = (x0.x > x0.y) ? vec2(1.0, 0.0) : vec2(0.0, 1.0);
				vec4 x12 = x0.xyxy + C.xxzz;
				x12.xy -= i1;
			
				i = mod289(i);
				// Avoid truncation effects in permutation,
				vec3 p = permute(permute(i.y + vec3(0.0, i1.y, 1.0)) + i.x + vec3(0.0, i1.x, 1.0));
			
				vec3 m = max(0.5 - vec3(dot(x0, x0), dot(x12.xy, x12.xy), dot(x12.zw, x12.zw)), 0.0);
				m = m * m;
				m = m * m;
			
				vec3 x = 2.0 * fract(p * C.www) - 1.0;
				vec3 h = abs(x) - 0.5;
				vec3 ox = floor(x + 0.5);
				vec3 a0 = x - ox;
			
				m *= 1.79284291400159 - 0.85373472095314 * (a0 * a0 + h * h);
			
				vec3 g;
				g.x = a0.x * x0.x + h.x * x0.y;
				g.yz = a0.yz * x12.xz + h.yz * x12.yw;
				return 130.0 * dot(m, g);
			}



			float glitch1 (vec2 p, float time) {
				float distortion = 10.0;
				float offset = snoise(p + time);
				offset = offset * distortion;
				return offset;
			}

			float glitch2 (vec2 p, float time) {
				float distortion = 10.0;
				float y = p.y + time;
				float offset = snoise(vec2(0.0, y)) * 0.2;
				offset = offset * distortion * 0.1;
				return offset;
			}

			float glitch3 (vec2 p, float time) {
				float y = p.y + time;
				float offset = snoise(vec2(0.0, y * 50.0)) * 0.01;
				return offset;
			}

			float glitch4 (vec2 p, float time) {
				float x = p.x + time * 0.5;
				float y = p.y + time * 0.5;
				float offset = snoise(vec2(x, y) * 2.0) * 0.4 * pow(sin(time * 0.5), 4.0);
				return offset;
			}
			
			varying vec2 vUv;
			uniform sampler2D uTex;
			uniform float time;
			float distortion = 10.0;

			void main() {

				// vec2 effectedUv = vec2(glitch1(vUv, time));
				// vec2 effectedUv = vec2(fract(vUv.x + glitch2(vUv, time)), vUv.y);
				// vec2 effectedUv = vec2(fract(vUv.x + glitch3(vUv, time)), fract(vUv.y));

				//float tempGlitch = glitch2(vUv, time);
				//tempGlitch += glitch3(vUv, time);
				//vec2 effectedUv = vec2(fract(vUv.x + tempGlitch), fract(vUv.y));

				float tempGlitch = glitch4(vUv, time);
				vec2 effectedUv = vec2(fract(vUv.x + tempGlitch), fract(vUv.y + tempGlitch));

				gl_FragColor = texture2D( uTex, effectedUv);
			}

		</script>
  
  <script src="https://cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
    <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
</body>

</html>


/*Downloaded from https://www.codeseek.co/tksiiii/test-erLKdw */
    


/*Downloaded from https://www.codeseek.co/tksiiii/test-erLKdw */
    const init = (texture) => {

    console.log('texture: ', texture)

    const render = () => {
        glitchMesh.material.uniforms.time.value += 0.01;
        renderer.render(scene, camera);
        requestAnimationFrame(render);
    }

    const onResize = () => {
        const width = window.innerWidth;
        const height = window.innerHeight;
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(width, height);
        camera.aspect = width / height;
        camera.updateProjectionMatrix();
    }

    /* scene
    --------------------------------------*/
    const scene = new THREE.Scene();

    /* camera
    --------------------------------------*/
    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 1.3;
    camera.lookAt(scene.position);
    // const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 0.11);
    // camera.lookAt(scene.position);
    scene.add(camera);


    /* renderer
    --------------------------------------*/
    const renderer = new THREE.WebGLRenderer();
    renderer.setClearColor(new THREE.Color(0x000000));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.shadowMap.enabled = true;

    /* Plane
    --------------------------------------*/
    const planeGeometry = new THREE.PlaneGeometry(20, 20, 1, 1);
    
    // UVマッピングのカスタマイズ
    // ポリゴンの頂点に対して、テクスチャ(画像)のどのポイント(座標)を対応させるかを設定する。

    /* 全部直書きする場合 (左下)
    --------------------------------------------  */
    // planeGeometry.faceVertexUvs[0][0][0] = {x:0, y: 0.5};
    // planeGeometry.faceVertexUvs[0][0][1] = {x:0, y: 0};
    // planeGeometry.faceVertexUvs[0][0][2] = {x:0.5, y: 0.5};
    // planeGeometry.faceVertexUvs[0][1][0] = {x:0, y: 0};
    // planeGeometry.faceVertexUvs[0][1][1] = {x:0.5, y: 0};
    // planeGeometry.faceVertexUvs[0][1][2] = {x:0.5, y: 0.5};

    /* three.jsのuv座標を利用する場合
    --------------------------------------------  */
    let uvsLen = planeGeometry.faceVertexUvs[0].length;
    console.log(planeGeometry.faceVertexUvs[0])
    for(let i = 0; i < uvsLen; i++ ) {
        let uv = planeGeometry.faceVertexUvs[0][i];
        let uvLen = uv.length;

        // 左下
        // for(let j = 0; j < uvLen; j++ ) {
        //     uv[j].x = uv[j].x * 0.5
        //     uv[j].y = uv[j].y * 0.5
        // }
        
        // 右下
        // for(let j = 0; j < uvLen; j++ ) {
        //     uv[j].x = uv[j].x * 0.5 + 0.5
        //     uv[j].y = uv[j].y * 0.5
        // }

        // 左上
        for(let j = 0; j < uvLen; j++ ) {
            uv[j].x = uv[j].x * 0.5
            uv[j].y = uv[j].y * 0.5 + 0.5
        }
       
        // 右上
        // for(let j = 0; j < uvLen; j++ ) {
        //     uv[j].x = uv[j].x * 0.5 + 0.5
        //     uv[j].y = uv[j].y * 0.5 + 0.5
        // }
    }

    

    const planeMaterial = new THREE.MeshLambertMaterial({
        color: 0xffffff,
        side: THREE.DoubleSide,
        map: texture
    });


    
    
    const plane = new THREE.Mesh(planeGeometry, planeMaterial);
    plane.receiveShadow = true;
    //plane.rotation.x = -0.5 * Math.PI;
    plane.position.x = 0;
    plane.position.y = 0;
    plane.position.z = 0;
   // scene.add(plane);


    const bufferGeometry = new THREE.BufferGeometry();
    const faceNum = 1;
    const xyz = 3;
    const vertexNum = 4;
    let indexes = new Uint32Array(faceNum * xyz * 2);
    let positions = new Float32Array(faceNum * xyz * vertexNum);
    let colors = new Float32Array(faceNum * xyz * vertexNum);
    let normals = new Float32Array(faceNum * xyz * vertexNum);
    const xy = 2;
    let uvs = new Float32Array(faceNum * xy * vertexNum);

    /* positions
    ------------------------------------ */
    // bottom left
    positions[0] = -50.0;
    positions[1] = -50.0;
    positions[2] = 0.0;
    // bottom right
    positions[3] = 50.0;
    positions[4] = -50.0;
    positions[5] = 0.0;
    // top right
    positions[6] = 50.0;
    positions[7] = 50.0;
    positions[8] = 0.0;
    // top left
    positions[9] = -50.0;
    positions[10] = 50.0;
    positions[11] = 0.0;

    /* uvs
    ------------------------------------ */
    // bottom left
    uvs[0] = 0.0;
    uvs[1] = 0.0;
    // bottom right
    uvs[2] = 1.0;
    uvs[3] = 0.0;
    // top right
    uvs[4] = 1.0;
    uvs[5] = 1.0;
    // top left
    uvs[6] = 0.0;
    uvs[7] = 1.0;


    const uniforms = {
        uTex: {type: 't', value: texture},
        time: {type: 'f', value: 1.0}
    }

    const planeBufferGeometry = new THREE.PlaneBufferGeometry(1, 1, 1, 1);

    const rawShaderMaterial = new THREE.RawShaderMaterial({
        uniforms: uniforms,
        vertexShader: document.getElementById('vs').textContent,
        fragmentShader: document.getElementById('fs').textContent
    });

    // rawShaderMaterial.uniforms.uTex.value.magFilter = THREE.LinearFilter;
    // rawShaderMaterial.uniforms.uTex.value.minFilter = THREE.LinearFilter;
    // rawShaderMaterial.uniforms.uTex.value.needsUpdate = true;

    const glitchMesh = new THREE.Mesh(planeBufferGeometry, rawShaderMaterial);
    glitchMesh.position.z = 0;
    scene.add(glitchMesh);

    console.log('glitchMesh:', glitchMesh);



    /* AmbientLight
    --------------------------------------*/
    const ambientLight = new THREE.AmbientLight(0x333333);
    scene.add(ambientLight);

    /* SpotLight
    --------------------------------------*/
    const spotLight = new THREE.SpotLight(0xffffff);
    spotLight.position.set(-10, 20, 30);
    spotLight.castShadow = true;
    scene.add(spotLight);

    /* OrbitControls
    --------------------------------------*/
    const orbitControls = new THREE.OrbitControls(camera);
    orbitControls.autoRotate = false;


    /* resize
    -------------------------------------------------------------*/
    window.addEventListener('resize', onResize);

    /* rendering start
    -------------------------------------------------------------*/
    document.getElementById('WebGL-output').appendChild(renderer.domElement);
    render();

}

const textureLoader = new THREE.TextureLoader();
textureLoader.load(`./img/beautiful-blur-blurred-background-10898552.jpg`, (texture) => {
    init(texture);
});


Comments