缓冲几何自定义着色器坐标（顶点+ UV）

时间：2017-07-14 03:10:10

标签： three.js webgl shader

我是3D编程的新手，我在协调像素坐标和uv坐标方面遇到了问题。

我试图制作一个＆＃34;粒子系统＆＃34;具有特定尺寸纹理（艺术品）的飞机，至少约5000架飞机，理想情况下约为30k-80k飞机。这个项目是我希望在更大规模上实现的各种事物的一个很好的例子：https://artsexperiments.withgoogle.com/freefall

我使用索引的BufferGeometry（每个矩形2个三角形）和MeshPhong材质。一旦我添加了ShaderMaterial，我的坐标就会被搞砸，纹理也没有被正确应用。

现在，几何顶点使用像素坐标，我可以使用MeshPhong在正确的位置看到一些东西。这样可以，还是一切都需要介于-1.0和1.0之间？我在网上看到不同的账号......

在这里：

＆＃13;
＆＃13; 
var vertices = [
  [0.00,62.92,0.00,0.00,0.00,0.00,63.83,0.00,0.00,63.83,62.92,0.00],
  [0.00,125.83,0.00,0.00,62.92,0.00,63.83,62.92,0.00,63.83,125.83,0.00],
  [0.00,188.75,0.00,0.00,125.83,0.00,63.83,125.83,0.00,63.83,188.75,0.00],
  [0.00,251.67,0.00,0.00,188.75,0.00,63.83,188.75,0.00,63.83,251.67,0.00],
  [63.83,62.92,0.00,63.83,0.00,0.00,127.67,0.00,0.00,127.67,62.92,0.00],
  [63.83,125.83,0.00,63.83,62.92,0.00,127.67,62.92,0.00,127.67,125.83,0.00],
  [63.83,188.75,0.00,63.83,125.83,0.00,127.67,125.83,0.00,127.67,188.75,0.00],
  [63.83,251.67,0.00,63.83,188.75,0.00,127.67,188.75,0.00,127.67,251.67,0.00],
  [127.67,62.92,0.00,127.67,0.00,0.00,191.50,0.00,0.00,191.50,62.92,0.00],
  [127.67,125.83,0.00,127.67,62.92,0.00,191.50,62.92,0.00,191.50,125.83,0.00],
  [127.67,188.75,0.00,127.67,125.83,0.00,191.50,125.83,0.00,191.50,188.75,0.00],
  [127.67,251.67,0.00,127.67,188.75,0.00,191.50,188.75,0.00,191.50,251.67,0.00],
  [191.50,62.92,0.00,191.50,0.00,0.00,255.33,0.00,0.00,255.33,62.92,0.00],
  [191.50,125.83,0.00,191.50,62.92,0.00,255.33,62.92,0.00,255.33,125.83,0.00],
  [191.50,188.75,0.00,191.50,125.83,0.00,255.33,125.83,0.00,255.33,188.75,0.00],
  [191.50,251.67,0.00,191.50,188.75,0.00,255.33,188.75,0.00,255.33,251.67,0.00],
  [255.33,62.92,0.00,255.33,0.00,0.00,319.17,0.00,0.00,319.17,62.92,0.00],
  [255.33,125.83,0.00,255.33,62.92,0.00,319.17,62.92,0.00,319.17,125.83,0.00],
  [255.33,188.75,0.00,255.33,125.83,0.00,319.17,125.83,0.00,319.17,188.75,0.00],
  [255.33,251.67,0.00,255.33,188.75,0.00,319.17,188.75,0.00,319.17,251.67,0.00],
  [319.17,62.92,0.00,319.17,0.00,0.00,383.00,0.00,0.00,383.00,62.92,0.00],
  [319.17,125.83,0.00,319.17,62.92,0.00,383.00,62.92,0.00,383.00,125.83,0.00],
  [319.17,188.75,0.00,319.17,125.83,0.00,383.00,125.83,0.00,383.00,188.75,0.00],
  [319.17,251.67,0.00,319.17,188.75,0.00,383.00,188.75,0.00,383.00,251.67,0.00],
  [0.00,377.50,0.00,0.00,251.67,0.00,127.67,251.67,0.00,127.67,377.50,0.00],
  [0.00,503.33,0.00,0.00,377.50,0.00,127.67,377.50,0.00,127.67,503.33,0.00],
  [127.67,377.50,0.00,127.67,251.67,0.00,255.33,251.67,0.00,255.33,377.50,0.00],
  [127.67,503.33,0.00,127.67,377.50,0.00,255.33,377.50,0.00,255.33,503.33,0.00],
  [255.33,377.50,0.00,255.33,251.67,0.00,383.00,251.67,0.00,383.00,377.50,0.00],
  [255.33,503.33,0.00,255.33,377.50,0.00,383.00,377.50,0.00,383.00,503.33,0.00],
  [0.00,566.25,0.00,0.00,503.33,0.00,76.60,503.33,0.00,76.60,566.25,0.00],
  [0.00,629.17,0.00,0.00,566.25,0.00,76.60,566.25,0.00,76.60,629.17,0.00],
  [0.00,692.08,0.00,0.00,629.17,0.00,76.60,629.17,0.00,76.60,692.08,0.00],
  [0.00,755.00,0.00,0.00,692.08,0.00,76.60,692.08,0.00,76.60,755.00,0.00],
  [76.60,566.25,0.00,76.60,503.33,0.00,153.20,503.33,0.00,153.20,566.25,0.00],
  [76.60,629.17,0.00,76.60,566.25,0.00,153.20,566.25,0.00,153.20,629.17,0.00],
  [76.60,692.08,0.00,76.60,629.17,0.00,153.20,629.17,0.00,153.20,692.08,0.00],
  [76.60,755.00,0.00,76.60,692.08,0.00,153.20,692.08,0.00,153.20,755.00,0.00],
  [153.20,566.25,0.00,153.20,503.33,0.00,229.80,503.33,0.00,229.80,566.25,0.00],
  [153.20,629.17,0.00,153.20,566.25,0.00,229.80,566.25,0.00,229.80,629.17,0.00],
  [153.20,692.08,0.00,153.20,629.17,0.00,229.80,629.17,0.00,229.80,692.08,0.00],
  [153.20,755.00,0.00,153.20,692.08,0.00,229.80,692.08,0.00,229.80,755.00,0.00],
  [229.80,566.25,0.00,229.80,503.33,0.00,306.40,503.33,0.00,306.40,566.25,0.00],
  [229.80,629.17,0.00,229.80,566.25,0.00,306.40,566.25,0.00,306.40,629.17,0.00],
  [229.80,692.08,0.00,229.80,629.17,0.00,306.40,629.17,0.00,306.40,692.08,0.00],
  [229.80,755.00,0.00,229.80,692.08,0.00,306.40,692.08,0.00,306.40,755.00,0.00],
  [306.40,566.25,0.00,306.40,503.33,0.00,383.00,503.33,0.00,383.00,566.25,0.00],
  [306.40,629.17,0.00,306.40,566.25,0.00,383.00,566.25,0.00,383.00,629.17,0.00],
  [306.40,692.08,0.00,306.40,629.17,0.00,383.00,629.17,0.00,383.00,692.08,0.00],
  [306.40,755.00,0.00,306.40,692.08,0.00,383.00,692.08,0.00,383.00,755.00,0.00],
  [383.00,251.67,0.00,383.00,0.00,0.00,574.50,0.00,0.00,574.50,251.67,0.00],
  [383.00,503.33,0.00,383.00,251.67,0.00,574.50,251.67,0.00,574.50,503.33,0.00],
  [383.00,755.00,0.00,383.00,503.33,0.00,574.50,503.33,0.00,574.50,755.00,0.00],
  [574.50,251.67,0.00,574.50,0.00,0.00,766.00,0.00,0.00,766.00,251.67,0.00],
  [574.50,503.33,0.00,574.50,251.67,0.00,766.00,251.67,0.00,766.00,503.33,0.00],
  [574.50,755.00,0.00,574.50,503.33,0.00,766.00,503.33,0.00,766.00,755.00,0.00],
  [766.00,188.75,0.00,766.00,0.00,0.00,957.50,0.00,0.00,957.50,188.75,0.00],
  [766.00,377.50,0.00,766.00,188.75,0.00,957.50,188.75,0.00,957.50,377.50,0.00],
  [957.50,188.75,0.00,957.50,0.00,0.00,1149.00,0.00,0.00,1149.00,188.75,0.00],
  [957.50,377.50,0.00,957.50,188.75,0.00,1149.00,188.75,0.00,1149.00,377.50,0.00],
  [766.00,566.25,0.00,766.00,377.50,0.00,957.50,377.50,0.00,957.50,566.25,0.00],
  [766.00,755.00,0.00,766.00,566.25,0.00,957.50,566.25,0.00,957.50,755.00,0.00],
  [957.50,566.25,0.00,957.50,377.50,0.00,1149.00,377.50,0.00,1149.00,566.25,0.00],
  [957.50,755.00,0.00,957.50,566.25,0.00,1149.00,566.25,0.00,1149.00,755.00,0.00],
  [1149.00,125.83,0.00,1149.00,0.00,0.00,1292.50,0.00,0.00,1292.50,125.83,0.00],
  [1149.00,251.67,0.00,1149.00,125.83,0.00,1292.50,125.83,0.00,1292.50,251.67,0.00],
  [1149.00,377.50,0.00,1149.00,251.67,0.00,1292.50,251.67,0.00,1292.50,377.50,0.00],
  [1149.00,503.33,0.00,1149.00,377.50,0.00,1292.50,377.50,0.00,1292.50,503.33,0.00],
  [1149.00,629.17,0.00,1149.00,503.33,0.00,1292.50,503.33,0.00,1292.50,629.17,0.00],
  [1149.00,755.00,0.00,1149.00,629.17,0.00,1292.50,629.17,0.00,1292.50,755.00,0.00],
  [1292.50,125.83,0.00,1292.50,0.00,0.00,1436.00,0.00,0.00,1436.00,125.83,0.00],
  [1292.50,251.67,0.00,1292.50,125.83,0.00,1436.00,125.83,0.00,1436.00,251.67,0.00],
  [1292.50,377.50,0.00,1292.50,251.67,0.00,1436.00,251.67,0.00,1436.00,377.50,0.00],
  [1292.50,503.33,0.00,1292.50,377.50,0.00,1436.00,377.50,0.00,1436.00,503.33,0.00],
  [1292.50,629.17,0.00,1292.50,503.33,0.00,1436.00,503.33,0.00,1436.00,629.17,0.00],
  [1292.50,755.00,0.00,1292.50,629.17,0.00,1436.00,629.17,0.00,1436.00,755.00,0.00],        
];   

// if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
  container = document.getElementById( 'container' );
  //
  camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
  camera.position.z = 2750;
  camera.position.x += window.innerWidth / 2;
  camera.position.y += window.innerHeight / 2;
  scene = new THREE.Scene();
  scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
  scene.add( new THREE.AmbientLight( 0x444444 ) );
  var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
  light1.position.set( 1, 1, 1 );
  scene.add( light1 );
  var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
  light2.position.set( 0, -1, 0 );
  scene.add( light2 );

  var planes = 50;
  var planes = vertices.length;

  var geometry = new THREE.BufferGeometry();
  var positions = new Float32Array( planes * 4 * 3 );
  var normals = new Float32Array( planes * 4 * 3 );
  var colors = new Float32Array( planes * 4 * 3 );
  var color = new THREE.Color();
  var n = 800, n2 = n/2;	
  var d = 50, d2 = d/2;	

  var pA = new THREE.Vector3();
  var pB = new THREE.Vector3();
  var pC = new THREE.Vector3();
  var pD= new THREE.Vector3();

  var cb = new THREE.Vector3();
  var ab = new THREE.Vector3();

  var positions = [].concat.apply([], vertices);
  positions = new Float32Array(positions);


  for ( var i = 0; i < positions.length; i += 12 ) {
    // positions
    var x = Math.random() * n - n2;
    var y = Math.random() * n - n2;
    var z = Math.random() * n - n2;
    var z = 0;
    var ax = x + Math.random() * d - d2;
    var ay = y + Math.random() * d - d2;
    var az = z + Math.random() * d - d2;
    var bx = x + Math.random() * d - d2;
    var by = y + Math.random() * d - d2;
    var bz = z + Math.random() * d - d2;
    var cx = x + Math.random() * d - d2;
    var cy = y + Math.random() * d - d2;
    var cz = z + Math.random() * d - d2;
    var dx = x + Math.random() * d - d2;
    var dy = y + Math.random() * d - d2;
    var dz = z + Math.random() * d - d2;

    // flat face normals
    pA.set( ax, ay, az );
    pB.set( bx, by, bz );
    pC.set( cx, cy, cz );
    pD.set( dx, dy, dz );

    cb.subVectors( pC, pB );
    ab.subVectors( pA, pB );
    cb.cross( ab );
    cb.normalize();
    var nx = cb.x;
    var ny = cb.y;
    var nz = cb.z;
    normals[ i ]     = nx;
    normals[ i + 1 ] = ny;
    normals[ i + 2 ] = nz;
    normals[ i + 3 ] = nx;
    normals[ i + 4 ] = ny;
    normals[ i + 5 ] = nz;
    normals[ i + 6 ] = nx;
    normals[ i + 7 ] = ny;
    normals[ i + 8 ] = nz;
    normals[ i + 9 ] = nx;
    normals[ i + 10 ] = ny;
    normals[ i + 11 ] = nz;
    // colors
    var vx = ( x / n ) + 0.5;
    var vy = ( y / n ) + 0.5;
    var vz = ( z / n ) + 0.5;
    color.setRGB( vx, vy, vz );
    colors[ i ]     = color.r;
    colors[ i + 1 ] = color.g;
    colors[ i + 2 ] = color.b;
    colors[ i + 3 ] = color.r;
    colors[ i + 4 ] = color.g;
    colors[ i + 5 ] = color.b;
    colors[ i + 6 ] = color.r;
    colors[ i + 7 ] = color.g;
    colors[ i + 8 ] = color.b;
    colors[ i + 9 ] = color.r;
    colors[ i + 10 ] = color.g;
    colors[ i + 11 ] = color.b;
  }

  var test = [];
  var uvs = [];
  for (var j = 0; j < (planes * 4); j+=4) {
    // applying front facing uvs?
    uvs.push(0)
    uvs.push(0)

    uvs.push(1)
    uvs.push(0)

    uvs.push(0)
    uvs.push(1)

    uvs.push(1)
    uvs.push(1)


    test.push(j)
    test.push(j+2)
    test.push(j+1)

    test.push(j)
    test.push(j+3)
    test.push(j+2)
  }

  function disposeArray() { this.array = null; }
  var indices = new Uint32Array(test);
  geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );

  geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
  geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
  geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
  geometry.addAttribute( 'uv', new THREE.BufferAttribute( new Float32Array(uvs), 2 ).onUpload( disposeArray ) );

  geometry.computeBoundingSphere();
  var material = new THREE.MeshPhongMaterial( {
    color: 0xaaaaaa, specular: 0xffffff, shininess: 250,
    side: THREE.DoubleSide, vertexColors: THREE.VertexColors
  } );

  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  //
  renderer = new THREE.WebGLRenderer( { antialias: false } );
  // renderer.setClearColor( scene.fog.color );
  renderer.setClearColor( 0x101010 );

  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  container.appendChild( renderer.domElement );

  window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
  requestAnimationFrame( animate );
  render();
  // stats.update();
}
function render() {

  renderer.render( scene, camera );
}
＆＃13; 
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">

			uniform float amplitude;
			uniform float direction;
			uniform vec3 cameraPos;

			uniform float time;

			varying vec2 vUv;

			void main() {
				vec3 pos = position; 
				vUv = uv;
        gl_Position =   projectionMatrix * 
                modelViewMatrix * 
                vec4(position * vec3(1, -1, 0),1.0);

			}

</script>

<script type="x-shader/x-fragment" id="FS1">
			uniform sampler2D texture;
	    varying vec2 vUv;

			void main() {

				gl_FragColor = texture2D( texture, vUv );

			}
</script>
＆＃13;
＆＃13;
＆＃13;

不确定我是否正确应用纹理的UV坐标。即使只是将相同的纹理与材料相同并尝试映射到每个平面上也不起作用。纹理穿过diagonaly平面（UVs有问题）？

纹理+相同的顶点数据：

uvs.push(0)
uvs.push(0)

uvs.push(1)
uvs.push(0)

uvs.push(0)
uvs.push(1)

uvs.push(1)
uvs.push(1)

＆＃13;
＆＃13; 
var vertices = [
[0.00,62.92,0.00,0.00,0.00,0.00,63.83,0.00,0.00,63.83,62.92,0.00],
[0.00,125.83,0.00,0.00,62.92,0.00,63.83,62.92,0.00,63.83,125.83,0.00],
[0.00,188.75,0.00,0.00,125.83,0.00,63.83,125.83,0.00,63.83,188.75,0.00],
[0.00,251.67,0.00,0.00,188.75,0.00,63.83,188.75,0.00,63.83,251.67,0.00],
[63.83,62.92,0.00,63.83,0.00,0.00,127.67,0.00,0.00,127.67,62.92,0.00],
[63.83,125.83,0.00,63.83,62.92,0.00,127.67,62.92,0.00,127.67,125.83,0.00],
[63.83,188.75,0.00,63.83,125.83,0.00,127.67,125.83,0.00,127.67,188.75,0.00],
[63.83,251.67,0.00,63.83,188.75,0.00,127.67,188.75,0.00,127.67,251.67,0.00],
[127.67,62.92,0.00,127.67,0.00,0.00,191.50,0.00,0.00,191.50,62.92,0.00],
[127.67,125.83,0.00,127.67,62.92,0.00,191.50,62.92,0.00,191.50,125.83,0.00],
[127.67,188.75,0.00,127.67,125.83,0.00,191.50,125.83,0.00,191.50,188.75,0.00],
[127.67,251.67,0.00,127.67,188.75,0.00,191.50,188.75,0.00,191.50,251.67,0.00],
[191.50,62.92,0.00,191.50,0.00,0.00,255.33,0.00,0.00,255.33,62.92,0.00],
[191.50,125.83,0.00,191.50,62.92,0.00,255.33,62.92,0.00,255.33,125.83,0.00],
[191.50,188.75,0.00,191.50,125.83,0.00,255.33,125.83,0.00,255.33,188.75,0.00],
[191.50,251.67,0.00,191.50,188.75,0.00,255.33,188.75,0.00,255.33,251.67,0.00],
[255.33,62.92,0.00,255.33,0.00,0.00,319.17,0.00,0.00,319.17,62.92,0.00],
[255.33,125.83,0.00,255.33,62.92,0.00,319.17,62.92,0.00,319.17,125.83,0.00],
[255.33,188.75,0.00,255.33,125.83,0.00,319.17,125.83,0.00,319.17,188.75,0.00],
[255.33,251.67,0.00,255.33,188.75,0.00,319.17,188.75,0.00,319.17,251.67,0.00],
[319.17,62.92,0.00,319.17,0.00,0.00,383.00,0.00,0.00,383.00,62.92,0.00],
[319.17,125.83,0.00,319.17,62.92,0.00,383.00,62.92,0.00,383.00,125.83,0.00],
[319.17,188.75,0.00,319.17,125.83,0.00,383.00,125.83,0.00,383.00,188.75,0.00],
[319.17,251.67,0.00,319.17,188.75,0.00,383.00,188.75,0.00,383.00,251.67,0.00],
[0.00,377.50,0.00,0.00,251.67,0.00,127.67,251.67,0.00,127.67,377.50,0.00],
[0.00,503.33,0.00,0.00,377.50,0.00,127.67,377.50,0.00,127.67,503.33,0.00],
[127.67,377.50,0.00,127.67,251.67,0.00,255.33,251.67,0.00,255.33,377.50,0.00],
[127.67,503.33,0.00,127.67,377.50,0.00,255.33,377.50,0.00,255.33,503.33,0.00],
[255.33,377.50,0.00,255.33,251.67,0.00,383.00,251.67,0.00,383.00,377.50,0.00],
[255.33,503.33,0.00,255.33,377.50,0.00,383.00,377.50,0.00,383.00,503.33,0.00],
[0.00,566.25,0.00,0.00,503.33,0.00,76.60,503.33,0.00,76.60,566.25,0.00],
[0.00,629.17,0.00,0.00,566.25,0.00,76.60,566.25,0.00,76.60,629.17,0.00],
[0.00,692.08,0.00,0.00,629.17,0.00,76.60,629.17,0.00,76.60,692.08,0.00],
[0.00,755.00,0.00,0.00,692.08,0.00,76.60,692.08,0.00,76.60,755.00,0.00],
[76.60,566.25,0.00,76.60,503.33,0.00,153.20,503.33,0.00,153.20,566.25,0.00],
[76.60,629.17,0.00,76.60,566.25,0.00,153.20,566.25,0.00,153.20,629.17,0.00],
[76.60,692.08,0.00,76.60,629.17,0.00,153.20,629.17,0.00,153.20,692.08,0.00],
[76.60,755.00,0.00,76.60,692.08,0.00,153.20,692.08,0.00,153.20,755.00,0.00],
[153.20,566.25,0.00,153.20,503.33,0.00,229.80,503.33,0.00,229.80,566.25,0.00],
[153.20,629.17,0.00,153.20,566.25,0.00,229.80,566.25,0.00,229.80,629.17,0.00],
[153.20,692.08,0.00,153.20,629.17,0.00,229.80,629.17,0.00,229.80,692.08,0.00],
[153.20,755.00,0.00,153.20,692.08,0.00,229.80,692.08,0.00,229.80,755.00,0.00],
[229.80,566.25,0.00,229.80,503.33,0.00,306.40,503.33,0.00,306.40,566.25,0.00],
[229.80,629.17,0.00,229.80,566.25,0.00,306.40,566.25,0.00,306.40,629.17,0.00],
[229.80,692.08,0.00,229.80,629.17,0.00,306.40,629.17,0.00,306.40,692.08,0.00],
[229.80,755.00,0.00,229.80,692.08,0.00,306.40,692.08,0.00,306.40,755.00,0.00],
[306.40,566.25,0.00,306.40,503.33,0.00,383.00,503.33,0.00,383.00,566.25,0.00],
[306.40,629.17,0.00,306.40,566.25,0.00,383.00,566.25,0.00,383.00,629.17,0.00],
[306.40,692.08,0.00,306.40,629.17,0.00,383.00,629.17,0.00,383.00,692.08,0.00],
[306.40,755.00,0.00,306.40,692.08,0.00,383.00,692.08,0.00,383.00,755.00,0.00],
[383.00,251.67,0.00,383.00,0.00,0.00,574.50,0.00,0.00,574.50,251.67,0.00],
[383.00,503.33,0.00,383.00,251.67,0.00,574.50,251.67,0.00,574.50,503.33,0.00],
[383.00,755.00,0.00,383.00,503.33,0.00,574.50,503.33,0.00,574.50,755.00,0.00],
[574.50,251.67,0.00,574.50,0.00,0.00,766.00,0.00,0.00,766.00,251.67,0.00],
[574.50,503.33,0.00,574.50,251.67,0.00,766.00,251.67,0.00,766.00,503.33,0.00],
[574.50,755.00,0.00,574.50,503.33,0.00,766.00,503.33,0.00,766.00,755.00,0.00],
[766.00,188.75,0.00,766.00,0.00,0.00,957.50,0.00,0.00,957.50,188.75,0.00],
[766.00,377.50,0.00,766.00,188.75,0.00,957.50,188.75,0.00,957.50,377.50,0.00],
[957.50,188.75,0.00,957.50,0.00,0.00,1149.00,0.00,0.00,1149.00,188.75,0.00],
[957.50,377.50,0.00,957.50,188.75,0.00,1149.00,188.75,0.00,1149.00,377.50,0.00],
[766.00,566.25,0.00,766.00,377.50,0.00,957.50,377.50,0.00,957.50,566.25,0.00],
[766.00,755.00,0.00,766.00,566.25,0.00,957.50,566.25,0.00,957.50,755.00,0.00],
[957.50,566.25,0.00,957.50,377.50,0.00,1149.00,377.50,0.00,1149.00,566.25,0.00],
[957.50,755.00,0.00,957.50,566.25,0.00,1149.00,566.25,0.00,1149.00,755.00,0.00],
[1149.00,125.83,0.00,1149.00,0.00,0.00,1292.50,0.00,0.00,1292.50,125.83,0.00],
[1149.00,251.67,0.00,1149.00,125.83,0.00,1292.50,125.83,0.00,1292.50,251.67,0.00],
[1149.00,377.50,0.00,1149.00,251.67,0.00,1292.50,251.67,0.00,1292.50,377.50,0.00],
[1149.00,503.33,0.00,1149.00,377.50,0.00,1292.50,377.50,0.00,1292.50,503.33,0.00],
[1149.00,629.17,0.00,1149.00,503.33,0.00,1292.50,503.33,0.00,1292.50,629.17,0.00],
[1149.00,755.00,0.00,1149.00,629.17,0.00,1292.50,629.17,0.00,1292.50,755.00,0.00],
[1292.50,125.83,0.00,1292.50,0.00,0.00,1436.00,0.00,0.00,1436.00,125.83,0.00],
[1292.50,251.67,0.00,1292.50,125.83,0.00,1436.00,125.83,0.00,1436.00,251.67,0.00],
[1292.50,377.50,0.00,1292.50,251.67,0.00,1436.00,251.67,0.00,1436.00,377.50,0.00],
[1292.50,503.33,0.00,1292.50,377.50,0.00,1436.00,377.50,0.00,1436.00,503.33,0.00],
[1292.50,629.17,0.00,1292.50,503.33,0.00,1436.00,503.33,0.00,1436.00,629.17,0.00],
[1292.50,755.00,0.00,1292.50,629.17,0.00,1436.00,629.17,0.00,1436.00,755.00,0.00],
];

// use canvas instead of image since a dataURL is too large
var image = document.createElement( 'canvas' );
image.width = 64;
image.height = 64;
const ctx = image.getContext('2d');
const gradient = ctx.createLinearGradient(0, 0, 0, 64);
gradient.addColorStop(0.00, '#F00');
gradient.addColorStop(0.25, '#FF0');
gradient.addColorStop(0.50, '#0F0');
gradient.addColorStop(0.75, '#0FF');
gradient.addColorStop(1.00, '#00F');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 64, 64);
ctx.translate(32, 32);
ctx.font = "48px sans-serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.lineWidth = 5;
ctx.strokeText("F", 0, 0);
ctx.fillStyle = "yellow";
ctx.fillText("F", 0, 0);
var texture = new THREE.Texture( image );
texture.needsUpdate = true;
document.body.appendChild(image);




// if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var container, stats;
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
  container = document.getElementById( 'container' );
  //
  camera = new THREE.PerspectiveCamera( 27, window.innerWidth / window.innerHeight, 1, 3500 );
  camera.position.z = 2750;
  camera.position.x += window.innerWidth / 2;
  camera.position.y += window.innerHeight / 2;
  scene = new THREE.Scene();
  scene.fog = new THREE.Fog( 0x050505, 2000, 3500 );
  //
  scene.add( new THREE.AmbientLight( 0x444444 ) );
  var light1 = new THREE.DirectionalLight( 0xffffff, 0.5 );
  light1.position.set( 1, 1, 1 );
  scene.add( light1 );
  var light2 = new THREE.DirectionalLight( 0xffffff, 1.5 );
  light2.position.set( 0, -1, 0 );
  scene.add( light2 );
  //
  var planes = 50;
  var planes = vertices.length;

  var geometry = new THREE.BufferGeometry();
  var positions = new Float32Array( planes * 4 * 3 );
  var normals = new Float32Array( planes * 4 * 3 );
  var colors = new Float32Array( planes * 4 * 3 );
  var color = new THREE.Color();
  var n = 800, n2 = n/2;	
  var d = 50, d2 = d/2;	

  var pA = new THREE.Vector3();
  var pB = new THREE.Vector3();
  var pC = new THREE.Vector3();
  var pD= new THREE.Vector3();

  var cb = new THREE.Vector3();
  var ab = new THREE.Vector3();
  var positions = [].concat.apply([], vertices);
  positions = new Float32Array(positions);


  for ( var i = 0; i < positions.length; i += 12 ) {
    // positions
    var x = Math.random() * n - n2;
    var y = Math.random() * n - n2;
    var z = Math.random() * n - n2;
    var z = 0;
    var ax = x + Math.random() * d - d2;
    var ay = y + Math.random() * d - d2;
    var az = z + Math.random() * d - d2;
    var bx = x + Math.random() * d - d2;
    var by = y + Math.random() * d - d2;
    var bz = z + Math.random() * d - d2;
    var cx = x + Math.random() * d - d2;
    var cy = y + Math.random() * d - d2;
    var cz = z + Math.random() * d - d2;
    var dx = x + Math.random() * d - d2;
    var dy = y + Math.random() * d - d2;
    var dz = z + Math.random() * d - d2;

    // flat face normals
    pA.set( ax, ay, az );
    pB.set( bx, by, bz );
    pC.set( cx, cy, cz );
    pD.set( dx, dy, dz );

    cb.subVectors( pC, pB );
    ab.subVectors( pA, pB );
    cb.cross( ab );
    cb.normalize();
    var nx = cb.x;
    var ny = cb.y;
    var nz = cb.z;
    normals[ i ]     = nx;
    normals[ i + 1 ] = ny;
    normals[ i + 2 ] = nz;
    normals[ i + 3 ] = nx;
    normals[ i + 4 ] = ny;
    normals[ i + 5 ] = nz;
    normals[ i + 6 ] = nx;
    normals[ i + 7 ] = ny;
    normals[ i + 8 ] = nz;
    normals[ i + 9 ] = nx;
    normals[ i + 10 ] = ny;
    normals[ i + 11 ] = nz;
    // colors
    var vx = ( x / n ) + 0.5;
    var vy = ( y / n ) + 0.5;
    var vz = ( z / n ) + 0.5;
    color.setRGB( vx, vy, vz );
    colors[ i ]     = color.r;
    colors[ i + 1 ] = color.g;
    colors[ i + 2 ] = color.b;
    colors[ i + 3 ] = color.r;
    colors[ i + 4 ] = color.g;
    colors[ i + 5 ] = color.b;
    colors[ i + 6 ] = color.r;
    colors[ i + 7 ] = color.g;
    colors[ i + 8 ] = color.b;
    colors[ i + 9 ] = color.r;
    colors[ i + 10 ] = color.g;
    colors[ i + 11 ] = color.b;
  }

  var test = [];
  var uvs = [];
  for (var j = 0; j < (planes * 4); j+=4) {

    uvs.push(0)
    uvs.push(0)

    uvs.push(1)
    uvs.push(0)

    uvs.push(0)
    uvs.push(1)

    uvs.push(1)
    uvs.push(1)


    test.push(j)
    test.push(j+2)
    test.push(j+1)

    test.push(j)
    test.push(j+3)
    test.push(j+2)
  }

  function disposeArray() { this.array = null; }
  var indices = new Uint32Array(test);
  geometry.setIndex( new THREE.BufferAttribute( indices, 1 ) );

  geometry.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ).onUpload( disposeArray ) );
  geometry.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ).onUpload( disposeArray ) );
  geometry.addAttribute( 'color', new THREE.BufferAttribute( colors, 3 ).onUpload( disposeArray ) );
  geometry.addAttribute( 'uv', new THREE.BufferAttribute( new Float32Array(uvs), 2 ).onUpload( disposeArray ) );

  geometry.computeBoundingSphere();


  var uniforms = {
    amplitude: { type: "f", value: 0.0 },
    texture:   { type: "t", value: texture},
    time:		{ type: "f", value: 1.0 },
    cameraPos: { type: 'v3', value: [] },
    direction:		{ type: "f", value: 1.0 }
  }

  var material = new THREE.ShaderMaterial( {
    uniforms: 		uniforms,
    vertexShader:   document.getElementById( 'vertexshader' ).textContent,
    fragmentShader: document.getElementById( 'FS' + 1 ).textContent,

    blending: 		THREE.NormalBlending,
    depthTest: 		true,
    transparent:	false,
  });

  mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
  //
  renderer = new THREE.WebGLRenderer( { antialias: false } );
  // renderer.setClearColor( scene.fog.color );
  renderer.setClearColor( 0x101010 );

  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  container.appendChild( renderer.domElement );
  //
  // stats = new Stats();
  // container.appendChild( stats.dom );
  //
  window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize( window.innerWidth, window.innerHeight );
}
//
function animate() {
  requestAnimationFrame( animate );
  render();
  // stats.update();
}
function render() {
  var time = Date.now() * 0.001;
  // mesh.rotation.x = time * 0.025;
  // mesh.rotation.y = time * 0.05;
  renderer.render( scene, camera );
}
＆＃13; 
<div id="container"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.js"></script>
<script type="x-shader/x-vertex" id="vertexshader">

  uniform float amplitude;
  uniform float direction;
  uniform vec3 cameraPos;

  uniform float time;

  varying vec2 vUv;

  void main() {
    vec3 pos = position; 
    vUv = uv;
    gl_Position =   projectionMatrix * 
            modelViewMatrix * 
            vec4(position * vec3(1, -1, 0),1.0);

  }

</script>

<script type="x-shader/x-fragment" id="FS1">
  uniform sampler2D texture;
  varying vec2 vUv;

  void main() {

    gl_FragColor = texture2D( texture, vUv );

  }
</script>
＆＃13;
＆＃13;
＆＃13;

这些uvs对每架飞机都有意义吗？

1 个答案:

答案 0 :(得分：1)

您的顶点坐标可以是您想要的任何单位。您只需创建适当的投影矩阵和相机即可查看它们。

至于你对角线纹理是的，你的纹理坐标是乱序的。第二个例子是顶点位置像这样

1-----2
|     |
|     |
|     |
4-----3

但是你有这样的UV坐标

1-----2
|     |
|     |
|     |
3-----4

将它们更改为

      uvs.push(0)
      uvs.push(0)

      uvs.push(0)
      uvs.push(1)

      uvs.push(1)
      uvs.push(1)

      uvs.push(1)
      uvs.push(0)

为我修好了

相关问题
最新问题