HTML5怎么實現多視角3D逼真水波動畫

這篇文章主要介紹“HTML5怎么實現多視角3D逼真水波動畫”，在日常操作中，相信很多人在HTML5怎么實現多視角3D逼真水波動畫問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML5怎么實現多視角3D逼真水波動畫”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

HTML代碼

XML / HTML代碼將內容復制到文本

< img id = “ tiles” src = “ tiles.jpg” >    

< img id = “ xneg” src = “ xneg.jpg” >    

< img id = “ xpos” src = “ xpos.jpg” >    

< img id = “ ypos” src = “ ypos.jpg” >    

< img id = “ zneg” src = “ zneg.jpg” >    

< img id = “ zpos” src = “ zpos.jpg” >    

JavaScript代碼

JavaScript代碼將內容復制到

函數 Water（）{   

  var  vertexShader =  '/ 

    變化的vec2坐標; /  

    void main（）{/  

      坐標= gl_Vertex.xy * 0.5 + 0.5; /  

      gl_Position = vec4（gl_Vertex.xyz，1.0）; /  

    } /  

  ' ;   

  這個.plane = GL.Mesh.plane（）;   

  如果 （！GL.Texture.canUseFloatingPointTextures（））{   

    拋出新的 錯誤（“此演示需要OES_texture_float擴展名” ）；    

  }   

  var  filter = GL.Texture.canUseFloatingPointLinearFiltering（）嗎？gl.LINEAR：gl.NEAREST;   

  這個.textureA = 新的 GL.Texture（256，256，{類型：gl.FLOAT，過濾器：過濾器}）;   

  這個.textureB = 新的 GL.Texture（256，256，{類型：gl.FLOAT，過濾器：過濾器}）;   

  這個.dropShader =  new  GL.Shader（vertexShader，  '/ 

    const float PI = 3.141592653589793; /  

    均勻的sampler2D紋理; /  

    統一的vec2中心; /  

    均勻的浮動半徑; /  

    均勻的浮力； /  

    變化的vec2坐標; /  

    void main（）{/  

      / *獲取頂點信息* //  

      vec4信息= texture2D（紋理，坐標）; /  

      /  

      / *將下落添加到高度* //  

      浮動落差= max（0.0，1.0-長度（中心* 0.5 + 0.5-坐標）/半徑）; /  

      下降= 0.5-cos（下降* PI）* 0.5; /  

      info.r + =下降*強度; /  

      /  

      gl_FragColor = info; /  

    } /  

  ' ）;   

  這個.updateShader =  new  GL.Shader（vertexShader，  '/ 

    均勻的sampler2D紋理; /  

    統一的vec2增量； /  

    變化的vec2坐標; /  

    void main（）{/  

      / *獲取頂點信息* //  

      vec4信息= texture2D（紋理，坐標）; /  

      /  

      / *計算平均鄰居身高* //  

      vec2 dx = vec2（delta.x，0.0）; /  

      vec2 dy = vec2（0.0，delta.y）; /  

      浮動平均值=（/  

        texture2D（紋理，坐標-dx）.r + /  

        texture2D（紋理，坐標-dy）.r + /  

        texture2D（紋理，坐標+ dx）.r + /  

        texture2D（紋理，坐標+ dy）.r /  

      ）* 0.25; /  

      /  

      / *更改速度以移向平均值* //  

      info.g + =（平均值-info.r）* 2.0; /  

      /  

      / *稍微減弱速度，所以波浪不會永遠持續* //  

      info.g * = 0.995; /  

      /  

      / *沿速度移動頂點* //  

      info.r + = info.g; /  

      /  

      gl_FragColor = info; /  

    } /  

  ' ）;   

  這個.normalShader =  new  GL.Shader（vertexShader，  '/ 

    均勻的sampler2D紋理; /  

    統一的vec2增量； /  

    變化的vec2坐標; /  

    void main（）{/  

      / *獲取頂點信息* //  

      vec4信息= texture2D（紋理，坐標）; /  

      /  

      / *更新常規* //  

      vec3 dx = vec3（delta.x，texture2D（texture，vec2（coord.x + delta.x，coord.y））。r-info.r，0.0）; /  

      vec3 dy = vec3（0.0，texture2D（紋理，vec2（coord.x，coord.y + delta.y））。r-info.r，delta.y）; /  

      info.ba = normalize（cross（dy，dx））。xz; /  

      /  

      gl_FragColor = info; /  

    } /  

  ' ）;   

  這個.sphereShader =  new  GL.Shader（vertexShader，  '/ 

    均勻的sampler2D紋理; /  

    統一的vec3 oldCenter； /  

    統一的vec3 newCenter； /  

    均勻的浮動半徑; /  

    變化的vec2坐標; /  

    /  

    float volumeInSphere（vec3 center）{/  

      vec3到Center = vec3（coord.x * 2.0-1.0，0.0，coord.y * 2.0-1.0）-中心; /  

      浮點t =長度（到中心）/半徑; /  

      浮點dy = exp（-pow（t * 1.5，6.0））; /  

      浮點ymin = min（0.0，center.y-dy）; /  

      浮點ymax = min（max（0.0，center.y + dy），ymin + 2.0 * dy）; /  

      回報率（ymax-ymin）* 0.1; /  

    } /  

    /  

    void main（）{/  

      / *獲取頂點信息* //  

      vec4信息= texture2D（紋理，坐標）; /  

      /  

      / *添加舊卷* //  

      info.r + = volumeInSphere（oldCenter）; /  

      /  

      / *減去新音量* //  

      info.r-= volumeInSphere（newCenter）; /  

      /  

      gl_FragColor = info; /  

    } /  

  ' ）;   

}   

Water.prototype.addDrop = 函數（x，y，半徑，強度）{   

  var  this_ =  this ;   

  這個.textureB.drawTo（function （）{   

    this_.textureA.bind（）;   

    this_.dropShader.uniforms（{   

      中心：[x，y]，   

      半徑：半徑，   

      實力：實力   

    }）。draw（this_.plane）;   

  }）;   

  this .textureB.swapWith（this .textureA）;   

};   

Water.prototype.moveSphere = 函數（舊中心，新中心，半徑）{   

  var  this_ =  this ;   

  這個.textureB.drawTo（function （）{   

    this_.textureA.bind（）;   

    this_.sphereShader.uniforms（{   

      oldCenter：oldCenter，   

      newCenter：newCenter，   

      半徑：半徑   

    }）。draw（this_.plane）;   

  }）;   

  this .textureB.swapWith（this .textureA）;   

};   

Water.prototype.stepSimulation =  function （）{   

  var  this_ =  this ;   

  這個.textureB.drawTo（function （）{   

    this_.textureA.bind（）;   

    this_.updateShader.uniforms（{   

      增量：[1 / / this_.textureA.width，1 / / this_.textureA.height]   

    }）。draw（this_.plane）;   

  }）;   

  this .textureB.swapWith（this .textureA）;   

};   

Water.prototype.updateNormals =  function （）{   

  var  this_ =  this ;   

  這個.textureB.drawTo（function （）{   

    this_.textureA.bind（）;   

    this_.normalShader.uniforms（{   

      增量：[1 / / this_.textureA.width，1 / / this_.textureA.height]   

    }）。draw（this_.plane）;   

  }）;   

  this .textureB.swapWith（this .textureA）;   

};   

到此，關于“HTML5怎么實現多視角3D逼真水波動畫”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！