在CesiumVR基礎上實現3D左右立體視覺

来源:http://www.cnblogs.com/dongzhiwu/archive/2017/12/23/8092932.html
-Advertisement-
Play Games

整體思路 代碼部分 2.對左屏(相機偏移的場景)重新進行渲染(暫時解決方案,對相機外的場景同樣進行渲染,存在的問題:效率太低) 有待解決的問題 相機偏移後(左屏),應當對場景(左屏)重新進行渲染。具體指 ...


整體思路


 

  1. 在VR模塊的基礎上調整視差,使其隨距離發生變化;
  2. 左右分屏時,需要將左右屏的橫向進行1/2壓縮;這是因為3D-TV在對左右格式影像進行合併時,會進行拉伸;
  3. 左屏幕的相機相對於原來的(右屏)相機位置發生了變化,所以需要重新判斷左屏幕相機視野內的切片,並重新進行渲染(解決黑色切片問題)。

 

代碼部分


  1. 視差調整以及分屏橫向壓縮      
      function updateAndExecuteCommands(scene, passState, backgroundColor) {    
       ......    var near = camera.frustum.near;    var fo = near * 5.0;    var eyeSeparation = fo / 30.0;    //var eyeTranslation = Cartesian3.multiplyByScalar(savedCamera.right, eyeSeparation * 0.5, scratchEyeTranslation);    //修改,使得視差隨相機高度變化    //var modifyEyeSeparation = eyeSeparation * 0.5 * savedCamera.position.z ;   //savedCamera.getMagnitude()獲取距離中心的距離    var modifyEyeSeparation = eyeSeparation * 0.5 * savedCamera.getMagnitude() ;    var eyeTranslation = Cartesian3.multiplyByScalar(savedCamera.right, modifyEyeSeparation, scratchEyeTranslation);    viewport.x = passState.viewport.width;    // camera.frustum.aspectRatio = viewport.width / viewport.height;    // 修改,使得VR模式下球體橫向收縮    camera.frustum.aspectRatio = viewport.width*2 / viewport.height;    var offset = 0.5 * eyeSeparation * near / fo;    //Cartesian3.add(savedCamera.position, eyeTranslation, camera.position);    camera.frustum.xOffset = offset;
      executeCommands(scene, passState);             

           viewport.x = 0;
          //
          Cartesian3.subtract(savedCamera.position, eyeTranslation, camera.position);
        
          camera.frustum.xOffset = -offset;
          //相機位置發生變化,所以要渲染的切片發生變化;所以重新計算需要渲染的切片,進行渲染 (這部分還需要進行完善)       
          executeCommands(scene, passState);
          Camera.clone(savedCamera, camera);

2.對左屏(相機偏移的場景)重新進行渲染(暫時解決方案,對相機外的場景同樣進行渲染,存在的問題:效率太低)

  CullingVolume.prototype.computeVisibility = function(boundingVolume) {
      if (!defined(boundingVolume)) {
          throw new DeveloperError('boundingVolume is required.');
      }
    
      var planes = this.planes;
      var intersecting = true;
      for (var k = 0, len = planes.length; k < len; ++k) {
          var result = boundingVolume.intersectPlane(Plane.fromCartesian4(planes[k], scratchPlane));
          if (result === Intersect.OUTSIDE) {
              // return Intersect.OUTSIDE;
              //修改,不進行判斷是否在範圍內,全部進行渲染,從而避免立體視覺部分出現黑框
              return Intersect.INSIDE;
          } else if (result === Intersect.INTERSECTING) {
              intersecting = true;
          }
      }
      return intersecting ? Intersect.INTERSECTING : Intersect.INSIDE;
  };

有待解決的問題

  相機偏移後(左屏),應當對場景(左屏)重新進行渲染。具體指

    1. 重新判斷boundingVolume(球體)與CullingVolume(相機的視野)的相互關係(INSIDE或OUTSIDE),即判斷球體是否在相機的視野範圍內,對範圍內的部分進行渲染;
    2. 重新對場景進行渲染,從而將當前相機視野內的切片渲染出來,避免黑框的出現

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 在網頁或者是APP的開發中,動畫運用得當可以起到錦上添花的作用。正確使用動畫,不但可以有助於用戶理解交互的作用,還可以大大提高網頁應用的魅力和使用體驗。並且在現在的網頁開發中,動畫已經成為了一個設計的標準,變得越來越重要。特別是在一些和用戶交互的地方,使用動畫能更好的給用戶以反饋,提升用戶的操作體驗 ...
  • 由於公司的前端開始轉向 VueJS,最近開始使用這個框架進行開發,遇到一些問題記錄下來,以備後用。 主要寫一些 官方手冊 上沒有寫,但是實際開發中會遇到的問題,需要一定知識基礎。 涉及技術棧 CLI: Vue CLI UI: Element HTML: Pug(Jade) CSS: Less Jav ...
  • 之前忽略了一個點,如下: 在compiler對象的fs模塊掛載完後,會對傳入的插件進行載入,這個過程在內置插件載入之前。 插件部分單獨講解,所以這個地方先暫時略過。 內置插件全部plugin完畢後,會檢測編譯的回調函數: vue-cli的腳手架生產模式的構建文件build.js中就很明顯的傳了一個回 ...
  • 前言 工欲善其事,必先利其器。為了更好的學習React,我們先簡要的把開發環境搭建起來。本文主要介紹使用webpack搭建React項目,如果你對React或es6的基礎語法還不瞭解,建議先去學習學習。 基礎環境 基礎環境 node/npm webpack webpack 現代JavaScript程 ...
  • Util.js _(持續更新中...)_ 項目地址 : https://github.com/dragonir/Util.js 項目描述 Util.js 是對常用函數的封裝,方便在實際項目中使用,主要內容包含:數組類、瀏覽器類、日期類、函數類、數學類、媒體類、節點類、對象類、字元串類、類型檢測類、正 ...
  • 章節目錄 "【quickhybrid】如何實現一個跨平臺Hybrid框架" "【quick hybrid】架構一個Hybrid框架" "【quick hybrid】H5和Native交互原理" "【quick hybrid】JSBridge的實現" "【quick hybrid】H5和原生的職責劃分 ...
  • 白駒過隙,時光荏苒 大概去年這個時候寫了angular 結合webpack的一套前端方案,今年此時祭出vue2結合webpack2的一套前端方案。 明年的這個時候我又是在做什麼... 讀在最前面: 1、本文講述Vue,Webpack 模塊化、SEO優化、全瀏覽器相容(ie8以上)、圖片輪播等案例方案 ...
  • 8月初離職,來到現在的新東家負責一個新的項目。而我最近開發的兩個webapp一直都是以Vue為主,這也是這篇文章的由來。 正文前的胡侃&一點點吐槽 在經歷了兩個公司不同的項目後,發現都存在一個很致命卻又如此相似的問題。就是領導層的決策,導致項目的開發後期加班嚴重。領導們普遍都是先DIY,然後等到項目 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...