Three.js Water Shaders 从 r48 迁移到 r52 [英] Three.js Water Shaders migration from r48 to r52
本文介绍了Three.js Water Shaders 从 r48 迁移到 r52的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个化学模拟项目.我正在寻找水模拟.我从这个例子中提取了代码 http://waterstretch.ecoulon.com/
I am developing a chemistry simulation project. I was searching for water simulation. I have extracted code from this example http://waterstretch.ecoulon.com/
它使用 Three.js r48 并且提取的代码完美运行.现在我尝试将我的项目的工作代码升级到 Three.js r52.该示例显示没有任何控制台错误的黑屏:O我已经测试了 Three.js r49 和更新版本但没有帮助，我在更改日志中找不到任何有用的信息.https://github.com/mrdoob/three.js#change-log.
It uses Three.js r48 and the extracted code works perfect. Now I have tried to upgrade the working code of my project to Three.js r52. The example shows black screen WITHOUT ANY CONSOLE ERRORS :O I have tested Three.js r49 and newer but not helped and I can't find any helpful information in the change log. https://github.com/mrdoob/three.js#change-log.
和迁移说明https://github.com/mrdoob/three.js/wiki/Migration
这是代码
水.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>WaterStretch</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body >
<!--<script src="../../js/libs/three.js/three-52.js"></script>-->
<!--<script src="./lib/three-48.js"></script>-->
<script src="./lib/three-49.js"></script>
<script src="./lib/shaders/BasicShader.js"></script>
<script src="./lib/shaders/BleachBypassShader.js"></script>
<script src="./lib/shaders/BlendShader.js"></script>
<script src="./lib/shaders/BokehShader.js"></script>
<script src="./lib/shaders/BrightnessContrastShader.js"></script>
<script src="./lib/shaders/ColorCorrectionShader.js"></script>
<script src="./lib/shaders/ColorifyShader.js"></script>
<script src="./lib/shaders/ConvolutionShader.js"></script>
<script src="./lib/shaders/CopyShader.js"></script>
<script src="./lib/shaders/DOFMipMapShader.js"></script>
<script src="./lib/shaders/DotScreenShader.js"></script>
<script src="./lib/shaders/FilmShader.js"></script>
<script src="./lib/shaders/FocusShader.js"></script>
<script src="./lib/shaders/FXAAShader.js"></script>
<script src="./lib/shaders/HorizontalBlurShader.js"></script>
<script src="./lib/shaders/HorizontalTiltShiftShader.js"></script>
<script src="./lib/shaders/HueSaturationShader.js"></script>
<script src="./lib/shaders/LuminosityShader.js"></script>
<script src="./lib/shaders/NormalMapShader.js"></script>
<script src="./lib/shaders/SepiaShader.js"></script>
<script src="./lib/shaders/SSAOShader.js"></script>
<script src="./lib/shaders/TriangleBlurShader.js"></script>
<script src="./lib/shaders/UnpackDepthRGBAShader.js"></script>
<script src="./lib/shaders/VerticalBlurShader.js"></script>
<script src="./lib/shaders/VerticalTiltShiftShader.js"></script>
<script src="./lib/shaders/VignetteShader.js"></script>
<script src="../../js/libs/DAT.GUI.min.js"></script>
<script src="../../js/libs/stats.min.js"></script>
<script src="../../js/libs/Detector.js"></script>
<script src="../../js/libs/RequestAnimationFrame.js"></script>
<script src="./water.js"></script>
<div id="error"></div>
<script>
window.Stats = Stats;
window.DAT.GUI = DAT.GUI;
init();
animate();
</script>
</body>
</html>
和 water.js
THREE.HeightMapShader = {
uniforms:{
tData:{
type:"t",
value:0,
texture:null
},
mousePoint:{
type:"v2",
value:new THREE.Vector2(-1, -1)
},
mouseActive:{
type:"i",
value:0
},
texelSize:{
type:"v2",
value:new THREE.Vector2(0, 0)
},
radius:{
type:"f", value:0.01
},
strength:{
type:"f",
value:0.1
}
},
vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1. - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
fragmentShader:"const float v=3.14159;uniform sampler2D tData;uniform vec2 texelSize,mousePoint;uniform int mouseActive;uniform float radius,strength;varying vec2 vUv;void main(){vec4 t=texture2D(tData,vUv);if(mouseActive>=1){float m=max(0.,1.-length(mousePoint-vUv)/radius);m=.5-cos(m*v)*.5;t.r-=m*strength;}vec2 m=vec2(texelSize.r,0.),r=vec2(0.,texelSize.g);float f=(texture2D(tData,vUv-m).r+texture2D(tData,vUv-r).r+texture2D(tData,vUv+m).r+texture2D(tData,vUv+r).r)*.25;t.g+=(f-t.r)*2.;t.g*=.995;t.r+=t.g;t.r*=.995;gl_FragColor=vec4(t.r,t.g,t.b,1.);}"
};
THREE.NormalMapShader = {
uniforms:{
tData:{
type:"t",
value:0,
texture:null
},
texelSize:{
type:"v2",
value:new THREE.Vector2(0, 0)
}
},
vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1. - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
fragmentShader:"uniform sampler2D tData;uniform float deltaNormal;uniform vec2 texelSize;varying vec2 vUv;void main(){vec3 t=vec3(2.,max(texture2D(tData,vUv+vec2(texelSize.r,0.)).r,texture2D(tData,vUv+vec2(texelSize.r,0.)).b)-max(texture2D(tData,vUv-vec2(texelSize.r,0.)).r,texture2D(tData,vUv-vec2(texelSize.r,0.)).b),0.),v=vec3(0.,max(texture2D(tData,vUv+vec2(0.,texelSize.g)).r,texture2D(tData,vUv+vec2(0.,texelSize.g)).b)-max(texture2D(tData,vUv-vec2(0.,texelSize.g)).r,texture2D(tData,vUv-vec2(0.,texelSize.g)).b),2.),r=cross(t,v);gl_FragColor=vec4(r,1.);}"
};
THREE.Pass2Shader = {
uniforms:{
tDataSampler:{
type:"t",
value:0,
texture:null
},
texelSize:{
type:"v2",
value:new THREE.Vector2(0, 0)
},
divCaustic:{
type:"f", value:3550
}
},
vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1. - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
fragmentShader:"uniform sampler2D tDataSampler;uniform float divCaustic;uniform vec2 texelSize;varying vec2 vUv;void main(){float v=0.;v+=mod(texture2D(tDataSampler,vUv+vec2(0.,-3.*texelSize.g)).r,1000.)/255.;v+=mod(texture2D(tDataSampler,vUv+vec2(0.,-2.*texelSize.g)).g,1000.)/255.;v+=mod(texture2D(tDataSampler,vUv+vec2(0.,-1.*texelSize.g)).b,1000.)/255.;v+=floor(texture2D(tDataSampler,vUv).r/1e+06)/255.;v+=floor(texture2D(tDataSampler,vUv+vec2(0.,texelSize.g)).r/1000.)/255.;v+=floor(texture2D(tDataSampler,vUv+vec2(0.,2.*texelSize.g)).g/1000.)/255.;v+=floor(texture2D(tDataSampler,vUv+vec2(0.,3.*texelSize.g)).b/1000.)/255.;v/=divCaustic;gl_FragColor=vec4(v,v,v,1.);}"
};
THREE.Pass1Shader = {
uniforms:{
tData:{
type:"t",
value:0,
texture:null
},
tNormalMap:{
type:"t",
value:1,
texture:null
},
texelSize:{
type:"v2",
value:new THREE.Vector2(0, 0)
},
P_G:{
type:"v2",
value:new THREE.Vector2(0.5, 0.5)
}
},
vertexShader:"varying vec2 vUv;\nvoid main() {\nvUv = vec2( uv.x, 1. - uv.y );\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
fragmentShader:"#define N 7\n#define N_HALF 3\nvec2 getIntersection(sampler2D normalMap,sampler2D heightMap,vec2 uvCoord,vec2 texelSize){vec3 normal=texture2D(normalMap,uvCoord).rgb;float P_Y=texture2D(heightMap,uvCoord).r,k=P_Y*normal.g*64.;return vec2(normal.r*k*texelSize.r,normal.b*k*texelSize.g);}uniform sampler2D tData,tNormalMap;uniform vec2 texelSize,P_G;varying vec2 vUv;void main(){vec2 P_C=vUv,P_G=vec2(.5,.5);float intensity[N];for(int ii=0;ii<N;ii++)intensity[ii]=0.;float P_Gy[N];for(int iii=-N_HALF;iii<=N_HALF;iii++)P_Gy[iii+N_HALF]=P_G.g+float(iii)*texelSize.g;for(int i=0;i<N;i++){vec2 pN=P_C+float(i-N_HALF)*texelSize,intersection=getIntersection(tNormalMap,tData,pN,texelSize);float ax=max(0.,1.-abs(P_G.r-intersection.r));for(int j=0;j<N;j++){float ay=max(0.,1.-abs(P_Gy[j]-intersection.g));intensity[j]+=ax*ay;}}float rChannel=floor(intensity[3]*255.)*1e+06+floor(intensity[4]*255.)*1000.+floor(intensity[0]*255.),gChannel=floor(intensity[5]*255.)*1000.+floor(min(intensity[1],3.9)*255.),bChannel=floor(intensity[6]*255.)*1000.+floor(min(intensity[2],3.9)*255.);gl_FragColor=vec4(rChannel,gChannel,bChannel,1.);}"
};
THREE.FresnelShader = {
uniforms:{
tData:{
type:"t",
value:0,
texture:null
},
tGround:{
type:"t",
value:3,
texture:null
},
tSky:{
type:"t",
value:4,
texture:null
},
tCaustic:{
type:"t",
value:2,
texture:null
},
tNormalMap:{
type:"t",
value:1,
texture:null
},
uGroundRepeat:{
type:"v2",
value:new THREE.Vector2(1, 1)
},
texelSize:{
type:"v2",
value:new THREE.Vector2(1, 1)
},
lightDir:{
type:"v3",
value:new THREE.Vector3(0, 1, 1)
},
heightMapFactor:{
type:"v3",
value:new THREE.Vector3(256, 64, 256)
},
viewPosition:{
type:"v3",
value:new THREE.Vector3(0, 256, 0)
},
caustics:{
type:"i",
value:1
},
dirLight:{
type:"i",
value:1
}
},
vertexShader:"varying vec2 vUv;\nvarying mat4 mvm;\nvoid main() {\nvUv = vec2( uv.x, uv.y );\nmvm = modelViewMatrix;\ngl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );\n}",
fragmentShader:"uniform float causticRatio;uniform vec2 uGroundRepeat;uniform vec3 viewPosition,heightMapFactor,lightDir;uniform sampler2D tData,tNormalMap,tGround,tSky,tCaustic;uniform int caustics,dirLight;uniform vec2 texelSize;varying vec2 vUv;varying mat4 mvm;void main(){vec3 v=vec3(vUv.r*heightMapFactor.r,texture2D(tData,vUv).r*heightMapFactor.g,vUv.g*heightMapFactor.b),t=vec3(vUv.r*256.-128.,texture2D(tData,vUv).r*heightMapFactor.g,vUv.g*256.-128.),r=-normalize(texture2D(tNormalMap,vUv).rgb),b=v-vec3(heightMapFactor.r/2.,256.,heightMapFactor.b/2.),n=t-vec3(0.,300.,0.),h=reflect(-normalize(b),r),u;u=refract(normalize(b),r,1.);vec3 m=refract(normalize(n),r,1.);vec4 a=texture2D(tSky,vec2(h.r,h.b)),g=texture2D(tGround,vec2(u.r,u.b)/u.g*uGroundRepeat+.5);if(caustics==1)g*=pow(max(texture2D(tCaustic,vec2(m.r,m.b)+.5).r,.35)+.5,4.);g.a=1.;gl_FragColor=mix(g,a,.2);if(dirLight==1){float d=pow(max(dot(r,normalize(lightDir))+.2,1.),8.);vec3 c=vec3(d,d,d);gl_FragColor.rgb*=c;}}"
};
THREE.WaterComposer = function (a) {
this.renderer = a;
this.renderTargetNearestFloatParams = {
minFilter:THREE.NearestFilter,
magFilter:THREE.NearestFilter,
wrapS:THREE.RenderTargetWrapping,
wrapT:THREE.RenderTargetWrapping,
format:THREE.RGBFormat,
stencilBuffer:!1,
depthBuffer:!1,
type:THREE.FloatType
};
this.renderTargetLinearParams = {
minFilter:THREE.LinearFilter,
magFilter:THREE.LinearFilter,
wrapS:THREE.RenderTargetWrapping,
wrapT:THREE.RenderTargetWrapping,
format:THREE.RGBFormat,
stencilBuffer:!1,
depthBuffer:!1
};
this.renderTargetLinearFloatParams = {
minFilter:THREE.LinearFilter,
magFilter:THREE.LinearFilter,
wrapS:THREE.RenderTargetWrapping,
wrapT:THREE.RenderTargetWrapping,
format:THREE.RGBFormat,
stencilBuffer:!1,
depthBuffer:!1,
type:THREE.FloatType
};
if (!a.context.getExtension("OES_texture_float")) {
throw document.getElementById("error").style.display = "block", document.getElementById("error").innerHTML = "Requires OES_texture_float extension<br/>", "Requires OES_texture_float extension";
}
if (!a.context.getParameter(a.context.MAX_VERTEX_TEXTURE_IMAGE_UNITS)) {
document.getElementById("error").style.display = "block", document.getElementById("error").innerHTML += "Your graphic card doesn't support vertex shader textures.";
}
this.initShader()
};
THREE.WaterComposer.prototype = {
render:function () {
this.renderPassHeightMap();
this.renderPassHeightMap();
this.renderPassNormalMap();
caustics && (this.renderPass1(), this.renderPass2())
},
swapHeightMapBuffers:function () {
var a = this.renderTargetHeightMap;
this.renderTargetHeightMap = this.renderTargetHeightMap2;
this.renderTargetHeightMap2 = a
},
renderPassHeightMap:function () {
this.heightMapMaterial.uniforms.tData.texture = this.renderTargetHeightMap;
THREE.WaterComposer.quad.material = this.heightMapMaterial;
this.renderer.render(THREE.WaterComposer.scene,
THREE.WaterComposer.camera, this.renderTargetHeightMap2, !1);
this.swapHeightMapBuffers();
if (1 <= this.heightMapMaterial.uniforms.mouseActive.value)this.heightMapMaterial.uniforms.mouseActive.value = 0
},
renderPassNormalMap:function () {
THREE.WaterComposer.quad.material = this.normalMapMaterial;
this.renderer.render(THREE.WaterComposer.scene, THREE.WaterComposer.camera, this.renderTargetNormalMap, !1)
},
renderPass1:function () {
THREE.WaterComposer.quad.material = this.material1;
this.renderer.render(THREE.WaterComposer.scene,
THREE.WaterComposer.camera, this.renderTargetPass1, !1)
},
renderPass2:function () {
THREE.WaterComposer.quad.material = this.material2;
this.renderer.render(THREE.WaterComposer.scene, THREE.WaterComposer.camera, this.renderTargetPass2, !1)
},
initRenderTargets:function (a, b) {
this.renderTargetPass1 = new THREE.WebGLRenderTarget(a, b, this.renderTargetNearestFloatParams);
this.renderTargetHeightMap = new THREE.WebGLRenderTarget(a, b, this.renderTargetLinearFloatParams);
this.renderTargetHeightMap2 = this.renderTargetHeightMap.clone();
this.renderTargetNormalMap = this.renderTargetHeightMap.clone();
this.renderTargetPass2 = this.renderTargetHeightMap.clone();
this.fresnelMaterial.uniforms.tData.texture = this.renderTargetHeightMap;
this.fresnelMaterial.uniforms.tNormalMap.texture = this.renderTargetNormalMap;
this.fresnelMaterial.uniforms.tCaustic.texture = this.renderTargetPass2;
this.material2.uniforms.tDataSampler.texture = this.renderTargetPass1;
this.material1.uniforms.tData.texture = this.renderTargetHeightMap;
this.material1.uniforms.tNormalMap.texture =
this.renderTargetNormalMap;
this.normalMapMaterial.uniforms.tData.texture = this.renderTargetHeightMap;
this.heightMapMaterial.uniforms.tData.texture = this.renderTargetHeightMap
},
initShader:function () {
var a = THREE.HeightMapShader;
var b = THREE.UniformsUtils.clone(a.uniforms);
this.heightMapMaterial = new THREE.ShaderMaterial({
uniforms:b,
vertexShader:a.vertexShader,
fragmentShader:a.fragmentShader
});
a = THREE.NormalMapShader;
b = THREE.UniformsUtils.clone(a.uniforms);
this.normalMapMaterial = new THREE.ShaderMaterial({
uniforms:b,
vertexShader:a.vertexShader,
fragmentShader:a.fragmentShader
});
a = THREE.Pass1Shader;
b = THREE.UniformsUtils.clone(a.uniforms);
this.material1 = new THREE.ShaderMaterial({
uniforms:b,
vertexShader:a.vertexShader,
fragmentShader:a.fragmentShader
});
a = THREE.Pass2Shader;
b = THREE.UniformsUtils.clone(a.uniforms);
this.material2 = new THREE.ShaderMaterial({
uniforms:b,
vertexShader:a.vertexShader,
fragmentShader:a.fragmentShader
});
THREE.WaterComposer.quad.material = this.material1;
a = THREE.FresnelShader;
b = THREE.UniformsUtils.clone(a.uniforms);
b.tGround.texture = THREE.ImageUtils.loadTexture("./textures/pebbles3.jpg");
b.tGround.texture.wrapS = THREE.RepeatWrapping;
b.tGround.texture.wrapT = THREE.RepeatWrapping;
b.tSky.texture = THREE.ImageUtils.loadTexture("./textures/sky.jpg");
b.tSky.texture.wrapS = THREE.RepeatWrapping;
b.tSky.texture.wrapT = THREE.RepeatWrapping;
this.fresnelMaterial = new THREE.ShaderMaterial({
uniforms:b,
vertexShader:a.vertexShader,
fragmentShader:a.fragmentShader
});
}
};
THREE.WaterComposer.resolution = 256;
THREE.WaterComposer.geometry = new THREE.PlaneGeometry(1, 1);
THREE.WaterComposer.quad = new THREE.Mesh(THREE.WaterComposer.geometry, null);
THREE.WaterComposer.scene = new THREE.Scene();
THREE.WaterComposer.scene.add(THREE.WaterComposer.quad);
THREE.WaterComposer.camera = new THREE.OrthographicCamera(
THREE.WaterComposer.resolution / -2,
THREE.WaterComposer.resolution / 2,
THREE.WaterComposer.resolution / 2,
THREE.WaterComposer.resolution / -2,
-1E4,
1E4);
THREE.WaterComposer.scene.add(THREE.WaterComposer.camera);
var camera, scene, renderer;
var charCloud, WaterComposer;
var time, oldTime, delta, stats, quad, computeQuadWidth, computeQuadHeight;
var mouseDown = !1, rain = !0, caustics = !0;
var WaterUI = function () {
this.RippleStrength = 0.12;
this.Rain = this.DirectionnalLight = this.Caustics = !0
};
function init() {
new THREE.PlaneGeometry(1, 1);
quad = new THREE.Mesh(THREE.WaterComposer.geometry, null);
quad.scale.set(window.innerWidth, window.innerHeight, 1);
scene = new THREE.Scene;
scene.add(quad);
camera = new THREE.OrthographicCamera(window.innerWidth / -2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / -2, -1E4, 1E4);
scene.add(camera);
renderer = new THREE.WebGLRenderer({clearColor:0});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.domElement.width = window.innerWidth;
renderer.domElement.height =
window.innerHeight;
renderer.autoClear = !1;
stats = new window.Stats;
stats.domElement.style.position = "absolute";
stats.domElement.style.top = "0px";
document.body.appendChild(stats.domElement);
document.body.appendChild(renderer.domElement);
WaterComposer = new THREE.WaterComposer(renderer);
quad.material = WaterComposer.fresnelMaterial;
window.onresize = resize;
window.onload = function () {
var a = new WaterUI,
b = new window.DAT.GUI;
b.add(a, "RippleStrength", 0.05, 0.5).onChange(function (a) {
WaterComposer.heightMapMaterial.uniforms.strength.value =
a
});
b.add(a, "Caustics").onChange(function (a) {
caustics = a;
WaterComposer.fresnelMaterial.uniforms.caustics.value = a
});
b.add(a, "DirectionnalLight").onChange(function (a) {
WaterComposer.fresnelMaterial.uniforms.dirLight.value = a
});
b.add(a, "Rain").onChange(function (a) {
rain = a
});
renderer.domElement.onmouseout = function () {
mouseDown = !1;
WaterComposer.heightMapMaterial.uniforms.mouseActive.value = 0
};
renderer.domElement.onmousedown = function () {
mouseDown = !0
};
renderer.domElement.onmouseup = function () {
mouseDown = !1;
WaterComposer.heightMapMaterial.uniforms.mouseActive.value =
0
};
renderer.domElement.onclick = function () {
WaterComposer.heightMapMaterial.uniforms.mouseActive.value = 2
};
renderer.domElement.onmousemove = function (a) {
WaterComposer.heightMapMaterial.uniforms.mousePoint.value.set(a.offsetX / window.innerWidth, a.offsetY / window.innerHeight);
if (1 > Math.abs(WaterComposer.heightMapMaterial.uniforms.mousePoint.value.x) && 1 > Math.abs(WaterComposer.heightMapMaterial.uniforms.mousePoint.value.y))WaterComposer.heightMapMaterial.uniforms.mouseActive.value = mouseDown ? 2 : 1
}
};
resize()
}
function resize() {
quad.scale.set(window.innerWidth, window.innerHeight, 1);
renderer.domElement.width = window.innerWidth;
renderer.domElement.height = window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
camera.left = -window.innerWidth / 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = -window.innerHeight / 2;
camera.updateProjectionMatrix();
window.innerWidth > window.innerHeight ? (computeQuadHeight = 256, computeQuadWidth = parseInt(256 * (window.innerWidth / window.innerHeight))) :
(computeQuadWidth = 256, computeQuadHeight = parseInt(256 * (window.innerHeight / window.innerWidth)));
WaterComposer.heightMapMaterial.uniforms.texelSize.value.set(1 / computeQuadWidth, 1 / computeQuadHeight);
WaterComposer.normalMapMaterial.uniforms.texelSize.value.set(1 / computeQuadWidth, 1 / computeQuadHeight);
WaterComposer.fresnelMaterial.uniforms.texelSize.value.set(1 / computeQuadWidth, 1 / computeQuadHeight);
WaterComposer.material1.uniforms.texelSize.value.set(1 / computeQuadWidth, 1 / computeQuadHeight);
WaterComposer.material2.uniforms.texelSize.value.set(1 /
computeQuadWidth, 1 / computeQuadHeight);
WaterComposer.fresnelMaterial.uniforms.heightMapFactor.value.x = computeQuadWidth;
WaterComposer.fresnelMaterial.uniforms.heightMapFactor.value.z = computeQuadHeight;
window.innerHeight > window.innerWidth ? WaterComposer.fresnelMaterial.uniforms.uGroundRepeat.value.set(window.innerWidth / 2048, window.innerWidth / (4096 / 3)) : WaterComposer.fresnelMaterial.uniforms.uGroundRepeat.value.set(window.innerHeight / 2048, window.innerHeight / (4096 / 3));
THREE.WaterComposer.quad.scale.set(computeQuadWidth,
computeQuadHeight, 1);
THREE.WaterComposer.camera.left = -computeQuadWidth / 2;
THREE.WaterComposer.camera.right = computeQuadWidth / 2;
THREE.WaterComposer.camera.top = computeQuadHeight / 2;
THREE.WaterComposer.camera.bottom = -computeQuadHeight / 2;
THREE.WaterComposer.camera.updateProjectionMatrix();
WaterComposer.initRenderTargets(computeQuadWidth, computeQuadHeight)
}
function animate() {
requestAnimationFrame(animate);
render();
stats.update()
renderer.render(scene, camera);
}
function render() {
oldTime || (oldTime = (new Date).getTime());
time = (new Date).getTime();
delta = 0.1 * (time - oldTime);
oldTime = time;
var a = WaterComposer.heightMapMaterial.uniforms.strength.value;
if (rain && 0 == time % 2) {
WaterComposer.heightMapMaterial.uniforms.strength.value = 0.05;
WaterComposer.heightMapMaterial.uniforms.mousePoint.value.set(Math.random(), Math.random());
WaterComposer.heightMapMaterial.uniforms.mouseActive.value = 1;
}
WaterComposer.render(delta);
WaterComposer.heightMapMaterial.uniforms.strength.value = a;
}
是否有助于将此代码迁移到 Three.js r52 ?
any help to get this code migrated to Three.js r52 ?
推荐答案
好像是texture systax改变的问题:
It seems to be the problem of the texture systax change:
纹理统一变化:纹理单元现在自动分配，纹理对象转到值属性而不是纹理一 { 类型:t"，值:0，纹理:贴图 } => { 类型:t"，值:贴图 }
texture uniform changes: texture units are now assigned automatically, texture object goes to value property instead of texture one { type: "t", value: 0, texture: map } => { type: "t", value: map }
我想我在这个小提琴中解决了它:http://jsfiddle.net/gero3/UyGD8/9/
I think I solved it in this fiddle: http://jsfiddle.net/gero3/UyGD8/9/
{ type: "t", value: 0, texture: map } => { type: "t", value: map }
这篇关于Three.js Water Shaders 从 r48 迁移到 r52的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
