StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POThree.js Water Shaders migration from r48 to r52
primarykey
Id
13924991
data
AcceptedAnswerId
13974194
AnswerCount
1
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2012-12-18T01:28:10.397
FavoriteCount
1
LastActivityDate
2016-09-19T05:18:01.030
LastEditDate
2016-09-19T05:18:01.030
LastEditorUserId
1377626
OwnerUserId
797410
ParentId
0
PostTypeId
1
Score
0
ViewCount
3882
LastEditorDisplayName
text
Body
<p>I am developing a chemistry simulation project. I was searching for water simulation. I have extracted code from this example <a href="http://waterstretch.ecoulon.com/" rel="nofollow">http://waterstretch.ecoulon.com/</a></p> <p>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. <a href="https://github.com/mrdoob/three.js#change-log" rel="nofollow">https://github.com/mrdoob/three.js#change-log</a>.</p> <p>and migration instructions <a href="https://github.com/mrdoob/three.js/wiki/Migration" rel="nofollow">https://github.com/mrdoob/three.js/wiki/Migration</a></p> <p>Here is the code</p> <p>water.html</p> <pre><code> <!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="./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> </code></pre> <p>and water.js</p> <pre><code> 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; } </code></pre> <p>any help to get this code migrated to Three.js r52 ?</p>
Tags
<three.js>
Title
Three.js Water Shaders migration from r48 to r52
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. USSafal Pillai
UserOwnerUserId
1. USAhmed Hussein
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. VO
  singulars
  PostPostId
  POThree.js Water Shaders migration from r48 to r52
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTDownMod
2. VO
  singulars
  PostPostId
  POThree.js Water Shaders migration from r48 to r52
  UserUserId
  USAhmed Hussein
  VoteTypeVoteTypeId
  VTFavorite
3. VO
  singulars
  PostPostId
  POThree.js Water Shaders migration from r48 to r52
  UserUserId
  This table or related slice is empty.
  VoteTypeVoteTypeId
  VTUpMod
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.