首先我们需要一些贴图素材
贴图素材一般可以在3dtextures网站上找到，这里我找了2份，包含了墙的法线贴图和潮湿地面的法线、透明度、粗糙度贴图
通过kokomi.AssetManager将贴图素材一次性全部加载出来，将它们应用到Mesh上，加上基本的环境光照，即可完成最基本的建模
// 光照
const pointLight1 = new THREE.PointLight(config.color, 0.5, 17, 0.8);
pointLight1.position.set(0, 2, 0);
this.scene.add(pointLight1);
...
// 网格
const aspTex = am.items["asphalt-normal"];
aspTex.rotation = THREE.MathUtils.degToRad(90);
aspTex.wrapS = aspTex.wrapT = THREE.RepeatWrapping;
aspTex.repeat.set(5, 8);
const wallMat = new THREE.MeshPhongMaterial({
color: new THREE.Color("#111111"),
normalMap: aspTex,
normalScale: new THREE.Vector2(0.5, 0.5),
shininess: 200,
});
const wall = new THREE.Mesh(new THREE.BoxGeometry(25, 20, 0.5), wallMat);
this.scene.add(wall);
wall.position.y = 10;
wall.position.z = -10.3;
...
// 文字
const t3d = new kokomi.Text3D(this, config.text, font, {
size: 3,
height: 0.2,
curveSegments: 120,
bevelEnabled: false,
});
t3d.mesh.geometry.center();
const tm = new THREE.Mesh(
t3d.mesh.geometry,
new THREE.MeshBasicMaterial({
color: config.color,
})
);
this.scene.add(tm);
tm.position.y = 1.54;
地面上的积水能反射出周围的景色，因此我们将选用kokomi.Reflector来实现反射效果
const mirror = new kokomi.Reflector(new THREE.PlaneGeometry(25, 100)); mirror.position.z = -25; mirror.rotation.x = -Math.PI / 2;
普通的反射器仅仅是一面镜子，因此我们要自定义反射器的Shader
之前逛shadertoy时看到了一个很棒的涟漪特效，就直接拿来用了
// https://www.shadertoy.com/view/4djSRW
float hash12(vec2 p){
vec3 p3=fract(vec3(p.xyx)*.1031);
p3+=dot(p3,p3.yzx+19.19);
return fract((p3.x+p3.y)*p3.z);
}
vec2 hash22(vec2 p){
vec3 p3=fract(vec3(p.xyx)*vec3(.1031,.1030,.0973));
p3+=dot(p3,p3.yzx+19.19);
return fract((p3.xx+p3.yz)*p3.zy);
}
// https://gist.github.com/companje/29408948f1e8be54dd5733a74ca49bb9
float map(float value,float min1,float max1,float min2,float max2){
return min2+(value-min1)*(max2-min2)/(max1-min1);
}
vec2 rippleUv=75.*p*uTexScale;
vec2 p0=floor(rippleUv);
float rainStrength=map(uRainCount,0.,10000.,3.,.5);
if(rainStrength==3.){
rainStrength=50.;
}
vec2 circles=vec2(0.);
for(int j=-MAX_RADIUS;j<=MAX_RADIUS;++j)
{
for(int i=-MAX_RADIUS;i<=MAX_RADIUS;++i)
{
vec2 pi=p0+vec2(i,j);
#if DOUBLE_HASH
vec2 hsh=hash22(pi);
#else
vec2 hsh=pi;
#endif
vec2 p=pi+hash22(hsh);
float t=fract(.8*iTime+hash12(hsh));
vec2 v=p-rippleUv;
float d=length(v)-(float(MAX_RADIUS)+1.)*t+(rainStrength*.1*t);
float h=1e-3;
float d1=d-h;
float d2=d+h;
float p1=sin(31.*d1)*smoothstep(-.6,-.3,d1)*smoothstep(0.,-.3,d1);
float p2=sin(31.*d2)*smoothstep(-.6,-.3,d2)*smoothstep(0.,-.3,d2);
circles+=.5*normalize(v)*((p2-p1)/(2.*h)*(1.-t)*(1.-t));
}
}
circles/=float((MAX_RADIUS*2+1)*(MAX_RADIUS*2+1));
float intensity=.05*floorOpacity;
vec3 n=vec3(circles,sqrt(1.-dot(circles,circles)));
vec2 rainUv=intensity*n.xy;
光有涟漪效果也不够，要将它与地面的贴图相结合起来
这里采用了自定义mipmap技术，利用kokomi.PackedMipMapGenerator生成了多个贴图的mipmap
自定义mipmap除了能捆绑贴图外，还有个好处就是可以动态控制贴图的模糊程度
const mipmapper = new kokomi.PackedMipMapGenerator();
const mirrorFBO = mirror.getRenderTarget();
const mipmapFBO = new kokomi.FBO(this);
mirror.material.uniforms.tDiffuse.value = mipmapFBO.rt.texture;
this.update(() => {
mipmapper.update(mirrorFBO.texture, mipmapFBO.rt, this.renderer);
});
vec2 p=vUv; vec2 texUv=p*uTexScale; texUv+=uTexOffset; float floorOpacity=texture(uOpacityTexture,texUv).r; vec3 floorNormal=texture(uNormalTexture,texUv).rgb*2.-1.; floorNormal=normalize(floorNormal); float roughness=texture(uRoughnessTexture,texUv).r; vec2 finalUv=reflectionUv+floorNormal.xy*uDistortionAmount-rainUv; float level=roughness*uBlurStrength; vec3 col=packedTexture2DLOD(tDiffuse,finalUv,level,uMipmapTextureSize).rgb;
雨滴数量会很多，因此要用到THREE.InstancedMesh来生成实例化网格对象
const rain = new THREE.InstancedMesh(new THREE.PlaneGeometry(), rainMat, count);
rain.instanceMatrix.needsUpdate = true;
const dummy = new THREE.Object3D();
for (let i = 0; i < rain.count; i++) {
dummy.position.set(
THREE.MathUtils.randFloat(-10, 10),
0,
THREE.MathUtils.randFloat(-20, 10)
);
dummy.scale.set(0.03, THREE.MathUtils.randFloat(0.3, 0.5), 0.03);
dummy.updateMatrix();
rain.setMatrixAt(i, dummy.matrix);
}
rain.rotation.set(-0.1, 0, 0.1);
rain.position.set(0, 4, 4);
这里要注意一点：雨滴的方向是始终朝向用户的，为了达成这点就要用billboard方案来实现
vec3 billboard(vec3 v,mat4 view){
vec3 up=vec3(view[0][1],view[1][1],view[2][1]);
vec3 right=vec3(view[0][0],view[1][0],view[2][0]);
vec3 pos=right*v.x+up*v.y;
return pos;
}
vec3 billboardPos=billboard(transformed,modelViewMatrix);
transformed=billboardPos;
我们可以给雨滴赋予随机的高度和速度attribute，并在顶点着色器中让它动起来
const progressArr = [];
const speedArr = [];
for (let i = 0; i < rain.count; i++) {
...
progressArr.push(Math.random());
speedArr.push(dummy.scale.y * 10);
}
rain.geometry.setAttribute(
"aProgress",
new THREE.InstancedBufferAttribute(new Float32Array(progressArr), 1)
);
rain.geometry.setAttribute(
"aSpeed",
new THREE.InstancedBufferAttribute(new Float32Array(speedArr), 1)
);
attribute float aProgress;
attribute float aSpeed;
uniform float uSpeed;
uniform float uHeightRange;
vec3 distort(vec3 p){
float y=mod(aProgress-iTime*aSpeed*.25*uSpeed,1.)*uHeightRange-(uHeightRange*.5);
p.y+=y;
return p;
}
transformed=distort(transformed);
创建背景的离屏渲染FBO，将其作为反射的主要材质
const bgFBO = new kokomi.FBO(this, {
width: window.innerWidth * 0.1,
height: window.innerHeight * 0.1,
});
rainMat.uniforms.uBgRt.value = bgFBO.rt.texture;
const fboCamera = this.camera.clone();
this.update(() => {
rain.visible = false;
this.renderer.setRenderTarget(bgFBO.rt);
this.renderer.render(this.scene, fboCamera);
this.renderer.setRenderTarget(null);
rain.visible = true;
});
在顶点着色器中获取屏幕空间vScreenspace
// https://github.com/Samsy/glsl-screenspace
vec2 screenspace(mat4 projectionmatrix,mat4 modelviewmatrix,vec3 position){
vec4 temp=projectionmatrix*modelviewmatrix*vec4(position,1.);
temp.xyz/=temp.w;
temp.xy=(.5)+(temp.xy)*.5;
return temp.xy;
}
vScreenspace=screenspace(projectionMatrix,modelViewMatrix,transformed);
在片元着色器中采样反射材质
uniform sampler2D uNormalTexture;
uniform sampler2D uBgRt;
uniform float uRefraction;
uniform float uBaseBrightness;
varying vec2 vScreenspace;
void main(){
vec2 p=vUv;
vec4 normalColor=texture(uNormalTexture,p);
if(normalColor.a<.5){
discard;
}
vec3 normal=normalize(normalColor.rgb);
vec2 bgUv=vScreenspace+normal.xy*uRefraction;
vec4 bgColor=texture(uBgRt,bgUv);
float brightness=uBaseBrightness*pow(normal.b,10.);
vec3 col=bgColor.rgb+vec3(brightness);
col=vec3(p,0.);
gl_FragColor=vec4(col,1.);
}
这里有一点要注意：积水地面中要把雨滴的反射去掉，不然会看着很乱
rainFloor.mirror.ignoreObjects.push(rain);
用setInterval来间歇地设置文字和灯光材质的颜色即可
// flicker
const turnOffLight = () => {
tm.material.color.copy(new THREE.Color("black"));
pointLight1.color.copy(new THREE.Color("black"));
};
const turnOnLight = () => {
tm.material.color.copy(new THREE.Color(config.color));
pointLight1.color.copy(new THREE.Color(config.color));
};
let flickerTimer = null;
const flicker = () => {
flickerTimer = setInterval(async () => {
const rate = Math.random();
if (rate < 0.5) {
turnOffLight();
await kokomi.sleep(200 * Math.random());
turnOnLight();
await kokomi.sleep(200 * Math.random());
turnOffLight();
await kokomi.sleep(200 * Math.random());
turnOnLight();
}
}, 3000);
};
flicker();
为了让文字灯光看上去更加明亮，可以用Bloom滤镜来照亮文字
由于后期处理中原先renderer的抗锯齿会失效，故用SMAA滤镜来实现抗锯齿
// postprocessing
const composer = new POSTPROCESSING.EffectComposer(this.renderer);
this.composer = composer;
composer.addPass(new POSTPROCESSING.RenderPass(this.scene, this.camera));
// bloom
const bloom = new POSTPROCESSING.BloomEffect({
luminanceThreshold: 0.4,
luminanceSmoothing: 0,
mipmapBlur: true,
intensity: 2,
radius: 0.4,
});
composer.addPass(new POSTPROCESSING.EffectPass(this.camera, bloom));
// antialiasing
const smaa = new POSTPROCESSING.SMAAEffect();
composer.addPass(new POSTPROCESSING.EffectPass(this.camera, smaa));
效果算是基本实现了，但也有很多待优化的点
我想要做的是有2个不同的Controller，client和test_client。客户端Controller已经构建，我想创建一个test_clientController，我可以使用它来玩弄客户端的UI并根据需要进行调整。我主要是想绕过我在客户端中内置的验证及其对加载数据的管理Controller的依赖。所以我希望test_clientController加载示例数据集，然后呈现客户端Controller的索引View，以便我可以调整客户端UI。就是这样。我在test_clients索引方法中试过这个:classTestClientdefindexrender:template=>
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
让我们计算MRI范围内的类别:defcount_classesObjectSpace.count_objects[:T_CLASS]endk=count_classes用类方法定义类:classAdefself.foonilendend然后运行:putscount_classes-k#=>3请解释一下，为什么是三个？ 最佳答案 查看MRI代码，每次你创建一个Class时，在Ruby中它是Class类型的对象，ruby会自动为这个新类创建“元类”类，这是另一个单例类型的Class对象。C函数调用(class.c)是:rb_define
Sinatra新手；我正在运行一些rspec测试，但在日志中收到了一堆不需要的噪音。如何消除日志中过多的噪音？我仔细检查了环境是否设置为:test，这意味着记录器级别应设置为WARN而不是DEBUG。spec_helper:require"./app"require"sinatra"require"rspec"require"rack/test"require"database_cleaner"require"factory_girl"set:environment,:testFactoryGirl.definition_file_paths=%w{./factories./test/
我有两个Rails模型，即Invoice和Invoice_details。一个Invoice_details属于Invoice，一个Invoice有多个Invoice_details。我无法使用accepts_nested_attributes_forinInvoice通过Invoice模型保存Invoice_details。我收到以下错误:(0.2ms)BEGIN(0.2ms)ROLLBACKCompleted422UnprocessableEntityin25ms(ActiveRecord:4.0ms)ActiveRecord::RecordInvalid(Validationfa
我有一个应用程序可以读取文件的内容并为其编制索引。我将它们存储在磁盘本身中，但现在我使用的是AmazonS3，因此以下方法不再适用。事情是这样的:defperform(docId)@document=Document.find(docId)if@document.file?#Youshould'tcreateanewversion@document.versionlessdo|doc|@document.file_content=Cloudoc::Extractor.new.extract(@document.file.file)@document.saveendendend@docu
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
我正在尝试将以下SQL查询转换为ActiveRecord，它正在融化我的大脑。deletefromtablewhereid有什么想法吗？我想做的是限制表中的行数。所以，我想删除少于最近10个条目的所有内容。编辑:通过结合以下几个答案找到了解决方案。Temperature.where('id这给我留下了最新的10个条目。 最佳答案 从您的SQL来看，您似乎想要从表中删除前10条记录。我相信到目前为止的大多数答案都会如此。这里有两个额外的选择:基于MurifoX的版本:Table.where(:id=>Table.order(:id).
我目前正在用Ruby编写一个项目，它使用ActiveRecordgem进行数据库交互，我正在尝试使用ActiveRecord::Base.logger记录所有数据库事件具有以下代码的属性ActiveRecord::Base.logger=Logger.new(File.open('logs/database.log','a'))这适用于迁移等(出于某种原因似乎需要启用日志记录，因为它在禁用时会出现NilClass错误)但是当我尝试运行包含调用ActiveRecord对象的线程守护程序的项目时脚本失败并出现以下错误/System/Library/Frameworks/Ruby.frame
我有一个应用需要发送用户事件邀请。当用户邀请friend(用户)参加事件时，如果尚不存在将用户连接到该事件的新记录，则会创建该记录。我的模型由用户、事件和events_user组成。classEventdefinvite(user_id,*args)user_id.eachdo|u|e=EventsUser.find_or_create_by_event_id_and_user_id(self.id,u)e.save!endendend用法Event.first.invite([1,2,3])我不认为以上是完成我的任务的最有效方法。我设想了一种方法，例如Model.find_or_cr