three.js

three.js中帧缓存的使用

由 Deadly 提交于 2020-08-12 05:02:54
目录 1. 概述 2. 示例 2.1. 代码 2.2. 解析 3. 参考 1. 概述 在网上查阅了一下three.js关于帧缓存的使用，感觉很多都是关于three.js中后处理通道的使用的。后处理通道确实使用FBO实现的，但其实我就是想获取某个时刻的渲染结果作为纹理，没必要在动态渲染中进行后处理。真正实现这个功能的是WebGLRenderTarget这个类，这是一个渲染目标的缓冲区，可以装载到WebGLRenderer中进行渲染，再从WebGLRenderTarget获取纹理对象。 2. 示例 2.1. 代码 废话不多说，直接给出代码： 'use strict'; function init() { var scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); //场景的背景色 // create a camera, which defines where we're looking at. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // position and point the camera to the center of the

当微信小程序遇到AR（四）

由 て烟熏妆下的殇ゞ 提交于 2020-08-11 08:16:51
当 微信小程 序遇到 AR ，会擦出怎么样的 火花 ？ 期待 与 激动 ...... 通过该教程，可以从基础开始打造一个微信小程序的AR框架，所有代码开源，提供大家学习。 本课程需要一定的基础：微信开发者工具，JavaScript，Html，Css 第四章：基石-摄像头与Three.js结合 【前情提要】 　　上一章，前面的两章内容，我们学习了基本的摄像头数据读取以及Three.js三维场景的创建。这两章内容学习之后，我们已经可以做很多更定制化的开发了。例如： 　　1. 我们已经可以做基于摄像头图像的AR内容开发，（比如人脸识别，AR美妆涂口红，戴帽子，适眼镜等等） 　　2. WebGL的三维游戏。 　　这一章，既是基础也是升华，主要是探讨，如何在微信小程序中出现摄像头画面的背景，然后在背景之上渲染出WebGL的三维内容。 1. 实现在微信小程序中访问摄像头，并且可以实时的拿到每一帧画面的数据。 2. 实现在微信小程序中访问WebGL接口，实现绘制三维物体。该教程采用Three.js引擎 3. 实现在背景为摄像头实时画面的背景上显示WebGL的3D物体。 4. 整体框架搭建 5. 图像算法接入 【目的】 微信小程序中实现摄像头画面为背景，之上渲染WebGL内容 [方案] 　　在开始开发之前，我们想罗列一下各种可能的方案。 　　要想在摄像头画面之上渲染出WebGL的内容

Prevent DataTexture value normalization in THREE

由 时光怂恿深爱的人放手 提交于 2020-08-10 17:38:04
问题 In THREE you can specify a DataTexture with a given data type and format. My shader pipeline normalizes the raw values based on a few user-controlled uniforms. In the case of a Float32Array, it is very simple: data = new Float32Array(...) texture = new THREE.DataTexture(data, columns, rows, THREE.LuminanceFormat, THREE.FloatType) And, in the shader, the swizzled values have non-normalized values. However, if I use: data = new Uint8Array(...) texture = new THREE.DataTexture(data, columns, rows

Prevent DataTexture value normalization in THREE

由 拜拜、爱过 提交于 2020-08-10 17:35:38
问题 In THREE you can specify a DataTexture with a given data type and format. My shader pipeline normalizes the raw values based on a few user-controlled uniforms. In the case of a Float32Array, it is very simple: data = new Float32Array(...) texture = new THREE.DataTexture(data, columns, rows, THREE.LuminanceFormat, THREE.FloatType) And, in the shader, the swizzled values have non-normalized values. However, if I use: data = new Uint8Array(...) texture = new THREE.DataTexture(data, columns, rows

Difference and uses of InstancedMesh and InterleavedBuffer in ThreeJS

由 二次信任 提交于 2020-08-09 04:32:24
问题 Can anyone help we out with the difference between InstancedMesh and InterleavedBuffer in threejs. I'm kinds confused with both the topics and can anyone let me know which is the optimized way to go with to render some large amount of geometry. Thanks in advance. 回答1: Instanced rendering and interleaved buffers a two separate things. You can use both techniques on their own or in combination. THREE.InstancedMesh provides a convenient interface for instanced rendering. This approach is useful

Difference and uses of InstancedMesh and InterleavedBuffer in ThreeJS

由 自闭症网瘾萝莉.ら 提交于 2020-08-09 04:28:02
问题 Can anyone help we out with the difference between InstancedMesh and InterleavedBuffer in threejs. I'm kinds confused with both the topics and can anyone let me know which is the optimized way to go with to render some large amount of geometry. Thanks in advance. 回答1: Instanced rendering and interleaved buffers a two separate things. You can use both techniques on their own or in combination. THREE.InstancedMesh provides a convenient interface for instanced rendering. This approach is useful

three.js中帧缓存的使用

由 五迷三道 提交于 2020-08-08 09:55:48
目录 1. 概述 2. 示例 2.1. 代码 2.2. 解析 3. 参考 1. 概述 在网上查阅了一下three.js关于帧缓存的使用，感觉很多都是关于three.js中后处理通道的使用的。后处理通道确实使用FBO实现的，但其实我就是想获取某个时刻的渲染结果作为纹理，没必要在动态渲染中进行后处理。真正实现这个功能的是WebGLRenderTarget这个类，这是一个渲染目标的缓冲区，可以装载到WebGLRenderer中进行渲染，再从WebGLRenderTarget获取纹理对象。 2. 示例 2.1. 代码 废话不多说，直接给出代码： 'use strict'; function init() { var scene = new THREE.Scene(); scene.background = new THREE.Color(0x000000); //场景的背景色 // create a camera, which defines where we're looking at. var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000); // position and point the camera to the center of the

In Three.js Is there a way to produce a trail that slowly fades over time?

由 拈花ヽ惹草 提交于 2020-08-08 05:59:50
问题 I am looking to produce an effect very similar to the following example: https://threejs.org/examples/?q=trails#webgl_trails However, I would like to make the old trail fade into the background over time -- rather than just persist into an increasingly messy screen. It seems that the following code will allow you to draw over previous frames without clearing them: renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } ); renderer.autoClearColor = false; But I am unsure how to

Advice on Improving ThreeJS Performance

由 喜你入骨 提交于 2020-08-07 05:17:49
问题 I'm the lead developer for NASA's new gamma-ray constellations page, which is an interactive outreach tool to highlight what the night sky looks like at different wavelengths: https://fermi.gsfc.nasa.gov/science/constellations/ I used ThreeJS to put together the interactive content and while the page works fine on a modern laptop, I've been seeking ways to improve performance on older devices as well as mobile platforms. My apologies if this is too broad of a question, but I would appreciate

Extruding a line in three.js

由 筅森魡賤 提交于 2020-08-07 04:04:38
问题 I have a line (of points) and I want to extrude it. What would be a simple way to achieve this? 回答1: I've found a solution. Not sure if this is the best way because three.js throws an info to use PlaneBufferGeometry instead. function extrudePath( points, depth ) { var geometry = new THREE.PlaneGeometry(0, 0, points.length - 1, 1); var vertices = geometry.vertices; for (var i = 0, l = points.length, p; i < l; i++) { p = points[i]; vertices[i].x = vertices[i + l].x = p[0]; vertices[i].y =
订阅 three.js