你能在three.js中使用原始的WebGL纹理吗 [英] Can you use raw WebGL Textures with three.js

问题描述

我有一个相当复杂的架构，我在 Three.JS 中完成我的大部分工作，但我也有一个特殊的渲染器，可以直接渲染到原始的 WebGL 纹理.是否可以在three.js纹理"中使用此WebGL纹理?看起来 Three.JS 纹理类只是图像、视频或画布的容器，并且在 Three.js 深处的某个地方，它会将其上传到真正的 webgl 纹理.我怎样才能让 Three.js 将我的 WebGL 纹理渲染到网格上?

解决方案

@Brendan 的回答不再有效.

不知道什么时候变了，懒得去查了，但从 r102 开始

const texture = new THREE.Texture();renderer.setTexture2D(texture, 0);//强制three.js初始化纹理const texProps = renderer.properties.get(texture);texProps.__webglTexture = glTex;

从 r103 开始​​，setTexture2D 不再存在.你可以改用这个

 const forceTextureInitialization = function() {const material = new THREE.MeshBasicMaterial();const geometry = new THREE.PlaneBufferGeometry();const Scene = new THREE.Scene();Scene.add(new THREE.Mesh(geometry, material));const camera = new THREE.Camera();返回函数 forceTextureInitialization(texture) {material.map = 纹理；renderer.render(场景，相机)；};}();const 纹理 = 新的 THREE.Texture();forceTextureInitialization(纹理)；//强制three.js初始化纹理const texProps = renderer.properties.get(texture);texProps.__webglTexture = glTex;

'use strict';/* 全局三 */函数主(){const canvas = document.querySelector('#c');const renderer = new THREE.WebGLRenderer({画布:画布});常量 fov = 75;常量方面 = 2;//画布默认常量接近 = 0.1;常量远 = 5;const camera = new THREE.PerspectiveCamera(fov,aspect,near,far);相机.位置.z = 2;const Scene = new THREE.Scene();const boxWidth = 1;const boxHeight = 1;const boxDepth = 1;const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);const forceTextureInitialization = function() {const material = new THREE.MeshBasicMaterial();const geometry = new THREE.PlaneBufferGeometry();const Scene = new THREE.Scene();Scene.add(new THREE.Mesh(geometry, material));const camera = new THREE.Camera();返回函数 forceTextureInitialization(texture) {material.map = 纹理；renderer.render(场景，相机)；};}();const 立方体 = [];//只是一个我们可以用来旋转立方体的数组{const gl = renderer.getContext();const glTex = gl.createTexture();gl.bindTexture(gl.TEXTURE_2D, glTex);gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0,gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([255, 0, 0, 255,0, 255, 0, 255,0, 0, 255, 255,255, 255, 0, 255,]));gl.generateMipmap(gl.TEXTURE_2D);gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);const 纹理 = 新的 THREE.Texture();forceTextureInitialization(纹理)；const texProps = renderer.properties.get(texture);texProps.__webglTexture = glTex;const material = new THREE.MeshBasicMaterial({地图:纹理，});const cube = new THREE.Mesh(geometry, material);场景.添加(立方体)；立方体.推(立方体)；//添加到我们要旋转的立方体列表中}函数渲染(时间){时间 *= 0.001;立方体.forEach((立方体，ndx)=> {常量速度 = .2 + ndx * .1；const rot = 时间 * 速度；cube.rotation.x = 腐烂；cube.rotation.y = 腐烂；});renderer.render(场景，相机)；请求动画帧(渲染)；}请求动画帧(渲染)；}main();

<canvas id="c"></canvas><script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>

注意:three.js 中没有不支持的行为"这样的东西.Three.js 不保证您今天所做的任何事情明天都会奏效.Three.js 随时打破它想要的任何东西

I have a fairly complicated architecture where I am doing most of my stuff in Three.JS but I also have a special renderer that renders directly to a raw WebGL texture. Is it possible to use this WebGL texture in a three.js "Texture"? It looks like the Three.JS texture class is just a container for an image or video or canvas, and somewhere deep in the guts of three.js it will upload that to a real webgl texture. How can I just have Three.js render my WebGL texture onto a mesh?

解决方案

@Brendan's answer no longer works.

No idea when it changed and too lazy to go look it up but as of r102

const texture = new THREE.Texture();
renderer.setTexture2D(texture, 0);  // force three.js to init the texture
const texProps = renderer.properties.get(texture);
texProps.__webglTexture = glTex;

as of r103 setTexture2D no longer exists. You can use this instead

  const forceTextureInitialization = function() {
    const material = new THREE.MeshBasicMaterial();
    const geometry = new THREE.PlaneBufferGeometry();
    const scene = new THREE.Scene();
    scene.add(new THREE.Mesh(geometry, material));
    const camera = new THREE.Camera();

    return function forceTextureInitialization(texture) {
      material.map = texture;
      renderer.render(scene, camera);
    };
  }();

  const texture = new THREE.Texture();
  forceTextureInitialization(texture);  // force three.js to init the texture
  const texProps = renderer.properties.get(texture);
  texProps.__webglTexture = glTex;

'use strict';

/* global THREE */

function main() {
  const canvas = document.querySelector('#c');
  const renderer = new THREE.WebGLRenderer({
    canvas: canvas
  });
  
  const fov = 75;
  const aspect = 2; // the canvas default
  const near = 0.1;
  const far = 5;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.z = 2;

  const scene = new THREE.Scene();

  const boxWidth = 1;
  const boxHeight = 1;
  const boxDepth = 1;
  const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
  
  const forceTextureInitialization = function() {
    const material = new THREE.MeshBasicMaterial();
    const geometry = new THREE.PlaneBufferGeometry();
    const scene = new THREE.Scene();
    scene.add(new THREE.Mesh(geometry, material));
    const camera = new THREE.Camera();

    return function forceTextureInitialization(texture) {
      material.map = texture;
      renderer.render(scene, camera);
    };
  }();

  const cubes = []; // just an array we can use to rotate the cubes

  {
    const gl = renderer.getContext();
    const glTex = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, glTex);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0,
        gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
          255, 0, 0, 255,
          0, 255, 0, 255,
          0, 0, 255, 255,
          255, 255, 0, 255,
        ]));
    gl.generateMipmap(gl.TEXTURE_2D);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
  
    const texture = new THREE.Texture();
    forceTextureInitialization(texture);
    const texProps = renderer.properties.get(texture);
    texProps.__webglTexture = glTex;
    
    const material = new THREE.MeshBasicMaterial({
      map: texture,
    });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
    cubes.push(cube); // add to our list of cubes to rotate
  }

  function render(time) {
    time *= 0.001;

    cubes.forEach((cube, ndx) => {
      const speed = .2 + ndx * .1;
      const rot = time * speed;
      cube.rotation.x = rot;
      cube.rotation.y = rot;
    });

    renderer.render(scene, camera);

    requestAnimationFrame(render);
  }

  requestAnimationFrame(render);
}

main();

<canvas id="c"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>

Note: There is no such thing as "unsupported behavior" in three.js. Three.js makes no guarantee that anything you are doing today will work tomorrow. Three.js breaks whatever it wants to whenever it wants to

这篇关于你能在three.js中使用原始的WebGL纹理吗的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！