Skip to content

T
three.js

车家大少爷 / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

切换分支/标签
查找文件 普通视图历史永久链接Permalink
webgl_shaders_ocean2.html 7.1 KB
Newer Older
M
r67  
Mr.doob 已提交
1 
<!DOCTYPE html>
M
r72  
Mr.doob 已提交
2 
<html lang="en">
M
r67  
Mr.doob 已提交
3 4 
	<head>
		<meta charset="utf-8" />
M
r74  
Mr.doob 已提交
5 
		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
M
r67  
Mr.doob 已提交
6 7 8 9 
		<style type="text/css">
			body {
				margin: 0px;
				overflow: hidden;
M
r71  
Mr.doob 已提交
10 11 
				font-family: Monospace;
				text-align: center;
M
r67  
Mr.doob 已提交
12 
			}
M
r71  
Mr.doob 已提交
13 14 15 16 17 18 19 20 21 22 23 24 
			#info {
				color: #fff;
				position: absolute;
				top: 10px;
				width: 100%;
			}
			a {
				color: #09f;
			}
			#type-status {
				font-weight: bold;
			}
M
r72  
Mr.doob 已提交
25 
		</style>
M
r67  
Mr.doob 已提交
26 27 
	</head>
	<body>
M
r71  
Mr.doob 已提交
28 29 30 31 32 
		<div id="info">
			<a href="http://threejs.org" target="_blank">three.js</a> - webgl ocean simulation<br/>
			current simulation framebuffers type is <span id="type-status"></span><br/>
			change type to <span id="change-type"></span>
		</div>
M
r67  
Mr.doob 已提交
33
M
r76  
Mr.doob 已提交
34 
		<script src="../build/three.js"></script>
M
r71  
Mr.doob 已提交
35 
		<script src="js/libs/stats.min.js"></script>
M
r67  
Mr.doob 已提交
36 37 38 
		<script src="js/libs/dat.gui.min.js"></script>
		<script src="js/controls/OrbitControls.js"></script>
		<script src="js/shaders/OceanShaders.js"></script>
M
r72  
Mr.doob 已提交
39 
		<script src="js/Ocean.js"></script>
M
r67  
Mr.doob 已提交
40 41 

		<script>
M
r72  
Mr.doob 已提交
42 
			var stats = new Stats();
M
r76  
Mr.doob 已提交
43 
			document.body.appendChild( stats.dom );
M
r72  
Mr.doob 已提交
44
M
r67  
Mr.doob 已提交
45 46 
			var lastTime = (new Date()).getTime();
M
r71  
Mr.doob 已提交
47 48 
			var types = { 'float': 'half-float', 'half-float': 'float' };
			var hash = document.location.hash.substr( 1 );
M
r72  
Mr.doob 已提交
49 
			if (!(hash in types)) hash = 'half-float';
M
r71  
Mr.doob 已提交
50 51 

			document.getElementById('type-status').innerHTML = hash;
M
r72  
Mr.doob 已提交
52 
			document.getElementById('change-type').innerHTML = '<a href="#" onclick="return change(\'' + types[hash] + '\')">' + types[hash] + '</a>';
M
r67  
Mr.doob 已提交
53 54 55 

			var lastTime = (new Date()).getTime();
M
r71  
Mr.doob 已提交
56 57 58 59 60 61 
			function change(n) {
				location.hash = n;
				location.reload();
				return false;
			}
M
r67  
Mr.doob 已提交
62 63 64 65 66 67 68 69 70 71 72 
			var DEMO =
			{
				ms_Renderer: null,
				ms_Camera: null,
				ms_Scene: null,
				ms_Controls: null,
				ms_Ocean: null,

				Initialize: function () {

					this.ms_Renderer = new THREE.WebGLRenderer();
M
r70  
Mr.doob 已提交
73 
					this.ms_Renderer.setPixelRatio( window.devicePixelRatio );
M
r67  
Mr.doob 已提交
74 75 76 77 78 79 80 
					this.ms_Renderer.context.getExtension('OES_texture_float');
					this.ms_Renderer.context.getExtension('OES_texture_float_linear');

					document.body.appendChild(this.ms_Renderer.domElement);

					this.ms_Scene = new THREE.Scene();
M
r72  
Mr.doob 已提交
81 
					this.ms_Camera = new THREE.PerspectiveCamera(55.0, window.innerWidth / window.innerHeight, 0.5, 300000);
M
r67  
Mr.doob 已提交
82 83 84 
					this.ms_Camera.position.set(450, 350, 450);
					this.ms_Camera.lookAt(new THREE.Vector3());
M
r72  
Mr.doob 已提交
85 
					// Initialize Orbit control
M
r67  
Mr.doob 已提交
86 87 88 89 90 91 92 
					this.ms_Controls = new THREE.OrbitControls(this.ms_Camera, this.ms_Renderer.domElement);
					this.ms_Controls.userPan = false;
					this.ms_Controls.userPanSpeed = 0.0;
					this.ms_Controls.minDistance = 0;
					this.ms_Controls.maxDistance = 2000.0;
					this.ms_Controls.minPolarAngle = 0;
					this.ms_Controls.maxPolarAngle = Math.PI * 0.495;
M
r72  
Mr.doob 已提交
93 94 95 

					var gsize = 512;
					var res = 1024;
M
r67  
Mr.doob 已提交
96 97 98 99 100 
					var gres = res / 2;
					var origx = -gsize / 2;
					var origz = -gsize / 2;
					this.ms_Ocean = new THREE.Ocean(this.ms_Renderer, this.ms_Camera, this.ms_Scene,
					{
M
r71  
Mr.doob 已提交
101 
						USE_HALF_FLOAT : hash === 'half-float',
M
r67  
Mr.doob 已提交
102 103 104 105 106 107 108 109 110 111 112 113 114 
						INITIAL_SIZE : 256.0,
						INITIAL_WIND : [10.0, 10.0],
						INITIAL_CHOPPINESS : 1.5,
						CLEAR_COLOR : [1.0, 1.0, 1.0, 0.0],
						GEOMETRY_ORIGIN : [origx, origz],
						SUN_DIRECTION : [-1.0, 1.0, 1.0],
						OCEAN_COLOR: new THREE.Vector3(0.004, 0.016, 0.047),
						SKY_COLOR: new THREE.Vector3(3.2, 9.6, 12.8),
						EXPOSURE : 0.35,
						GEOMETRY_RESOLUTION: gres,
						GEOMETRY_SIZE : gsize,
						RESOLUTION : res
					});
M
r78  
Mr.doob 已提交
115 116 117 
					this.ms_Ocean.materialOcean.uniforms.u_projectionMatrix = { value: this.ms_Camera.projectionMatrix };
					this.ms_Ocean.materialOcean.uniforms.u_viewMatrix = { value: this.ms_Camera.matrixWorldInverse };
					this.ms_Ocean.materialOcean.uniforms.u_cameraPosition = { value: this.ms_Camera.position };
M
r67  
Mr.doob 已提交
118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 
					this.ms_Scene.add(this.ms_Ocean.oceanMesh);

					var gui = new dat.GUI();
					var c1 = gui.add(this.ms_Ocean, "size",100, 5000);
					c1.onChange(function(v) {
						this.object.size = v;
						this.object.changed = true;
					});
					var c2 = gui.add(this.ms_Ocean, "choppiness", 0.1, 4);
					c2.onChange(function (v) {
						this.object.choppiness = v;
						this.object.changed = true;
					});
					var c3 = gui.add(this.ms_Ocean, "windX",-15, 15);
					c3.onChange(function (v) {
						this.object.windX = v;
						this.object.changed = true;
					});
					var c4 = gui.add(this.ms_Ocean, "windY", -15, 15);
					c4.onChange(function (v) {
						this.object.windY = v;
						this.object.changed = true;
					});
					var c5 = gui.add(this.ms_Ocean, "sunDirectionX", -1.0, 1.0);
					c5.onChange(function (v) {
						this.object.sunDirectionX = v;
						this.object.changed = true;
					});
					var c6 = gui.add(this.ms_Ocean, "sunDirectionY", -1.0, 1.0);
					c6.onChange(function (v) {
						this.object.sunDirectionY = v;
						this.object.changed = true;
					});
					var c7 = gui.add(this.ms_Ocean, "sunDirectionZ", -1.0, 1.0);
					c7.onChange(function (v) {
						this.object.sunDirectionZ = v;
						this.object.changed = true;
					});
					var c8 = gui.add(this.ms_Ocean, "exposure", 0.0, 0.5);
					c8.onChange(function (v) {
						this.object.exposure = v;
						this.object.changed = true;
					});
				},
M
r71  
Mr.doob 已提交
162
M
r67  
Mr.doob 已提交
163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 
				Display: function () {
					this.ms_Renderer.render(this.ms_Scene, this.ms_Camera);
				},

				Update: function () {
					var currentTime = new Date().getTime();
					this.ms_Ocean.deltaTime = (currentTime - lastTime) / 1000 || 0.0;
					lastTime = currentTime;
					this.ms_Ocean.render(this.ms_Ocean.deltaTime);
					this.ms_Ocean.overrideMaterial = this.ms_Ocean.materialOcean;
					if (this.ms_Ocean.changed) {
						this.ms_Ocean.materialOcean.uniforms.u_size.value = this.ms_Ocean.size;
						this.ms_Ocean.materialOcean.uniforms.u_sunDirection.value.set( this.ms_Ocean.sunDirectionX, this.ms_Ocean.sunDirectionY, this.ms_Ocean.sunDirectionZ );
						this.ms_Ocean.materialOcean.uniforms.u_exposure.value = this.ms_Ocean.exposure;
						this.ms_Ocean.changed = false;
					}
M
r77  
Mr.doob 已提交
179 180 181 182 
					this.ms_Ocean.materialOcean.uniforms.u_normalMap.value = this.ms_Ocean.normalMapFramebuffer.texture;
					this.ms_Ocean.materialOcean.uniforms.u_displacementMap.value = this.ms_Ocean.displacementMapFramebuffer.texture;
					this.ms_Ocean.materialOcean.uniforms.u_projectionMatrix.value = this.ms_Camera.projectionMatrix;
					this.ms_Ocean.materialOcean.uniforms.u_viewMatrix.value = this.ms_Camera.matrixWorldInverse;
M
r67  
Mr.doob 已提交
183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 
					this.ms_Ocean.materialOcean.uniforms.u_cameraPosition.value = this.ms_Camera.position;
					this.ms_Ocean.materialOcean.depthTest = true;
					//this.ms_Scene.__lights[1].position.x = this.ms_Scene.__lights[1].position.x + 0.01;
					this.ms_Controls.update();
					this.Display();
				},

				Resize: function (inWidth, inHeight) {
					this.ms_Camera.aspect = inWidth / inHeight;
					this.ms_Camera.updateProjectionMatrix();
					this.ms_Renderer.setSize(inWidth, inHeight);
					this.Display();
				}
			};

			DEMO.Initialize();
M
r72  
Mr.doob 已提交
200 201 202 203 
			window.addEventListener( 'resize', function () {
				DEMO.Resize(window.innerWidth, window.innerHeight);
			} );
			DEMO.Resize(window.innerWidth, window.innerHeight);
M
r67  
Mr.doob 已提交
204 205 206 207 208 

			var render = function () {

				requestAnimationFrame( render );
				DEMO.Update();
M
r71  
Mr.doob 已提交
209 
				stats.update();
M
r67  
Mr.doob 已提交
210 211 212 213 214 215 216 

			};

			render();

		</script>
	</body>
M
r70  
Mr.doob 已提交
217 
</html>