矮草坪渲染尝试

devtools/2024/10/20 5:35:18/

本来说写unity里的,由于three测试方便,先试试three

在这里插入图片描述
这个图片是目标效果
可以看见草很矮,很密集,如果用instance来绘制的话,遭不住的
忽然发现这个效果很像绒毛效果
于是找了博客康康
https://zhuanlan.zhihu.com/p/256445252
大概就是叠alpha,性能比instance好多了,虽然效果其实比不得instance,他这个实际来说丢失了每一根草的渲染能力,只能调叠层的色彩和整体调色,可能要和一根一根的草混用吧

在这里插入图片描述

这是在three构建demo的代码

			const geometry = new THREE.PlaneGeometry(20, 20);//new THREE.ConeGeometry( 10, 30, 20, 20 );geometry.rotateX(Math.PI * 0.5);// const material = new THREE.MeshPhongMaterial( { color: 0xffffff, wireframe: true } );const material = new THREE.ShaderMaterial({uniforms: {id: { value: 1 },iTime: { value: 0 },},vertexShader: `uniform float id;varying vec2 vUv;varying vec3 vColor;varying vec3 vNormal;varying vec3 pos;void main() {vUv = uv;vColor = vec3(1.0, 0.0, 0.0);pos = position.xyz;vNormal = normal;pos+=normal*0.1*id;gl_Position = projectionMatrix * modelViewMatrix * vec4(pos.xyz,1.0);}`,fragmentShader: `uniform float id;uniform float iTime;varying vec3 vColor;varying vec3 vNormal;varying vec3 pos;varying vec2 vUv;float random (in vec2 st) {return fract(sin(dot(st.xy,vec2(12.9898,78.233)))* 43758.5453123);
}// 2D Noise based on Morgan McGuire @morgan3d
// https://www.shadertoy.com/view/4dS3Wd
float noise (in vec2 st) {vec2 i = floor(st);vec2 f = fract(st);// Four corners in 2D of a tilefloat a = random(i);float b = random(i + vec2(1.0, 0.0));float c = random(i + vec2(0.0, 1.0));float d = random(i + vec2(1.0, 1.0));// Smooth Interpolation// Cubic Hermine Curve.  Same as SmoothStep()vec2 u = f*f*(3.0-2.0*f);// u = smoothstep(0.,1.,f);// Mix 4 coorners percentagesreturn mix(a, b, u.x) +(c - a)* u.y * (1.0 - u.x) +(d - b) * u.x * u.y;}vec4 permute(vec4 x) {return mod((34.0 * x + 1.0) * x, 289.0);}// Cellular noise, returning F1 and F2 in a vec2.// Speeded up by using 2x2 search window instead of 3x3,// at the expense of some strong pattern artifacts.// F2 is often wrong and has sharp discontinuities.// If you need a smooth F2, use the slower 3x3 version.// F1 is sometimes wrong, too, but OK for most purposes.vec2 cellular2x2(vec2 P) {#define K 0.142857142857 // 1/7#define K2 0.0714285714285 // K/2#define jitter 0.8 // jitter 1.0 makes F1 wrong more oftenvec2 Pi = mod(floor(P), 289.0);vec2 Pf = fract(P);vec4 Pfx = Pf.x + vec4(-0.5, -1.5, -0.5, -1.5);vec4 Pfy = Pf.y + vec4(-0.5, -0.5, -1.5, -1.5);vec4 p = permute(Pi.x + vec4(0.0, 1.0, 0.0, 1.0));p = permute(p + Pi.y + vec4(0.0, 0.0, 1.0, 1.0));vec4 ox = mod(p, 7.0)*K+K2;vec4 oy = mod(floor(p*K),7.0)*K+K2;vec4 dx = Pfx + jitter*ox;vec4 dy = Pfy + jitter*oy;vec4 d = dx * dx + dy * dy; // d11, d12, d21 and d22, squared// Sort out the two smallest distances#if 0// Cheat and pick only F1d.xy = min(d.xy, d.zw);d.x = min(d.x, d.y);return d.xx; // F1 duplicated, F2 not computed#else// Do it right and find both F1 and F2d.xy = (d.x < d.y) ? d.xy : d.yx; // Swap if smallerd.xz = (d.x < d.z) ? d.xz : d.zx;d.xw = (d.x < d.w) ? d.xw : d.wx;d.y = min(d.y, d.z);d.y = min(d.y, d.w);return sqrt(d.xy);#endif}void main(){float test2 = (noise(vUv*30.0)*0.5+0.5)*0.5;vec2 F = cellular2x2((vUv + 0.0* test2 * 0.0025*(1.0 - id)* sin(test2*0.1*iTime) )*2000.);float test = noise(vUv*15.0);vec3 yellow = vec3(0.4,0.9,0.0)*0.85;vec3 green = vec3(0.2,1.0,0.0)*0.85;float n = 1.0-1.5*F.x;//gl_FragColor += vec4(0.1, 0.5 + (1.0 - id)*0.25, 0.0, n * id);gl_FragColor += vec4(mix(green,yellow,  test)*0.5+(1.0 - id)*0.5, n * id );// if(gl_FragColor.a<0.21)discard; else {gl_FragColor.a=1.0;// }//  gl_FragColor += vec4(n,n,n, n * id*0.5);}`,transparent: true,side: 2})let arr = [];const COUNT = 30;for (let i = 0; i < COUNT; i++) {let geo = geometry.clone();const materialClone = material.clone();materialClone.uniforms.id.value = 1.0 - (i / COUNT);arr.push(materialClone);const mesh = new THREE.Mesh(geo, materialClone);scene.add(mesh);}

http://www.ppmy.cn/devtools/107328.html

相关文章

SpringBoot学习(4)(yml配置信息书写和获取)(SpringEL表达式语言)

目录 1、yml配置信息的书写和获取介绍 2、案例学习 &#xff08;1&#xff09;配置信息的书写注意事项 &#xff08;2&#xff09;配置信息的获取 &#xff08;3&#xff09;注解Value &#xff08;4&#xff09;相同层级的共同前缀&#xff0c;可以使用下面这个注解 3、…

ChatGPT、Claude 和 Gemini 在数据分析方面的合作(第 3 部分):机器学习的最佳 AI 助手

人工智能如何加速你的机器学习项目从特征工程到模型训练 人工智能如何加速你的机器学习项目从特征工程到模型训练 欢迎来到雲闪世界。 在本文中&#xff0c;我们将重点介绍这些 AI 工具如何协助机器学习项目。机器学习是数据科学的基石。虽然使用 LLM 模型完全自动化建模过程具…

linux批量修改文件内容

如题 在terminal中输入&#xff1a; find ./ -name “*.py” | xargs sed -i ‘s/A in range(0/B in range(1/g’ 含义为&#xff0c;在本目录下递归搜索.py文件&#xff0c;将所有py文件中含有 “A in range(0” 的字段修改为 “B in range(1”

OpenCV绘图函数(11)计算文本字符串在特定字体、尺寸和厚度下的大小的函数getTextSize()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 计算一个文本字符串的宽度和高度。 函数 cv::getTextSize 计算并返回包含指定文本的矩形框的尺寸。也就是说&#xff0c;下面的代码渲染一些文本…

心觉:如何填平想象和愿望之间的鸿沟?

愿望是什么&#xff1f; 你想变得富有 你想减掉20斤 你想拥有自己的Dream Car 你想拥有S型身材 这些都是愿望&#xff0c;非常美好的想法或者目标 想象是什么&#xff1f; 我能变得富有吗&#xff0c;我啥也不会&#xff0c;除了上班&#xff0c;就是上班 我怎么可能减肥…

【知识点】图论续篇 - 最短路算法合集

我不会跟大家说我两个月前就写好了&#xff0c;只是今天才发出来。 本文概述 最短路算法&#xff0c;见名知意&#xff0c;就是用于求出图中从某个顶点到另一个顶点最短距离的算法。最短路算法的应用极其广泛。本文将会以求解最短路为中心&#xff0c;围绕着展开叙述一些常见的…

如何实现对窗口window的viewtree进行dump Hierarchy-安卓framework实战开发

背景 有学员粉丝朋友在群里面问到一个如何针对普通的window进行dumpsys相关的viewtree问题&#xff0c;即展示每个window的view的层级树。比如我们知道activity的话可以使用如下命令进行dump adb shell dumpsys activity com.android.launcher3/com.android.launcher3.uiover…

802.11 中 scrambler的matlab仿真

802.11a和802.11n中的scrambler仿真不可以直接用matlab中的comm.Scrambler函数。因为这个函数实现的是multiplicative scrambling&#xff0c;而802.11a和802.11n中的scrambler使用的是additive scrambling。additive scrambling使用异或操作进行扰码&#xff0c;multiplicativ…