Bläddra i källkod

adding wood procedural texture in PT library

Etienne Margraff 9 år sedan
förälder
incheckning
be403d51a4

+ 3 - 3
proceduralTexturesLibrary/config.json

@@ -1,11 +1,11 @@
 {
   "proceduralTextures": [
     {
-      "file": "proceduralTextures/fire/babylon.fireProceduralTexture.ts",
+      "file": "proceduralTextures/wood/babylon.woodProceduralTexture.ts",
       "shaderFiles": [
-        "proceduralTextures/fire/fireProceduralTexture.fragment.fx"
+        "proceduralTextures/wood/woodProceduralTexture.fragment.fx"
       ],
-      "output": "babylon.fireProceduralTexture.js"
+      "output": "babylon.woodProceduralTexture.js"
     }
   ],
   "build": {

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 45 - 0
proceduralTexturesLibrary/dist/babylon.woodProceduralTexture.js


Filskillnaden har hållts tillbaka eftersom den är för stor
+ 1 - 0
proceduralTexturesLibrary/dist/babylon.woodProceduralTexture.min.js


+ 37 - 0
proceduralTexturesLibrary/proceduralTextures/wood/babylon.woodProceduralTexture.ts

@@ -0,0 +1,37 @@
+/// <reference path="../../../dist/preview release/babylon.d.ts"/>
+
+module BABYLON {
+	export class WoodProceduralTexture2 extends ProceduralTexture {
+        private _ampScale: number = 100.0;
+        private _woodColor: Color3 = new Color3(0.32, 0.17, 0.09);
+
+        constructor(name: string, size: number, scene: Scene, fallbackTexture?: Texture, generateMipMaps?: boolean) {
+            super(name, size, "woodtexture", scene, fallbackTexture, generateMipMaps);
+            this.updateShaderUniforms();
+            this.refreshRate = 0;
+        }
+
+        public updateShaderUniforms() {
+            this.setFloat("ampScale", this._ampScale);
+            this.setColor3("woodColor", this._woodColor);
+        }
+
+        public get ampScale(): number {
+            return this._ampScale;
+        }
+
+        public set ampScale(value: number) {
+            this._ampScale = value;
+            this.updateShaderUniforms();
+        }
+
+        public get woodColor(): Color3 {
+            return this._woodColor;
+        }
+
+        public set woodColor(value: Color3) {
+            this._woodColor = value;
+            this.updateShaderUniforms();
+        }
+    }
+}

+ 33 - 0
proceduralTexturesLibrary/proceduralTextures/wood/woodProceduralTexture.fragment.fx

@@ -0,0 +1,33 @@
+precision highp float;
+
+varying vec2 vPosition;
+varying vec2 vUV;
+
+uniform float ampScale;
+uniform vec3 woodColor;
+
+float rand(vec2 n) {
+	return fract(cos(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
+}
+
+float noise(vec2 n) {
+	const vec2 d = vec2(0.0, 1.0);
+	vec2 b = floor(n), f = smoothstep(vec2(0.0), vec2(1.0), fract(n));
+	return mix(mix(rand(b), rand(b + d.yx), f.x), mix(rand(b + d.xy), rand(b + d.yy), f.x), f.y);
+}
+
+float fbm(vec2 n) {
+	float total = 0.0, amplitude = 1.0;
+	for (int i = 0; i < 4; i++) {
+		total += noise(n) * amplitude;
+		n += n;
+		amplitude *= 0.5;
+	}
+	return total;
+}
+
+void main(void) {
+	float ratioy = mod(vUV.x * ampScale, 2.0 + fbm(vUV * 0.8));
+	vec3 wood = woodColor * ratioy;
+	gl_FragColor = vec4(wood, 1.0);
+}

+ 5 - 0
proceduralTexturesLibrary/test/add/addWoodPT.js

@@ -0,0 +1,5 @@
+window.addWoodPT = function() {
+    var wood = new BABYLON.WoodProceduralTexture2("woodPT", 256, scene);
+
+    return wood;
+};

+ 11 - 1
proceduralTexturesLibrary/test/index.html

@@ -5,6 +5,7 @@
 	<script src="refs/dat.gui.min.js"></script>
 	<script src="refs/babylon.max.js"></script>
 	<script src="../dist/babylon.fireProceduralTexture.js"></script>
+	<script src="../dist/babylon.woodProceduralTexture.js"></script>
 
 	<style>
 		html, body {
@@ -40,6 +41,7 @@
 
 	<script src="index.js"></script>
     <script src="add/addFirePT.js"></script>
+    <script src="add/addWoodPT.js"></script>
 	<script>
 		if (BABYLON.Engine.isSupported()) {
 			var canvas = document.getElementById("renderCanvas");
@@ -154,17 +156,25 @@
                 var firePT = addFirePT();
 				var fireMaterial =  new BABYLON.StandardMaterial("fire", scene);
 				fireMaterial.diffuseTexture = firePT;
+				
+				// Wood Procedural Texture
+                var woodPT = addWoodPT();
+				var woodMaterial =  new BABYLON.StandardMaterial("wood", scene);
+				woodMaterial.diffuseTexture = woodPT;
 								
 				// Default to std
 				var currentMaterial = std;
 				sphere.material = std;				
 				sphere.receiveShadows = true;
 
-				gui.add(options, 'material', ['none','fire']).onFinishChange(function () {
+				gui.add(options, 'material', ['none','fire', 'wood']).onFinishChange(function () {
 					switch (options.material) {
 						case "fire":
 							currentMaterial = fireMaterial;
 							break;
+						case "wood":
+							currentMaterial = woodMaterial;
+							break;
 						case "none":
 						default:
 							currentMaterial = std;