本来说写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 tile
float 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 percentages
return 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 often
vec2 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 F1
d.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 F2
d.xy = (d.x < d.y) ? d.xy : d.yx; // Swap if smaller
d.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);
}