Ana Sayfa Keşfet Yardım
Giriş Yap
javascript
/
simondev.ThreeJS_Tutorial_PostProcessing
şunun yansıması https://github.com/simondevyoutube/ThreeJS_Tutorial_PostProcessing
2
0
Çatalla 0
Dosyalar Sorunlar 0 Wiki
Kaynağa Gözat

Forgot to upload this a long time ago.

Simon 4 yıl önce
işleme
0c9f62e146
11 değiştirilmiş dosya ile 234 ekleme ve 0 silme
Birleşik Görünüm Farklılık Durumunu Göster
  1. 21 0
      LICENSE
  2. 9 0
      base.css
  3. 12 0
      index.html
  4. 179 0
      main.js
  5. BIN
      resources/negx.jpg
  6. BIN
      resources/negy.jpg
  7. BIN
      resources/negz.jpg
  8. BIN
      resources/posx.jpg
  9. BIN
      resources/posy.jpg
  10. BIN
      resources/posz.jpg
  11. 13 0
      resources/readme.txt

+ 21 - 0
LICENSE
Dosyayı Görüntüle 

@@ -0,0 +1,21 @@
 
+MIT License
 
+
 
+Copyright (c) 2020 simondevyoutube
 
+
 
+Permission is hereby granted, free of charge, to any person obtaining a copy
 
+of this software and associated documentation files (the "Software"), to deal
 
+in the Software without restriction, including without limitation the rights
 
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 
+copies of the Software, and to permit persons to whom the Software is
 
+furnished to do so, subject to the following conditions:
 
+
 
+The above copyright notice and this permission notice shall be included in all
 
+copies or substantial portions of the Software.
 
+
 
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 
+SOFTWARE.

+ 9 - 0
base.css
Dosyayı Görüntüle 

@@ -0,0 +1,9 @@
 
+body {
 
+  width: 100%;
 
+  height: 100%;
 
+  position: absolute;
 
+  background: #000000;
 
+  margin: 0;
 
+  padding: 0;
 
+  overscroll-behavior: none;
 
+}

+ 12 - 0
index.html
Dosyayı Görüntüle 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html>
 
+<html>
 
+<head>
 
+  <title>ThreeJS Tutorial: PostProcessing</title>
 
+  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+  <link rel="stylesheet" type="text/css" href="base.css">
 
+</head>
 
+<body>
 
+  <script src="./main.js" type="module">
 
+  </script>
 
+</body>
 
+</html>

+ 179 - 0
main.js
Dosyayı Görüntüle 

@@ -0,0 +1,179 @@
 
+import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
 
+
 
+import {OrbitControls} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
 
+
 
+import {EffectComposer} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/EffectComposer.js';
 
+import {RenderPass} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/RenderPass.js';
 
+import {UnrealBloomPass} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/UnrealBloomPass.js';
 
+import {GlitchPass} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/GlitchPass.js';
 
+import {ShaderPass} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/ShaderPass.js';
 
+import {SSAOPass} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/postprocessing/SSAOPass.js';
 
+
 
+import {LuminosityShader} from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/shaders/LuminosityShader.js';
 
+
 
+const _VS = `
 
+varying vec2 vUv;
 
+
 
+void main() {
 
+  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
 
+  vUv = uv;
 
+}
 
+`;
 
+
 
+const _FS = `
 
+#include <common>
 
+
 
+uniform sampler2D tDiffuse;
 
+
 
+varying vec2 vUv;
 
+
 
+void main() {
 
+  vec4 diffuse = texture2D(tDiffuse, vUv);
 
+
 
+  gl_FragColor = (diffuse - 0.5) * 4.0 + 0.5;
 
+}
 
+`;
 
+
 
+const CrapShader = {
 
+  uniforms: {
 
+    tDiffuse: null,
 
+  },
 
+  vertexShader: _VS,
 
+  fragmentShader: _FS,
 
+};
 
+
 
+
 
+class PostProcessingDemo {
 
+  constructor() {
 
+    this._Initialize();
 
+  }
 
+
 
+  _Initialize() {
 
+    this._threejs = new THREE.WebGLRenderer({
 
+      antialias: true,
 
+    });
 
+    this._threejs.shadowMap.enabled = true;
 
+    this._threejs.shadowMap.type = THREE.PCFSoftShadowMap;
 
+    this._threejs.setPixelRatio(window.devicePixelRatio);
 
+    this._threejs.setSize(window.innerWidth, window.innerHeight);
 
+
 
+    document.body.appendChild(this._threejs.domElement);
 
+
 
+    window.addEventListener('resize', () => {
 
+      this._OnWindowResize();
 
+    }, false);
 
+
 
+    const fov = 60;
 
+    const aspect = 1920 / 1080;
 
+    const near = 1.0;
 
+    const far = 500.0;
 
+    this._camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
+    this._camera.position.set(75, 20, 0);
 
+
 
+    this._scene = new THREE.Scene();
 
+
 
+    this._composer = new EffectComposer(this._threejs);
 
+    this._composer.addPass(new RenderPass(this._scene, this._camera));
 
+    this._composer.addPass(new UnrealBloomPass({x: 1024, y: 1024}, 2.0, 0.0, 0.75));
 
+    this._composer.addPass(new GlitchPass());
 
+    this._composer.addPass(new ShaderPass(CrapShader));
 
+
 
+    let light = new THREE.DirectionalLight(0xFFFFFF, 1.0);
 
+    light.position.set(20, 100, 10);
 
+    light.target.position.set(0, 0, 0);
 
+    light.castShadow = true;
 
+    light.shadow.bias = -0.001;
 
+    light.shadow.mapSize.width = 2048;
 
+    light.shadow.mapSize.height = 2048;
 
+    light.shadow.camera.near = 0.1;
 
+    light.shadow.camera.far = 500.0;
 
+    light.shadow.camera.near = 0.5;
 
+    light.shadow.camera.far = 500.0;
 
+    light.shadow.camera.left = 100;
 
+    light.shadow.camera.right = -100;
 
+    light.shadow.camera.top = 100;
 
+    light.shadow.camera.bottom = -100;
 
+    this._scene.add(light);
 
+
 
+    light = new THREE.AmbientLight(0x101010);
 
+    this._scene.add(light);
 
+
 
+    const controls = new OrbitControls(
 
+      this._camera, this._threejs.domElement);
 
+    controls.target.set(0, 20, 0);
 
+    controls.update();
 
+
 
+    const loader = new THREE.CubeTextureLoader();
 
+    const texture = loader.load([
 
+        './resources/posx.jpg',
 
+        './resources/negx.jpg',
 
+        './resources/posy.jpg',
 
+        './resources/negy.jpg',
 
+        './resources/posz.jpg',
 
+        './resources/negz.jpg',
 
+    ]);
 
+    this._scene.background = texture;
 
+
 
+    const plane = new THREE.Mesh(
 
+        new THREE.PlaneGeometry(1000, 1000, 10, 10),
 
+        new THREE.MeshStandardMaterial({
 
+            color: 0x808080,
 
+          }));
 
+    plane.castShadow = false;
 
+    plane.receiveShadow = true;
 
+    plane.rotation.x = -Math.PI / 2;
 
+    this._scene.add(plane);
 
+
 
+    const knot = new THREE.Mesh(
 
+      new THREE.TorusKnotGeometry(5, 1.5, 100, 16),
 
+      new THREE.MeshStandardMaterial({
 
+          color: 0xFFFFFF,
 
+      }));
 
+    knot.position.set(0, 15, 0);
 
+    knot.castShadow = true;
 
+    knot.receiveShadow = true;
 
+    this._scene.add(knot);
 
+    this._knot = knot;
 
+
 
+    for (let x = -8; x < 8; x++) {
 
+      for (let y = -8; y < 8; y++) {
 
+        const box = new THREE.Mesh(
 
+          new THREE.BoxGeometry(2, 10, 2),
 
+          new THREE.MeshStandardMaterial({
 
+              color: 0x808080,
 
+          }));
 
+        box.position.set(Math.random() + x * 20, Math.random() * 4.0 + 5.0, Math.random() + y * 20);
 
+        box.castShadow = true;
 
+        box.receiveShadow = true;
 
+        this._scene.add(box);
 
+      }
 
+    }
 
+
 
+    this._RAF();
 
+  }
 
+
 
+  _OnWindowResize() {
 
+    this._camera.aspect = window.innerWidth / window.innerHeight;
 
+    this._camera.updateProjectionMatrix();
 
+    this._threejs.setSize(window.innerWidth, window.innerHeight);
 
+    this._composer.setSize(window.innerWidth, window.innerHeight);
 
+  }
 
+
 
+  _RAF() {
 
+    requestAnimationFrame(() => {
 
+      // this._knot.rotateY(0.01);
 
+      // this._knot.rotateZ(0.005);
 
+
 
+      // this._threejs.render(this._scene, this._camera);
 
+      this._composer.render();
 
+      this._RAF();
 
+    });
 
+  }
 
+}
 
+
 
+
 
+let _APP = null;
 
+
 
+window.addEventListener('DOMContentLoaded', () => {
 
+  _APP = new PostProcessingDemo();
 
+});

BIN
resources/negx.jpg
Dosyayı Görüntüle


BIN
resources/negy.jpg
Dosyayı Görüntüle


BIN
resources/negz.jpg
Dosyayı Görüntüle


BIN
resources/posx.jpg
Dosyayı Görüntüle


BIN
resources/posy.jpg
Dosyayı Görüntüle


BIN
resources/posz.jpg
Dosyayı Görüntüle


+ 13 - 0
resources/readme.txt
Dosyayı Görüntüle 

@@ -0,0 +1,13 @@
 
+Author

+======

+

+This is the work of Emil Persson, aka Humus.

+http://www.humus.name

+

+

+

+License

+=======

+

+This work is licensed under a Creative Commons Attribution 3.0 Unported License.

+http://creativecommons.org/licenses/by/3.0/