根据 https://shaderfrog.com/2/editor/clnwgwyy50000pa2ykmvprcf7 优化了参数代码，但是移植性很弱，故不考虑

2025-04-05 06:22:43 +08:00 · 2023-12-06 17:51:39 +08:00 · 2023-12-06 17:51:39 +08:00 · 644f8dd1d5
commit 644f8dd1d5
parent 4b78fde75d
7 changed files with 63 additions and 145 deletions
--- a/src/components/aboutUs.vue
+++ b/src/components/aboutUs.vue
@ -1,72 +0,0 @@
-<!--
- * @Description: 
- * @Version: 1.668
- * @Autor: 地虎降天龙
- * @Date: 2023-11-09 09:05:30
- * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-11-09 09:30:36
-->
-<template>
-	<FDivider titlePlacement="left">关于我们 - ICEGL</FDivider>
-	<div class="article-text">
-		<p>
-			<img style="width:200px;"
-				src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20221122/9ed6756107c4e0c031ae26d54cb46c0d.png">
-		</p>
-		<p>
-			欢迎来到 <strong><span style="color:#337FE5;">ICE</span></strong> 「<em>Image、Community、Education</em>」图形学社区，围绕 webgl
-			的交流学习社区，这里是国内最全的 Web 图形学知识库，同时也是一个致力于打造全新图形学生态体系的社区。
-		</p>
-		<p>
-			我们的使命是通过开源协作和知识分享，促进图形学技术的不断进步。我们相信图形学是一个无限创新的领域，可以应用于游戏开发、虚拟现实、增强现实、计算机辅助设计等多个领域。
-		</p>
-		<h3 class="text-center" style="color:#337FE5;"><strong>🤔 问题反馈</strong></h3>
-		<p>
-			在使用中有任何问题，请使用以下联系方式联系我们
-			<a href="https://www.icegl.cn/ask">图形学社区icegl.cn</a>
-		</p>
-		<p>
-			<img src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20230421/QQ20230421-121209.png" width="680">
-		</p>
-		<h3 class="text-center" style="color:#337FE5;"><strong>🧑‍💻 联系我们</strong></h3>
-		<p>
-			欢迎大家也加入微信群，已有几个群已满，一起学习讨论webgl。加微信我拉进群
-		</p>
-		<p>
-			<img
-				src="https://icegl-1314935952.cos.ap-beijing.myqcloud.com/uploads/20230731/17d59bab46815cce1f4f1e09dcbb6ccc.png"
-				width="300">
-		</p>
-	</div>
-</template>
-<script setup lang="ts">
-import { FDivider } from '@fesjs/fes-design';
-
-</script>
-
-<style lang="less" scoped>
-.article-text {
-	line-height: 30px;
-	margin-bottom: 15px;
-	padding: 0px 20px;
-
-	p {
-		text-indent: 2em;
-		/* 首行缩进2个字母的距离 */
-	}
-
-	img {
-		margin: 10px auto;
-		display: block;
-		max-width: 100%;
-		height: auto;
-		cursor: zoom-in;
-		-webkit-border-radius: 2px;
-		-webkit-background-clip: padding-box;
-		-moz-border-radius: 2px;
-		-moz-background-clip: padding;
-		border-radius: 2px;
-		background-clip: padding-box;
-	}
-}
-</style>
--- a/src/plugins/basic/pages/htmls/website.vue
+++ b/src/plugins/basic/pages/htmls/website.vue
@ -19,7 +19,7 @@ const gl = {
    <TresPerspectiveCamera :position="[-5, 4, 3]" />
    <OrbitControls />
    <Suspense>
-      <laptop/>
+      <laptop />
    </Suspense>
    <!-- <ContactShadows :blur="3.5" :resolution="512" :opacity="1" /> -->
    <TresAmbientLight :intensity="1" />
--- a/src/plugins/preview.vue
+++ b/src/plugins/preview.vue
@ -4,7 +4,7 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-11-18 22:17:49
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-04 19:34:10
+ * @LastEditTime: 2023-12-06 16:28:10
 -->
 <template>
    <div class="flex h-full">
@ -32,15 +32,6 @@
                        </f-menu-item>
                    </template>
                </f-sub-menu>
-                <!-- <f-sub-menu value="8">
-                    <template #icon>
-                        <ClusterOutlined />
-                    </template>
-                    <template #label>aboutUs</template>
-                    <f-menu-item value="abus">
-                        <template #label>关于我们</template>
-                    </f-menu-item>
-                </f-sub-menu> -->
            </f-menu>
        </div>
        <div class="flex-1 overflow-scroll" style="height: calc(100vh - 54px);">
@ -55,9 +46,6 @@
                    </div>
                </template>
            </template>
-            <!-- <div style="background-color: #f1f1f2;" :ref="el => tabListRef.abus = el">
-                <aboutUs />
-            </div> -->
        </div>
    </div>
 </template>
@ -65,10 +53,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { defineRouteMeta } from '@fesjs/fes';
-import { AppstoreOutlined, PictureOutlined, ClusterOutlined } from '@fesjs/fes-design/icon';
+import { AppstoreOutlined, PictureOutlined } from '@fesjs/fes-design/icon';
 import { getPluginsConfig } from '../common/utils';
 import cardList from '../components/cardList.vue'
-import aboutUs from '../components/aboutUs.vue'

 defineRouteMeta({
    name: 'preview',
--- a/src/plugins/water/components/waterGlass.vue
+++ b/src/plugins/water/components/waterGlass.vue
@ -4,12 +4,12 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-12-01 14:04:27
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-01 19:24:26
+ * @LastEditTime: 2023-12-06 17:48:00
 -->

 <template>
-	<TresMesh :rotation-x="-Math.PI / 2" :position-y="1">
-		<TresPlaneGeometry :args="[10, 10, 20, 20]"></TresPlaneGeometry>
+	<TresMesh :rotation-x="-Math.PI / 2" :position-y="0.1">
+		<TresPlaneGeometry :args="[1, 1, 64, 64]"></TresPlaneGeometry>
 		<CustomShaderMaterial v-bind="smState" :baseMaterial="THREE.MeshPhysicalMaterial" :vertexShader="vertexShader"
 			:uniforms="uniforms" silent />
 	</TresMesh>
@ -19,13 +19,26 @@
 import * as THREE from 'three'
 import { useRenderLoop } from '@tresjs/core'
 import { CustomShaderMaterial } from '@tresjs/cientos'
+import { watch } from "vue"
 import vertexShader from '../shaders/waterGlass.vert?raw'
+const props = withDefaults(
+	defineProps<{
+		color?: string
+		amplitude?: number
+		frequency?: number
+	}>(),
+	{
+		color: '#fff',
+		amplitude: 0.066,
+		frequency: 5.0,
+	},
+)

 const uniforms = {
 	time: { type: "f", value: 0.1 },
-	amplitude: { type: "f", value: 0.366 },
+	amplitude: { type: "f", value: props.amplitude },
 	speed: { type: "f", value: 0.277 },
-	frequency: { type: "f", value: 15.0 },
+	frequency: { type: "f", value: props.frequency },
 }
 const smState = {
 	side: THREE.DoubleSide,
@ -37,7 +50,7 @@ const smState = {
 	// opacity: 0.9,
 	// depthWrite: false,
 	// depthTest: true,
-	color: new THREE.Color('#346DB7'),
+	color: new THREE.Color('#006EFF'),
 	metalness: 0.087,
 	roughness: 0.0,
 	transmission: 1,
@ -49,4 +62,9 @@ onLoop(({ delta }) => {
 	uniforms.time.value += delta;
 })

+watch(() => props, () => {
+	smState.color = new THREE.Color(props.color)
+	uniforms.amplitude.value = props.amplitude
+	uniforms.frequency.value = props.frequency
+}, { deep: true })
 </script>
--- a/src/plugins/water/config.js
+++ b/src/plugins/water/config.js
@ -4,7 +4,7 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-11-10 16:11:27
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-04 19:32:07
+ * @LastEditTime: 2023-12-06 17:50:48
 */

 export default {
--- a/src/plugins/water/pages/waterGlass.vue
+++ b/src/plugins/water/pages/waterGlass.vue
@ -4,20 +4,21 @@
 * @Autor: 地虎降天龙
 * @Date: 2023-12-01 17:21:26
 * @LastEditors: 地虎降天龙
- * @LastEditTime: 2023-12-01 19:23:19
+ * @LastEditTime: 2023-12-06 17:49:54
 -->

 <template>
 	<TresCanvas v-bind="gl" window-size>
-		<TresPerspectiveCamera :position="[10, 10, 10]" />
+		<TresPerspectiveCamera :position="[1, 1, 1]" />
 		<TresAmbientLight :intensity="1" />
-		<!-- <TresDirectionalLight :args="[0xffffff, 9.0]" v-light-helper /> -->
-		<TresPointLight :args="[0xffffff, 100.0, 0, 0.1]" :position="[0, 3, 0]" v-light-helper />
-		<TresPointLight :args="[0xffffff, 100.0, 0, 0.1]" :position="[1, 3, 1]" v-light-helper />
-		<TresPointLight :args="[0xffffff, 100.0, 0, 0.1]" :position="[-1, 3, -1]" v-light-helper />
+		<TresDirectionalLight :args="[0xffffff, 9.0]" :position="[0, 0.5, 0]" />
+		<TresPointLight :args="[0xffffff, 100.0, 0, 0.1]" :position="[0.1, 0.3, 0]" />
+		<!-- <TresPointLight :args="[0xffffff, 100.0, 0, 0.1]" :position="[1, 3, 1]" v-light-helper />
+		<TresPointLight :args="[0xffffff, 100.0, 0, 0.1]" :position="[-1, 3, -1]" v-light-helper /> -->
+		<waterGlass v-bind="typeState" />
+
 		<OrbitControls />
-		<TresGridHelper :args="[10, 10]" />
-		<waterGlass />
+		<TresGridHelper :args="[1, 10]" />
 	</TresCanvas>
 </template>

@ -27,7 +28,7 @@ import { OrbitControls, vLightHelper } from '@tresjs/cientos'
 import waterGlass from '../components/waterGlass.vue'
 import { reactive } from 'vue';
 import * as THREE from 'three'
-// import { Pane } from 'tweakpane';
+import { Pane } from 'tweakpane';
 const gl = {
 	clearColor: '#222',
 	shadows: true,
@ -40,22 +41,26 @@ const gl = {
 	antialias: true,	//开启锯齿
 	logarithmicDepthBuffer: true,
 }
-// const typeState = reactive({
-// 	color: "#fff",
-// 	speed: 0.1,
-// 	brightness: 1.5,
-// 	flowSpeed: { x: 0.01, y: 0.01 }
-// })
-// const paneControl = new Pane({
-// 	title: '参数',
-// 	expanded: true
-// });
-// paneControl.addBinding(typeState, 'color', {
-// 	label: '颜色'
-// })
-// paneControl.addBinding(typeState, 'speed', {
-// 	label: '速度', min: 0.1,
-// 	max: 1,
-// 	step: 0.1,
-// })
+const typeState = reactive({
+	color: "#346DB7",
+	amplitude: 0.066,
+	frequency: 5.0,
+})
+const paneControl = new Pane({
+	title: '参数',
+	expanded: true
+});
+paneControl.addBinding(typeState, 'color', {
+	label: '颜色'
+})
+paneControl.addBinding(typeState, 'amplitude', {
+	label: 'amplitude', min: 0.01,
+	max: 1,
+	step: 0.01,
+})
+paneControl.addBinding(typeState, 'frequency', {
+	label: 'frequency', min: 0.1,
+	max: 10,
+	step: 0.1,
+})
 </script>
--- a/src/plugins/water/shaders/waterGlass.vert
+++ b/src/plugins/water/shaders/waterGlass.vert
@ -3,16 +3,6 @@ uniform float amplitude;
 uniform float speed;
 uniform float frequency;

-// Description : Array and textureless GLSL 2D/3D/4D simplex
-//               noise functions.
-//      Author : Ian McEwan, Ashima Arts.
-//  Maintainer : ijm
-//     Lastmod : 20110822 (ijm)
-//     License : Copyright (C) 2011 Ashima Arts. All rights reserved.
-//               Distributed under the MIT License. See LICENSE file.
-//               https://github.com/ashima/webgl-noise
-//
-
 vec3 mod289(vec3 x){
 	return x-floor(x*(1./289.))*289.;
 }
@ -43,13 +33,9 @@ float noise(vec3 v){
 	vec3 i1=min(g.xyz,l.zxy);
 	vec3 i2=max(g.xyz,l.zxy);
 	
-	//   x0 = x0 - 0.0 + 0.0 * C.xxx;
-	//   x1 = x0 - i1  + 1.0 * C.xxx;
-	//   x2 = x0 - i2  + 2.0 * C.xxx;
-	//   x3 = x0 - 1.0 + 3.0 * C.xxx;
 	vec3 x1=x0-i1+C.xxx;
-	vec3 x2=x0-i2+C.yyy;// 2.0*C.x = 1/3 = C.y
-	vec3 x3=x0-D.yyy;// -1.0+3.0*C.x = -0.5 = -D.y
+	vec3 x2=x0-i2+C.yyy;
+	vec3 x3=x0-D.yyy;
 	
 	// Permutations
 	i=mod289(i);
@ -58,8 +44,6 @@ float noise(vec3 v){
 				+i.y+vec4(0.,i1.y,i2.y,1.))
 				+i.x+vec4(0.,i1.x,i2.x,1.));
 				
-				// Gradients: 7x7 points over a square, mapped onto an octahedron.
-				// The ring size 17*17 = 289 is close to a multiple of 49 (49*6 = 294)
 				float n_=.142857142857;// 1.0/7.0
 				vec3 ns=n_*D.wyz-D.xzx;
 				
@ -75,8 +59,6 @@ float noise(vec3 v){
 				vec4 b0=vec4(x.xy,y.xy);
 				vec4 b1=vec4(x.zw,y.zw);
 				
-				//vec4 s0 = vec4(lessThan(b0,0.0))*2.0 - 1.0;
-				//vec4 s1 = vec4(lessThan(b1,0.0))*2.0 - 1.0;
 				vec4 s0=floor(b0)*2.+1.;
 				vec4 s1=floor(b1)*2.+1.;
 				vec4 sh=-step(h,vec4(0.));
@ -108,7 +90,6 @@ float noise(vec3 v){
 				return noise(vec3(point.x*frequency,point.y*frequency,time*speed))*amplitude;
 			}
 			
-			// http://lolengine.net/blog/2013/09/21/picking-orthogonal-vector-combing-coconuts
 			vec3 orthogonal(vec3 v){
 				return normalize(abs(v.x)>abs(v.z)
 				?vec3(-v.y,v.x,0.)
@ -126,16 +107,15 @@ float noise(vec3 v){
 				vec3 displacedNeighbour1=neighbour1+normal*displace(neighbour1);
 				vec3 displacedNeighbour2=neighbour2+normal*displace(neighbour2);
 				
-				// https://i.ya-webdesign.com/images/vector-normals-tangent-16.png
 				vec3 displacedTangent=displacedNeighbour1-displacedPosition;
 				vec3 displacedBitangent=displacedNeighbour2-displacedPosition;
 				
-				// https://upload.wikimedia.org/wikipedia/commons/d/d2/Right_hand_rule_cross_product.svg
 				vec3 displacedNormal=normalize(cross(displacedTangent,displacedBitangent));
 				
 				// vNormal=normalMatrix*displacedNormal;
 				//vNormal = normal;
 				csm_Normal=normalMatrix*displacedNormal;
+				// csm_Normal=normal;
 				// gl_Position=projectionMatrix*modelViewMatrix*vec4(displacedPosition,1.);
 				csm_Position=displacedPosition;
 			}