小编nyl*_*lki的帖子

THREE.js/GLSL:WebGL着色器,根据世界空间位置对片段进行着色

我已经看到了基于它们在屏幕空间或其本地对象空间中的位置的颜色片段的解决方案,如Three.js/GLSL - 将像素坐标转换为世界坐标.

那些正在使用屏幕坐标,并在相机移动或旋转时进行更改; 或仅适用于本地对象空间.

我想要完成的是基于它们position的世界空间(如在three.js场景图的世界空间中)对片段进行着色.

即使相机移动,颜色也应保持不变.

希望行为的示例:位于(x:0,y:0,z:2)世界空间中的1x1x1立方体将使其第三个组件(蓝色== z)始终在1.5 - 2.5之间.即使相机移动也应如此.

到目前为止我得到了什么:

顶点着色器

varying vec4 worldPosition;

void main() {


  // The following changes on camera movement:
  worldPosition = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

  // This is closer to what I want (colors dont change when camera moves)
  // but it is in local not world space:
  worldPosition = vec4(position, 1.0);

  // This works fine as long as the camera doesnt move:
  worldPosition = modelViewMatrix * …
Run Code Online (Sandbox Code Playgroud)

glsl webgl three.js glsles

7
推荐指数
1
解决办法
1339
查看次数

标签 统计

glsl ×1

glsles ×1

three.js ×1

webgl ×1