基於three.js的shader入門教程 二

threejs交流羣511163089

頂點着色器

這個是決定你那個點最後畫在屏幕哪個位置的，最後xyz都是[-1,1]這麼一個區間的值 z用來處理遮擋關係

點的位置怎麼傳入吶 有VAO，VBO這些東西 但是我們基於threejs，emm，threejs給你封裝了一下 叫attribute

attribute下有position字段normal字段uv字段等等，裏面會裝很多float像這樣[0.0, 0.1, 0.2, 0.3, 0.4, 0.5......]

三維空間一個點 xyz三個座標 所以0.0 0.1 0.2對應了第一個點的x y z後面依次類推第二個第三個點的xyz

你還可以自己加別的屬性 如果你有用途的時候

之前提到模型是三角面構成的

這裏有些頂點會重複，那麼有index字段，直接指定第幾個頂點，寫索引[0,1,2,2,3,0]取到下標0 1 2的點畫第一個三角形

在threejs裏

只要你創建buffer類型的BufferGeometry那attribute就是給你配好了的

如果你要自定義他沒有的幾何體形狀 就需要自己配置了

你可以F12看看這個球的buffergeometry的attribute和index理解一下

var geometry = new THREE.SphereBufferGeometry(10);
var material=new THREE.ShaderMaterial({
	vertexShader:`//這 頂點着色器
   // attribute vec3 position; 這句不用寫 three裏有
	void main()
	{
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
	}`,
	fragmentShader:`
	void main()
    {
        gl_FragColor=vec4(1.0);
    }
	`,
	})
var mesh=new THREE.Mesh(geometry,material);