Three.js - Shaders - Versionsgeschichte

134.3.74.15: /* Links */

2022-02-06T09:50:09Z

Links

134.3.74.15: /* Shader Snippets */

2022-02-05T21:53:50Z

Shader Snippets

134.3.74.15: /* Shader Snippets */

2022-02-05T21:53:22Z

Shader Snippets

134.3.74.15 am 5. Februar 2022 um 21:52 Uhr

2022-02-05T21:52:25Z

134.3.74.15: /* Links */

2022-02-03T14:51:35Z

Links

134.3.74.15: /* Links */

2022-02-03T14:51:16Z

Links

134.3.241.3: /* Links */

2022-01-03T12:33:01Z

Links

134.3.241.3: /* Links */

2022-01-03T12:32:31Z

Links

134.3.241.3: /* Komplettes Beispiel */

2022-01-03T12:32:02Z

Komplettes Beispiel

Änderungen zeigen

134.3.241.3: /* Texture und Color im eigenen Shader */

2022-01-03T12:30:20Z

Texture und Color im eigenen Shader

@@ Zeile 1: / Zeile 1: @@
 == Links ==
   [[ThreeJS - Snippets]]
   https://www.shaderific.com/glsl-functions - Überblick über Funktionen

@@ Zeile 758: / Zeile 758: @@
 fragment.glsl
 <syntaxhighlight lang="c">
 void main()

@@ Zeile 756: / Zeile 756: @@
+}
 </syntaxhighlight>
 fragment.glsl
 <syntaxhighlight lang="c">
 void main()
@@ Zeile 762: / Zeile 764: @@
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
+}
-<syntaxhighlight>
+</syntaxhighlight>

← Nächstältere Version		Version vom 5. Februar 2022, 21:52 Uhr
Zeile 742:		Zeile 742:
	gl_FragColor = vec4(vUv, 1.0, 1.0);		gl_FragColor = vec4(vUv, 1.0, 1.0);
	Ansonsten bei Fehlern in der Konsole schauen was passiert.		Ansonsten bei Fehlern in der Konsole schauen was passiert.
		+
		+	== Shader Snippets ==
		+	=== Starter ===
		+	vertex.glsl
		+	<syntaxhighlight lang="c">
		+	void main()
		+	{
		+	vec4 modelPosition = modelMatrix * vec4(position, 1.0);
		+	vec4 viewPosition = viewMatrix * modelPosition;
		+	vec4 projectionPosition = projectionMatrix * viewPosition;
		+
		+	gl_Position = projectionPosition;
		+	}
		+	</syntaxhighlight>
		+	fragment.glsl
		+	<syntaxhighlight lang="c">
		+	void main()
		+	{
		+	gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
		+	}
		+	<syntaxhighlight>

@@ Zeile 1: / Zeile 1: @@
 == Links ==
-  [[Three.js - Snippets]]
+  [[ThreeJS - Snippets]]
   https://www.shaderific.com/glsl-functions - Überblick über Funktionen

← Nächstältere Version		Version vom 3. Januar 2022, 12:30 Uhr
Zeile 441:		Zeile 441:
	</syntaxhighlight>		</syntaxhighlight>
	Hinweis: Die Werte in vec3 Objekten kann man über x,y,z aber auch r,g,b auslesen. Das ist in diesem Fall naheliegender.		Hinweis: Die Werte in vec3 Objekten kann man über x,y,z aber auch r,g,b auslesen. Das ist in diesem Fall naheliegender.
		+
		+	==== Texture ====
		+	Um eine '''Textur im Fragment Shader''' zu nutzen gibt es eine eigene Funktion: '''texture2D'''. Diese Funktion benötigt die '''Textur''' und zusätzlich die '''uv Koordinaten''' als Anweisung wie die Textur aufgebracht werden soll.
		+
		+	'''1. Textur laden'''
		+
		+	Mit dem '''TextureLoader -> Textur''' laden. Und '''neues Uniform''' erstellen mit dem wir die '''Textur senden'''.
		+	Im FragmentShader die Textur als '''2DSampler''' empfangen
		+
		+	'''2 UV-Koordinaten senden''
		+
		+	Die uv-Koordinaten finden wir in der Geometrie. In unserem '''Plane''' hat Three.js das '''uv Property''' erstellt. Dieses holen wir uns direkt im Vertex Shader ab und senden es an den Fragment Shader. Dafür erstellen wir ein Varying vUv und füllen es in main mit den jeweils anfallenden Werten.
		+
		+	'''script.js'''
		+	<syntaxhighlight lang="javascript">
		+	/**
		+	* Textures
		+	*/
		+	const textureLoader = new THREE.TextureLoader()
		+	const flagTexture = textureLoader.load('/textures/flag-germany-sq.png')
		+	//...
		+	// Material
		+	const material = new THREE.RawShaderMaterial({
		+	vertexShader: testVertexShader,
		+	fragmentShader: testFragmentShader,
		+	uniforms:{
		+	//...
		+	uTexture: {value: flagTexture}
		+	},
		+	})
		+	</syntaxhighlight>
		+
		+	'''vertex.glsl'''
		+	<syntaxhighlight lang="glsl">
		+	// ...
		+	attribute vec2 uv; // get uv property from plane
		+	varying vec2 vUv; // create new varying to store uv values
		+	void main()
		+	{
		+	// ...
		+	vUv = uv; // fill vUv with uv values
		+	// ...
		+	}
		+	</syntaxhighlight>
		+
		+	'''fragment.glsl'''
		+	<syntaxhighlight lang="glsl">
		+	precision mediump float;
		+
		+	uniform sampler2D uTexture;
		+	varying vec2 vUv;
		+
		+	void main()
		+	{
		+	vec4 fragTexture = texture2D(uTexture, vUv);
		+	gl_FragColor = fragTexture;
		+
		+	}
		+	</syntaxhighlight>
		+
		+	'''Schatten simulieren'''
		+	Wir können die Höhe der Vertices nutzen umd Schatten zu simulieren. Das reicht für viele Zwecke aus. Dazu übergeben wir die Höhe vom vertex and den fragment shader und nutzen diesen Wert um tiefe Stellen abzudunkeln:
		+	<syntaxhighlight lang="glsl">
		+	float elevation = 0.0;
		+	// ...
		+	varying float vElevation;
		+
		+	// ... in main loop ...
		+	elevation += sin(modelPosition.x * uFrequency.x - uTime * uSpeed ) * uAmplitude;
		+	elevation += sin(modelPosition.y * uFrequency.y - uTime * uSpeed) * uAmplitude;
		+	modelPosition.z += elevation;
		+	vElevation = elevation;
		+	</syntaxhighlight>
		+	Fragment Shader
		+	<syntaxhighlight lang="glsl">
		+	//...
		+	varying float vElevation;
		+	// in main loop ...
		+	vec4 fragTexture = texture2D(uTexture, vUv); // add texture
		+	fragTexture.rgb = vElevation 2.0 + 0.5; // simulate shadow / since -0.5 to 0.5 add 0.5 / * 2 to spread values
		+	</syntaxhighlight>
		+
		+	=== Komplettes Beispiel ===
		+	<syntaxhighlight lang="glsl">
		+	</syntaxhighlight>
		+	<syntaxhighlight lang="glsl">
		+	</syntaxhighlight>
		+	<syntaxhighlight lang="glsl">
		+	</syntaxhighlight>
		+	=== ShaderMaterial statt RawShaderMaterial ===
		+	Das ShaderMaterial übermittelt automatisch einige Parameter. Daher kann man folgende in den Shadern weglassen, diese stehen automatisch zur Verfügung.
		+	<pre>
		+	uniform mat4 projectionMatrix;
		+	uniform mat4 viewMatrix;
		+	uniform mat4 modelMatrix;
		+	attribute vec3 position;
		+	attribute vec2 uv;
		+	precision mediump float;
		+	</pre>
		+	Es werden noch einige weitere übergeben die wir bisher aber nicht benutzt haben.
		+	=== Shader Debugging ===
		+	Ist nicht so einfach. Man kann z.B. Werte direkt als Farbwerte nutzen, dann bekommt man einen visuelle Repräsentation der Werte und kann eher Einschätzen was passiert.
		+	gl_FragColor = vec4(vUv, 1.0, 1.0);
		+	Ansonsten bei Fehlern in der Konsole schauen was passiert.