SirmaXX/hdrlinki

## hdrlinki

hdr dosyası buradan indirebilirsiniz
https://threejs.org/examples/webgl_loader_gltf/textures/equirectangular/royal_esplanade_1k.hdr

## index.html
<!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/es-module-shims@1.6.3/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>

## index.js
// 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();

	hdr dosyası buradan indirebilirsiniz
	https://threejs.org/examples/webgl_loader_gltf/textures/equirectangular/royal_esplanade_1k.hdr
	<!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/es-module-shims@1.6.3/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>
	// 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();