Last active
February 24, 2024 09:52
-
-
Save SirmaXX/1b8a2755b67c2904de31ba17aa012f1d to your computer and use it in GitHub Desktop.
beckman shader
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| hdr dosyası buradan indirebilirsiniz | |
| https://threejs.org/examples/webgl_loader_gltf/textures/equirectangular/royal_esplanade_1k.hdr |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Shaderlar</title> | |
| <style> | |
| body { margin: 0; } | |
| </style> | |
| </head> | |
| <body> | |
| <script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script> | |
| <script type="importmap"> | |
| { | |
| "imports": { | |
| "three": "https://unpkg.com/three/build/three.module.js", | |
| "three/addons/": "https://unpkg.com/three/examples/jsm/" | |
| } | |
| } | |
| </script> | |
| <script src="index.js" type="module"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Gerekli Three.js kütüphanelerini ekleyelim. | |
| import * as THREE from 'three'; | |
| import { OrbitControls } from 'three/addons/controls/OrbitControls.js'; | |
| import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js'; | |
| import { RGBELoader } from 'three/addons/loaders/RGBELoader.js'; | |
| // Bir sahne oluşturalım | |
| const scene = new THREE.Scene(); | |
| // Bir kamera oluşturalım | |
| const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); | |
| camera.position.z = 5; | |
| // Renderer mekanizmasını açalım | |
| const renderer = new THREE.WebGLRenderer(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.body.appendChild(renderer.domElement); | |
| // OrbitControls'u ekleyelim. | |
| const controls = new OrbitControls(camera, renderer.domElement); | |
| controls.target.set(0, 0, 0); // Kameranın döndüğü hedef nokta | |
| // HDR yükleyelim | |
| new RGBELoader() | |
| .load('brown_photostudio_05_4k.hdr', function (texture) { | |
| texture.mapping = THREE.EquirectangularReflectionMapping; | |
| scene.background = texture; | |
| scene.environment = texture; | |
| }); | |
| // Küp oluşturalım | |
| const cubeGeometry = new THREE.BoxGeometry(2, 2, 2); | |
| // Aşağıdaki gibi 2 farklı material oluşturalım standart ve beckman dağılımından | |
| // oluşturulan shaderlar aşağıdaki gibidir. | |
| const Standartmaterial = new THREE.MeshStandardMaterial({ | |
| color: 0xffffff, // Malzemenin rengi | |
| roughness: 0.5, // Pürüzlülük | |
| metalness: 0.5 // Metaliklik | |
| }); | |
| // Beckman dağılımı ile kullanılacak shader malzemesi | |
| const shaderMaterialCube = new THREE.ShaderMaterial({ | |
| uniforms: { | |
| roughness: { value: 0.1 } // Beckmann dağılımı için pürüzlülük parametresi | |
| }, | |
| vertexShader: ` | |
| varying vec3 vNormal; | |
| void main() { | |
| vNormal = normal; | |
| gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); | |
| } | |
| `, | |
| fragmentShader: ` | |
| varying vec3 vNormal; | |
| uniform float roughness; | |
| // Beckmann dağılımı fonksiyonu | |
| float beckmannDistribution(float cosTheta, float roughness) { | |
| float alpha = roughness * roughness; | |
| float cosTheta2 = cosTheta * cosTheta; | |
| float tanTheta2 = (1.0 - cosTheta2) / cosTheta2; | |
| float beckmannExp = exp(-tanTheta2 / alpha); | |
| return beckmannExp / (alpha * cosTheta2 * cosTheta2); | |
| } | |
| void main() { | |
| // Normal vektörü ile görme yönlü arasındaki açının kosinüsünü alın | |
| float cosTheta = dot(normalize(vec3(0.0, 0.0, 1.0)), normalize(vNormal)); | |
| // Verilen pürüzlülük parametresi için Beckmann dağılımını hesaplayın | |
| float beckmann = beckmannDistribution(cosTheta, roughness); | |
| // Beckmann dağılımına göre renk yoğunluğunu modüle edin | |
| vec3 color = vec3(beckmann); | |
| gl_FragColor = vec4(color, 0.1); | |
| } | |
| ` | |
| }); | |
| //Aşağıdaki gibi 2 farklı materiali yorum satırları üzerinden test edebilirsiniz. | |
| const cubeMesh = new THREE.Mesh(cubeGeometry, shaderMaterialCube); | |
| //const cubeMesh = new THREE.Mesh(cubeGeometry, Standartmaterial); | |
| scene.add(cubeMesh); | |
| // Ekran yeniden boyutlandırıldığında kamera ve renderer'ı güncelleyelim. | |
| function onWindowResize() { | |
| camera.aspect = window.innerWidth / window.innerHeight; | |
| camera.updateProjectionMatrix(); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| } | |
| // Resize fonksiyonunu çağıralım. | |
| window.addEventListener('resize', onWindowResize); | |
| // Render fonksiyonunu tanımlayalım. | |
| function render() { | |
| requestAnimationFrame(render); | |
| renderer.render(scene, camera); | |
| } | |
| // Render fonksiyonunu çağıralım. | |
| render(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment