中国做网站的公司有哪些,优化的网站做域名跳转,模板建站可以做优化吗,企业州建设银行网站引子?最近#xff0c;忽然想起曾在 WebGL 基础系列 文章中立下 flag#xff1a;“后续还打算出 《ThreeJS 源码剖析》 系列”(特意翻出原话?)#xff0c;项目忙了一阵后#xff0c;便决定开始写此系列#xff0c;更新周期不固定#xff0c;毕竟项目排期“天晓得”。此系… 引子?最近忽然想起曾在 WebGL 基础系列 文章中立下 flag“后续还打算出 《ThreeJS 源码剖析》 系列”(特意翻出原话?)项目忙了一阵后便决定开始写此系列更新周期不固定毕竟项目排期“天晓得”。此系列与其说是分享倒不如说是共同学习罢了。作为最出名的 WebGL 的开源库ThreeJS 已受到了广泛认可和好评同时其自身也在不断更新让开发者用的舒心放心。说回自己本初入图形学世界仅凭个人兴趣撞的鼻青脸肿但也乐在其中。自认为技术本不该有距离感以有趣且通俗易懂的方式传播技术也是一件趣事。任凭其吹的天花乱坠何等高大上但其本质是服务于我们的归根结底还是要我们接受才可。故之前的文章也尽量保持着基础、有趣、易懂的风格(偶尔会开开车?)未来亦会尝试更多元的文章风格。但其宗旨都是为了让各位更容易接受。以上仅个人观点如与各位观念有相悖之处可相互交流以彼之长补己之短。下面正式开始 ThreeJS 源码剖析 系列?前言?当学习一种新技术时大部分情况都会首选其官方文档而文档中能最快让我们上手的章节便是 Getting Started。ThreeJS 也不例外我们进入到其对应的 Getting Started 页面后便能看到 Creating the scene 的代码仅有下面寥寥几行var scene  new THREE.Scene();var camera  new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );var renderer  new THREE.WebGLRenderer();renderer.setSize( window.innerWidth, window.innerHeight );document.body.appendChild( renderer.domElement );再滚动至最下方各位会看到完整的 Demo// ...var animate  function () {  requestAnimationFrame( animate );  cube.rotation.x  0.01;  cube.rotation.y  0.01;  renderer.render( scene, camera );};animate();阅读完简单的十几行代码之后各位可能会发现这个 Demo 中在一直调用 animate() 方法而此方法中我们修改了立方体的旋转角度并执行了这一行代码renderer.render( scene, camera )。假如你没有接触过图形学或 WebGL仅凭语义会翻译成“渲染器渲染场景和摄像机”。没错这一行的作用正是如此“我看你骨骼惊奇理解力非凡一定是个学图形学的天才”(这也体现了命名规范合理是多么重要)?假如我们将上面那句话拆解一下“渲染器 - 渲染 - 场景和摄像机”这句话正符合了我们的 “主 - 谓 - 宾”的结构。那么就可见主语(即渲染器)是个很重要的存在所以此系列的第一篇文章我们就从渲染器 —— Renderer 说起。Renderer⚙️将 ThreeJS 文档目录滚动至 Renderers 一栏可以看到有 WebGLMultisampleRenderTarget 、WebGLRenderer 、WebGL1Renderer 、WebGLRenderTarget 和 WebGLCubeRenderTarget 五类渲染器而我们就聚焦于 WebGLRenderer 这个渲染器即可稍后会给大家介绍一下为何会有 WebGL1Renderer至于其他三种渲染器我们就不先讨论(其实我也没用过后续了解了咱们再聊)?WebGL1Renderer假如你对 WebGL 稍有了解那么就会知道其实 WebGL 有 1.0 和 2.0 两个版本那么两个版本分别是基于 OpenGL ES 2.0 和 OpenGL ES 3.0 的至于不基于 OpenGL ES 1.0 是因为 1.0 是固定管线的2.0 和 3.0 是可编程管线。所谓固定管线就是我们给管线配置相应参数和开关即可可编程管线的可编程部分就是我们所熟知的 顶点着色器 和 片元着色器。扯远了再说回 WebGL这俩版本有什么差别呢大家可以看本文 WebGL Whats New简单概括一下就是多了更多纹理格式、内置函数、3D 纹理贴图同时还支持了非2的整数次方大小的图片。同时WebGL 2.0 与 WebGL 1.0 在对浏览器的兼容性上有很大的差异以 Chrome 为例WebGL 1.0 兼容 9 及以上的 Chrome 版本而 WebGL 2.0 则兼容 56 及以上的 Chrome 版本对浏览器的兼容性的巨大差异就有极大的可能让一些陈旧的 WebGL 1.0 的系统崩溃故 ThreeJS 提供了 WebGL1Renderer 来进行适配兼容。ThreeJS 已经从 r118 版本就全面升级到 WebGL 2.0 了所以如果你的系统使用的 ThreeJS 版本低于 r118并且准备升级到最新的 r120 版本为了避免程序挂掉你需要将 Renderer 替换成 WebGL1Renderer如何查看最新 ThreeJS 版本请见下图而查看当前项目使用的 ThreeJS 版本请见 package.json 中的 ThreeJS 依赖版本的 MINOR 版本号即可比如three: 0.120.0 就表明是 r120 版本npm 语义化版本请见官方文档。WebGLRenderer说回我们的主角 WebGLRenderer进入到源码(src/renderers/WebGLRenderer.js)后可以看到头部有很多参数初始化的操作在次就不一一介绍关于参数含义大家可参考文档了解参数含义请阅读 Constructor 部分。其中需要提一下的是大家可能会发现这条语句const _canvas  parameters.canvas ! undefined ? parameters.canvas : document.createElementNS( http://www.w3.org/1999/xhtml, canvas );这里使用的是 createElementNS 并非 createElement二者区别及用途请阅读 Document.createElementNS: Whats the difference and why we need it。getContext当我们 new 一个 Renderer 时其内部会最先进入这下面的语句if ( _gl  null ) {  const contextNames  [ webgl2, webgl, experimental-webgl ];  if ( _this.isWebGL1Renderer  true ) {    contextNames.shift();  }  _gl  getContext( contextNames, contextAttributes );  if ( _gl  null ) {    if ( getContext( contextNames ) ) {      throw new Error( Error creating WebGL context with your selected attributes. );    } else {      throw new Error( Error creating WebGL context. );    }  }}首先当 WebGL 上下文不存在时Renderer 内部列出了浏览器所提供的所有 WebGL 上下文名称如若是 WebGL1Renderer则删去 WebGL 2.0 的上下文名称然后调用 getContext 方法获取上下文。getContext 方法实现也十分简单function getContext( contextNames, contextAttributes ) {  for ( let i  0; i     const contextName  contextNames[ i ];    const context  _canvas.getContext( contextName, contextAttributes );    if ( context ! null ) return context;  }  return null;}遍历上方列举的上下文名称如果获取上下文则返回否则返回 null这么简单的代码聪明的你也能写出来你四舍五入你和 ThreeJS 贡献者的水平就是一样的?initContext当获取到上下文后紧接着调用的就是 initGLContext 方法了function initGLContext() {  extensions  new WebGLExtensions( _gl );  capabilities  new WebGLCapabilities( _gl, extensions, parameters );  // 若不是 WebGL 2.0则需额外获取以下 extensions  if ( capabilities.isWebGL2  false ) {    // ...  }  extensions.get( OES_texture_float_linear );    utils  new WebGLUtils( _gl, extensions, capabilities );  state  new WebGLState( _gl, extensions, capabilities );  state.scissor( _currentScissor.copy( _scissor ).multiplyScalar( _pixelRatio ).floor() );  state.viewport( _currentViewport.copy( _viewport ).multiplyScalar( _pixelRatio ).floor() );  // ...}用导游的话来讲“首先映入我们眼帘的是 new WebGLExtensions 和 new WebGLCapabilities 两条语句”WebGLExtensions 的作用是判断某个 extension 是否存在以及获取指定的 extension 并 全量返回而 WebGLCapabilities 则是获取当前 WebGL 系统的一些属性如支持的最大精度、是否是 WebGL 2.0 以及所支持的最大贴图大小等。而下面的 WebGLUtils 中只有一个 convert 方法该方法主要是 将自定义的类型转换成 WebGL 内置的类型。紧随其后的就是 WebGLState别看它名字很短但是它却很重要用描述蔡总(我们项目组的翘楚)的一句话就是 “短但有用” 通过这个 state我们可以设置视口大小、设置混合、设置材质、绑定纹理等。其余的内容就先省略后续有必要再讲先让各位知道 Renderer 内部的工作流程。调用完 initGLContext 方法后就有一句const xr  new WebXRManager( _this, _gl );WebXR 是一组支持将渲染3D场景用来呈现虚拟世界(虚拟现实也称作 VR)或将图形图像添加到现实世界(增强现实也称作 AR)的标准详情请了解MDN文档。animation调用完 initContext 后就来到了 animation 环节const animation  new WebGLAnimation();animation.setAnimationLoop( onAnimationFrame );if ( typeof window ! undefined ) animation.setContext( window );animation 的调用更是只有这简单的 3 行语句WebGLAnimation 的类型如下class WebGLAnimation { start(): void; stop(): void; setAnimationLoop( callback: Function ): void; setContext( value: Window ): void;}当调用 setAnimationLoop 时其实就是将传入的 callback 赋给 WenGLAnimation 内部的 animationLoop 变量当调用 start 方法时就调用 window 的 requestAnimationFrame 方法。所以 ThreeJS 内部的动画也是不断调用 requestAnimationFrame 来实现的呵凡人而 setContext 则是将 context 设为 window至于 stop 方法大家应该也能猜到里面如何停止动画的了吧结束语?这么快就结束语了你是不是给我偷工减料了其实 WebGLRenderer 大约 2000 行代码但其中绝大部分是函数声明供我们后续的使用。回顾本文大家就会发现当我们 new 一个 Renderer 时 ThreeJS 只不过是帮我们初始化了 context并设置了一下 animation其余的函数都是后续才会用到。故初始化一个 Renderer 也没什么故弄玄虚的既然内部有这么多的函数让我们后续使用那么下篇文章就来讲讲我们常用的 Renderer 中的方法感谢阅读