Почетна Преглед Помоћ
Пријавите се
javascript
/
three.js
огледало од https://github.com/tazdij/three.js.git
2
0
Креирај огранак 0
Датотеке Дискусије 0 Вики
Преглед изворни кода

skeleton

meatbags пре 7 година
родитељ
5d62862217
комит
cdc0e67e9c
4 измењених фајлова са 187 додато и 0 уклоњено
Један поглед Покажи статистику Diff
  1. 1 0
      examples/files.js
  2. 48 0
      examples/js/postprocessing/HalftonePass.js
  3. 26 0
      examples/js/shaders/HalftoneShader.js
  4. 112 0
      examples/webgl_postprocessing_color_halftone.html

+ 1 - 0
examples/files.js
Прегледај датотеку 

@@ -229,6 +229,7 @@ var files = {
 
 		"webgl_postprocessing_fxaa",
 
 		"webgl_postprocessing_fxaa",
 
 		"webgl_postprocessing_glitch",
 
 		"webgl_postprocessing_glitch",
 
 		"webgl_postprocessing_godrays",
 
 		"webgl_postprocessing_godrays",
 
+		"webgl_postprocessing_color_halftone",
 
 		"webgl_postprocessing_masking",
 
 		"webgl_postprocessing_masking",
 
 		"webgl_postprocessing_ssaa",
 
 		"webgl_postprocessing_ssaa",
 
 		"webgl_postprocessing_ssaa_unbiased",
 
 		"webgl_postprocessing_ssaa_unbiased",

+ 48 - 0
examples/js/postprocessing/HalftonePass.js
Прегледај датотеку 

@@ -0,0 +1,48 @@
 
+/**
 
+ * @author meatbags / xavierburrow.com, github/meatbags
 
+ */
 
+
 
+THREE.HalftonePass = function(scene, camera, width, height, texture) {
 
+	THREE.Pass.call(this);
 
+
 
+	this.scene = scene;
 
+	this.camera = camera;
 
+	this.width = width;
 
+	this.height = height;
 
+
 
+	if (THREE.HalftoneShader === undefined) {
 
+		console.error('THREE.HalftonePass requires THREE.HalftoneShader');
 
+	}
 
+
 
+	this.shader = THREE.HalftoneShader;
 
+	this.material = new THREE.ShaderMaterial({
 
+		uniforms: THREE.UniformsUtils.clone(this.shader.uniforms),
 
+		fragmentShader: this.shader.fragmentShader,
 
+		vertexShader: this.shader.vertexShader
 
+	});
 
+
 
+	this.camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
 
+	this.scene = new THREE.Scene();
 
+	this.quad = new THREE.Mesh(new THREE.PlaneBufferGeometry(2, 2), null);
 
+	this.quad.frustumCulled = false;
 
+	this.scene.add(this.quad);
 
+};
 
+
 
+THREE.HalftonePass.prototype = Object.assign(Object.create(THREE.Pass.prototype), {
 
+	constructor: THREE.HalftonePass,
 
+	render: function(renderer, writeBuffer, readBuffer, delta, maskActive) {
 
+		this.material.uniforms["tDiffuse"].value = readBuffer.texture;
 
+		this.quad.material = this.material;
 
+
 
+		if (this.renderToScreen) {
 
+			renderer.render(this.scene, this.camera);
 
+		} else {
 
+			renderer.render(this.scene, this.camera, writeBuffer, this.clear);
 
+		}
 
+	},
 
+	setSize: function(width, height) {
 
+		this.width = width;
 
+		this.height = height;
 
+		// send to shader uniforms
 
+	}
 
+});

+ 26 - 0
examples/js/shaders/HalftoneShader.js
Прегледај датотеку 

@@ -0,0 +1,26 @@
 
+/**
 
+ * @author meatbags / http://xavierburrow.com/
 
+ *
 
+ * Colour halftone shader
 
+ */
 
+
 
+THREE.HalftonShader = {
 
+	uniforms: {
 
+		"tDiffuse": {value: null},
 
+	},
 
+	vertexShader: `
 
+    varying vec2 vUv;
 
+
 
+    void main() {
 
+      vUv = uv;
 
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
 
+    }`,
 
+	fragmentShader: `
 
+		uniform sampler2D tDiffuse;
 
+		varying vec2 vUv;
 
+
 
+		void main() {
 
+			vec4 color = texture2D(tDiffuse, vUv);
 
+			gl_FragColor = color;
 
+		}`
 
+};

+ 112 - 0
examples/webgl_postprocessing_color_halftone.html
Прегледај датотеку 

@@ -0,0 +1,112 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			body {
 
+				font-family: Monospace;
 
+				background-color: #f0f0f0;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			.info {
 
+				position: absolute;
 
+				background-color: black;
 
+				opacity: 0.8;
 
+				color: white;
 
+				text-align: center;
 
+				top: 0px;
 
+				width: 100%;
 
+			}
 
+
 
+			.info a {
 
+				color: #00ffff;
 
+			}
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<script src="../build/three.js"></script>
 
+		<script src="js/postprocessing/EffectComposer.js"></script>
 
+		<script src="js/postprocessing/RenderPass.js"></script>
 
+		<script src="js/postprocessing/ShaderPass.js"></script>
 
+		<script src="js/postprocessing/HalftonePass.js"></script>
 
+		<script src="js/shaders/CopyShader.js"></script>
 
+		<script src="js/shaders/HalftoneShader.js"></script>
 
+		<script src="js/shaders/DepthLimitedBlurShader.js"></script>
 
+		<script src="js/shaders/UnpackDepthRGBAShader.js"></script>
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+		<script src='js/libs/dat.gui.min.js'></script>
 
+
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank" rel="noopener noreferrer">three.js</a> - Halftone shader by @meatbags
 
+		</div>
 
+
 
+		<script>
 
+
 
+		class Example {
 
+			constructor() {
 
+				this.wrapper = document.createElement('div');
 
+				document.body.appendChild(this.wrapper);
 
+
 
+			 	this.clock = new THREE.Clock();
 
+			 	this.width = window.innerWidth;
 
+			 	this.height = window.innerHeight;
 
+			 	this.camera = new THREE.PerspectiveCamera(75, this.width / this.height, 1, 1000);
 
+				this.camera.position.z = 20;
 
+
 
+				this.initScene();
 
+				this.initRender();
 
+				this.loop();
 
+			}
 
+
 
+			initScene() {
 
+				var geo = new THREE.BoxBufferGeometry(1, 1, 1);
 
+				var mat = new THREE.MeshBasicMaterial({});
 
+				this.group = new THREE.Group();
 
+
 
+				for (var i=0, len=20; i<len; ++i) {
 
+					var mesh = new THREE.Mesh(geo.clone(), mat.clone());
 
+					mesh.position.x = Math.random() * 10 - 5;
 
+					mesh.position.y = Math.random() * 10 - 5;
 
+					mesh.position.z = Math.random() * 10 - 5;
 
+					this.group.add(mesh);
 
+				}
 
+
 
+				this.scene = new THREE.Scene();
 
+				this.scene.background = new THREE.Color(0x111111);
 
+				this.scene.add(this.group);
 
+			}
 
+
 
+			initRender() {
 
+				// 3js renderer
 
+				this.renderer = new THREE.WebGLRenderer();
 
+				this.renderer.setPixelRatio(window.devicePixelRatio);
 
+				this.renderer.setSize(window.innerWidth, window.innerHeight);
 
+
 
+				// effect composer
 
+				this.composer = new THREE.EffectComposer(this.renderer);
 
+			 	this.renderPass = new THREE.RenderPass(this.scene, this.camera);
 
+				this.renderPass.renderToScreen = true;
 
+				this.composer.addPass(this.renderPass);
 
+
 
+				// add to doc
 
+				this.wrapper.appendChild(this.renderer.domElement);
 
+			}
 
+
 
+			loop() {
 
+				requestAnimationFrame(() => { this.loop(); });
 
+				var delta = this.clock.getDelta();
 
+				this.group.rotation.y += delta * Math.PI * 0.25;
 
+				this.composer.render(delta);
 
+			}
 
+		}
 
+
 
+		var example = new Example();
 
+
 
+		</script>
 
+	</body>
 
+</html>