shader编程-三维场景下SDF建模，平滑交集、平滑并集、平滑差集（WebGL-Shader开发基础11）

最新推荐文章于 2023-07-28 16:47:46 发布
最新推荐文章于 2023-07-28 16:47:46 发布
阅读量1k 收藏 2
点赞数 1
分类专栏： WebGL-Shader基础 文章标签： WebGL RayMarching GLSL 三维web SDF建模
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw8704149/article/details/122018652
版权

三维场景下SDF建模，平滑交集、平滑并集、平滑差集

1. demo效果

smooth-operate


如上所示，三个展示的模型分别为球体和立方体进行平滑交集、平滑并集、平滑差集运算的效果

2. 实现要点

2.1 平滑运算方法定义

demo用到平滑交集、平滑并集、平滑差集运算，它们的定义如下

//平滑交集
float opSmoothI( float d1, float d2, float k )
{
  float h = max(k-abs(d1-d2),0.0);
  return max(d1, d2) + h*h*0.25/k;
}

//平滑并集
float opSmoothU( float d1, float d2, float k )
{
  float h = max(k-abs(d1-d2),0.0);
  return min(d1, d2) - h*h*0.25/k;
}

//平滑差集
float opSmoothS( float d1, float d2, float k )
{
  float h = max(k-abs(-d1-d2),0.0);
  return max(-d1, d2) + h*h*0.25/k;
}

2.2 模型计算

有了之前的铺垫，今天的内容比较简单，就是将两个模型使用对应的平滑操作函数处理，然后使用处理好的结果追加上材质ID，之后把它们求并集返回即可，具体如下

vec2 res =  vec2(p.y,0.0);//地面

vec3 pos = p-vec3(0,2,5);//确定模型的中心
vec4 boxPos = vec4(pos,1.0);//转为其次坐标
boxPos*=rotX(0.6);//旋转

//平滑交集
boxPos.x += 2.5; //使模型绘制原点沿x轴左移2.5个单位
float box1 = sdBox(boxPos.xyz,vec3(1.0),0.06);//方块
float sphere1 = sdSphere(boxPos.xyz-vec3(0.0,sin(u_time)*0.25+1.2,0.0),0.6);//上下浮动的球
vec2 boxSphereSmoothI = vec2(opSmoothI(sphere1,box1,0.25),1.0);



//平滑并集
boxPos.x -= 2.5;//使模型绘制原点沿x轴右移2.5个单位
float box2 = sdBox(boxPos.xyz,vec3(1.0),0.06);//方块
float sphere2 = sdSphere(boxPos.xyz-vec3(0.0,sin(u_time)*0.25+1.2,0.0),0.6);//上下浮动的球
vec2 boxSphereSmoothU = vec2(opSmoothU(sphere2,box2,0.25),2.0);


//平滑差集
boxPos.x -= 2.5;//使模型绘制原点沿x轴右移2.5个单位
float box = sdBox(boxPos.xyz,vec3(1.0),0.06);//方块
float sphere = sdSphere(boxPos.xyz-vec3(0.0,sin(u_time)*0.25+1.2,0.0),0.6);//上下浮动的球
vec2 boxSphereSmoothS = vec2(opSmoothS(sphere,box,0.25),3.0);

res = opU(res,boxSphereSmoothI); 
res = opU(res,boxSphereSmoothU); 
res = opU(res,boxSphereSmoothS); 

return res;

3. demo代码

今天新内容不但少而且简单，只经过两步就跳到最后的代码展示了，愿天下没有难写的shader!

<body>
  <div id="container"></div>
  <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script>
  <script>
    var container;
    var camera, scene, renderer;
    var uniforms;
    var vertexShader = `
      void main() {
        gl_Position = vec4( position, 1.0 );
      } 
    `
    var fragmentShader = `
    #ifdef GL_ES
    precision mediump float;
    #endif
    uniform float u_time;
    uniform vec2 u_mouse;
    uniform vec2 u_resolution;

    const int MAX_STEPS = 100;//最大步进步数
    const float MAX_DIST = 100.0;//最大步进距离
    const float SURF_DIST = 0.01;//相交检测临近表面距离

    //绕z轴旋转矩阵
    mat4 rotZ(float a) {
      return mat4(cos(a),-sin(a),0.0,0.0,
                  sin(a),cos(a),0.0,0.0,
                  0.0,0.0,1.0,0.0,
                  0.0,0.0,0.0,1.0
                  );
    }
    
    //绕x轴旋转矩阵
    mat4 rotX(float a) {
      return mat4(1.0,0.0,0.0,0.0,
                  0.0,cos(a),-sin(a),0.0,
                  0.0,sin(a),cos(a),0.0,
                  0.0,0.0,0.0,1.0
                );
    }
    
    //绕y轴旋转矩阵
    mat4 rotY(float a) {
      return mat4(cos(a),0.0,sin(a),0.0,
                  0.0,1.0,0.0,0.0,
                  -sin(a),0.0,cos(a),0.0,
                  0.0,0.0,0.0,1.0
                );
    } 

    //平滑交集
    float opSmoothI( float d1, float d2, float k )
    {
      float h = max(k-abs(d1-d2),0.0);
      return max(d1, d2) + h*h*0.25/k;
    }

    //平滑并集
    float opSmoothU( float d1, float d2, float k )
    {
      float h = max(k-abs(d1-d2),0.0);
      return min(d1, d2) - h*h*0.25/k;
    }

    //平滑差集
    float opSmoothS( float d1, float d2, float k )
    {
      float h = max(k-abs(-d1-d2),0.0);
      return max(-d1, d2) + h*h*0.25/k;
    }


    //并集
    vec2 opU( vec2 d1, vec2 d2 )
    {
      return (d1.x<d2.x) ? d1 : d2;
    }


    //球体
    float sdSphere( vec3 p, float s )
    {
      return length(p)-s;
    }

    //立方体
    float sdBox( vec3 p, vec3 b,float rad )
    {
      vec3 d = abs(p) - b;
      return min(max(d.x,max(d.y,d.z)),0.0) + length(max(d,0.0)) - rad;
    }


    vec2 getDistandMaterial(vec3 p){

      vec2 res =  vec2(p.y,0.0);//地面
 
      vec3 pos = p-vec3(0,2,5);//确定模型的中心
      vec4 boxPos = vec4(pos,1.0);//转为其次坐标
      boxPos*=rotX(0.6);//旋转

      //平滑交集
      boxPos.x += 2.5; //使模型绘制原点沿x轴左移2.5个单位
      float box1 = sdBox(boxPos.xyz,vec3(1.0),0.06);//方块
      float sphere1 = sdSphere(boxPos.xyz-vec3(0.0,sin(u_time)*0.25+1.2,0.0),0.6);//上下浮动的球
      vec2 boxSphereSmoothI = vec2(opSmoothI(sphere1,box1,0.25),1.0);


     
      //平滑并集
      boxPos.x -= 2.5;//使模型绘制原点沿x轴右移2.5个单位
      float box2 = sdBox(boxPos.xyz,vec3(1.0),0.06);//方块
      float sphere2 = sdSphere(boxPos.xyz-vec3(0.0,sin(u_time)*0.25+1.2,0.0),0.6);//上下浮动的球
      vec2 boxSphereSmoothU = vec2(opSmoothU(sphere2,box2,0.25),2.0);

      
      //平滑差集
      boxPos.x -= 2.5;//使模型绘制原点沿x轴右移2.5个单位
      float box = sdBox(boxPos.xyz,vec3(1.0),0.06);//方块
      float sphere = sdSphere(boxPos.xyz-vec3(0.0,sin(u_time)*0.25+1.2,0.0),0.6);//上下浮动的球
      vec2 boxSphereSmoothS = vec2(opSmoothS(sphere,box,0.25),3.0);
   
      res = opU(res,boxSphereSmoothI); 
      res = opU(res,boxSphereSmoothU); 
      res = opU(res,boxSphereSmoothS); 

      return res;
    }

    vec2 rayMarch(vec3 rayStart, vec3 rayDirection) {
      float depth=0.;
      float material=0.;
      for(int i=0; i<MAX_STEPS; i++) {
        vec3 p = rayStart + rayDirection*depth;//上一次步进结束后的坐标也就是这一次步进出发点

        vec2 dm = getDistandMaterial(p);
        float dist = dm.x;//获取当前步进出发点与物体相交时距离
        material = dm.y;
        depth += dist; //步进长度累加

        if(depth>MAX_DIST || dist<SURF_DIST) break;//步进距离大于最大步进距离或与物体表面距离小于最小表面距离(光线进入物体)停止前进
      }
      return vec2(depth,material);
    }

    vec3 getNormal(vec3 p){
      return normalize(vec3(
        getDistandMaterial(vec3(p.x + SURF_DIST, p.y, p.z)).x - getDistandMaterial(vec3(p.x - SURF_DIST, p.y, p.z)).x,
        getDistandMaterial(vec3(p.x, p.y + SURF_DIST, p.z)).x - getDistandMaterial(vec3(p.x, p.y - SURF_DIST, p.z)).x,
        getDistandMaterial(vec3(p.x, p.y, p.z  + SURF_DIST)).x - getDistandMaterial(vec3(p.x, p.y, p.z - SURF_DIST)).x
      ));
    }


    //Blinn-Phong模型光照计算
    vec3 calcBlinnPhongLight( vec3 materialColor, vec3 p, vec3 ro) {

      vec3 lightPos = vec3(5.0 * sin(u_time), 20.0, 10.0*cos(u_time)-18.);//光源坐标

      //计算环境光
      float k_a = 0.3;//环境光反射系数
      vec3 ambientLight = 0.6 * vec3(1.0, 1.0, 1.0);
      vec3 ambient = k_a*ambientLight;
      
      vec3 N = getNormal(p); //法线
      vec3 L = normalize(lightPos - p); //光照方向
      vec3 V = normalize(ro - p); //视线
      vec3 H = normalize(V+L); //半程向量

      float r = length(lightPos - p);


      //计算漫反射光
      float k_d = 0.6;//漫反射系数
      float dotLN = clamp(dot(L, N),0.0,1.0);//点乘，并将结果限定在0~1
      vec3 diffuse = k_d * (materialColor/r*r) * dotLN;


      //计算高光反射光
      float k_s = 0.8;//镜面反射系数
      float shininess = 160.0;
      vec3 specularColor = vec3(1.0, 1.0, 1.0);
      vec3 specular = k_s * (specularColor/r*r)* pow(clamp(dot(N, H), 0.0, 1.0), shininess);//计算高光
  
      
      //计算阴影
      vec2 res = rayMarch(p + N*SURF_DIST*2.0,L); 
      if(res.x<length(lightPos-p)-0.001){
        diffuse*=0.1;
      }
        
      //颜色 =  环境光 + 漫反射光 + 镜面反射光
      return ambient +diffuse + specular;
    }

    void main( void ) {

      //窗口坐标调整为[-1,1],坐标原点在屏幕中心
      vec2 st = (gl_FragCoord.xy * 2. - u_resolution) / u_resolution.y;


      vec3 ro = vec3(0.0,2.0,0.0);//视点
      vec3 rd = normalize(vec3(st.x,st.y,1.0));//视线方向

      vec2 res = rayMarch(ro,rd);//反向光线追踪求交点距离与材质ID

      float d = res.x;//物体与视点的距离
      float m = res.y;//材质ID
  
      vec3 p = ro + rd * d;

      vec3 materialColor = vec3(1.0, 0.0, 1.0);//默认材质色，使用差集计算出来的内壁会使用该色填充
      
      
      //为不同物体设置不同的材质颜色
      if(m==0.0){
        materialColor = vec3(.2, 0.0, 0.0);
      }
      if(m==1.0){
        materialColor = vec3(.2, 0.0, 1.0);
      }
      if(m==2.0){
        materialColor = vec3(.7, 0.2, 0.0);
      }
      if(m==3.0){
        materialColor = vec3(.8, .9, 0.0);
      }

      vec3 color = vec3(1.0,1.0,1.0);

      //使用Blinn-Phong模型计算光照
      color *= calcBlinnPhongLight( materialColor, p, ro);

      gl_FragColor = vec4(color, 1.0);

    }
    `

    init();
    animate();

    function init() {
      container = document.getElementById('container');

      camera = new THREE.Camera();
      camera.position.z = 1;

      scene = new THREE.Scene();

      var geometry = new THREE.PlaneBufferGeometry(2, 2);

      uniforms = {
        u_time: {
          type: "f",
          value: 1.0
        },
        u_resolution: {
          type: "v2",
          value: new THREE.Vector2()
        },
        u_mouse: {
          type: "v2",
          value: new THREE.Vector2()
        }
      };

      var material = new THREE.ShaderMaterial({
        uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader
      });

      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);

      renderer = new THREE.WebGLRenderer();
      //renderer.setPixelRatio(window.devicePixelRatio);

      container.appendChild(renderer.domElement);

      onWindowResize();
      window.addEventListener('resize', onWindowResize, false);

      document.onmousemove = function (e) {
        uniforms.u_mouse.value.x = e.pageX
        uniforms.u_mouse.value.y = e.pageY
      }
    }

    function onWindowResize(event) {
      renderer.setSize(800, 800);
      uniforms.u_resolution.value.x = renderer.domElement.width;
      uniforms.u_resolution.value.y = renderer.domElement.height;
    }

    function animate() {
      requestAnimationFrame(animate);
      render();
    }

    function render() {
      uniforms.u_time.value += 0.02;
      renderer.render(scene, camera);
    }
  </script>
</body>
点燃火柴
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【gazebo要素9】 SDF制作Model文件(1)
gongdiwudu的专栏
08-13 3797
SDF 模型的范围从简单的形状到复杂的机器人。它指的是 SDF 标签，本质上是链接、关节、碰撞对象、视觉效果和插件的集合。根据所需模型的复杂性，生成模型文件可能很困难。此页面将提供一些有关如何构建模型的提示。...
集合操作（交，并，补，差，环和，环积）
09-10
集合操作（交，并，补，差，环和，环积），使用C++写的代码
shader-park-touchdesigner:在 TouchDesigner 中渲染着色器公园雕塑
08-03
着色器公园触摸设计师 在 TouchDesigner 中渲染着色器公园雕塑 入门 :party_popper: 工作文件在 dist 文件夹中可用。 解压缩 shader-park-core.zip 并将文件放在与Shader Park TD.toe相同的文件夹中 打开Shader Park TD.toe，玩得开心。 将您的 Shader Park 代码写入 txt 文件并将其附加到 Shader_Park_Core 组件进行渲染。 在没有安装 node.js 的情况下在 MacOS + Windows 上测试对于 Windows，这仅在 Windows 8.1 及更高版本上运行。 尚未在 Linux 上测试 从源头构建 如果您想重新编译 node.js 环境 + 将着色器公园代码转换为 TouchDesigner 项目的可执行文件的脚本，则可以使用以下构建命令。 项目设置 yarn install 构建
font-atlas-sdf：填充具有SDF字体图集纹理
02-05
字体地图集 用字体纹理图集填充<canvas>元素–可用于快速生成SDF（签名距离字段）字体。 SDF是在WebGL中绘制文本的最有效方法，请参见 。 有关位图字体，请参见 。 用法 canvas = fontAtlas（选项？） 填充并返回带有字体纹理图集的<canvas>元素。 有以下选项： 属性 默认 含义 canvas 新帆布 使用现有的<canvas>元素。 font 16px sans-serif 绘制文本时使用的字体系列。 可以是字符串或具有字体属性的对象： size ， family ， style ， weight ， variant ， stretch 。
basegl-old：出色的快速WebGL绘图API
02-04
BaseGL BaseGL是一种快速的WebGL绘图API。 当前支持二维操作，包括SDF形状，动画，鼠标处理和SDF文本（在线图集烘焙以及渲染）。 文档： :
shader编程-RayMarching三维场景下使用交集、并集、差集方法CSG建模（WebGL-Shader开发基础10）
点燃火柴的博客
12-15 2516
RayMarching三维场景下使用交集、并集、差集方法CSG建模1. CSG介绍2. demo效果3. 实现过程3.1 交集、并集、差集函数3.2 旋转矩阵3.3 基础形状3.4 组合过程3.4.1 互相垂直圆柱实现3.4.2 相交的球体与立方体3.4.3 二者取差集4. demo代码 1. CSG介绍 上一篇文章学习了模型的基本变换(旋转、缩放、平移)，这篇简单说说CSG建模，即构造实体形状，它是一种通过交集、并集、差集的运算用简单的几何形状创建复杂几何形状的方法，下面的图片可以清楚的描述这种方式建
shader编程-2D基本图形SDF(有向距离场)介绍与使用（WebGL-Shader开发基础05）
点燃火柴的博客
11-21 5062
shader编程-2D基本图形SDF有向距离场介绍与使用1. 有向距离场介绍2. SDF绘制圆3. SDF绘制矩形4. SDF绘制线段 1. 有向距离场介绍 有向距离场，英文名Signed Distance Field，简称SDF，把空间中与物体表面的距离进行采样，使用负值表示物体内部，使用正值表示物体外部，与物体的表面的距离为0，大于0，小于0和等于0区分物体的区域，你很快可以联想到之前使用的step函数和smoothstep函数，是的，通过与这两个函数的配合，就可以像前面样绘制图形了 2. SDF绘制圆
shader编程-RayMarching与SDF搭建三维场景实现Blinn-Phong光照（WebGL-Shader开发基础08）
点燃火柴的博客
12-11 1058
RayMarching与Blinn-Phong光照模型搭建三维场景1. demo概述与效果2. Blinn-Phong光照模型介绍3. demo实现3.1 场景物体准备3.2 rayMarching调整3.3 Blinn-Phong光照计算4. demo代码 1. demo概述与效果 上一篇文章学习了RayMarching，但是做出的场景的效果是黑白，这一篇在上一篇内容的基础上，进行改进，使用Blinn-Phong光照模型渲染出不同色彩的物体，下面是demo的最终效果，不同的物体有了属于自己的色彩
浅谈3D隐式表示（SDF，Occupancy field，NeRF）
weixin_43117620的博客
07-28 8163
本篇文章介绍了符号距离函数Signed Distance Funciton(SDF)，占用场Occupancy Field，神经辐射场Neural Radiance Field（NeRF）的概念、联系与区别。
GAMES101现代计算机图形学入门——几何表示之基本表示方法
qq_59153970的博客
09-30 815
GAMES101现代计算机图形学入门课程个人笔记，对应原视频中10到11节内容 在涵盖了课程内容基础上，在个人能力范围之内进行部分了拓展，包含作业的代码及实现思路
shaders-on-scroll:滚动上的平滑 WebGL 着色器转换
07-24
在 Scroll 上使用平滑的 WebGL 着色器转换在舞台上摇摆不定 使用 Three.js 和 GSAP 创建基于平滑滚动的 GLSL 动画的便捷设置。 安装 安装依赖： npm install 编译开发代码并启动本地服务器： npm start 创建构建： npm run build 杂项 关注 Codrops： 、 、 、 执照 用 :blue_heart: 通过
gh.rar_SDF-FFT_multiplier vhdl_sdf fft
09-23
IMPLEMENTATION OF FAST SDC-SDF PIPELINED FFT USING CSD MULTIPLIER
生成对抗网络和三维形状的自动编码器- marian42/shapegan
01-27
Generative Adversarial Networks and Autoencoders for 3D ShapesThis repository provides code for the paper "Adversarial Generation of Continuous Implicit ShapeRepresentations" and for my master thesis ...
关于__Federico Milano 的电力系统分析工具箱.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
mlab-upenn 研究小组的心脏模型模拟.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
混合图像创建大师matlab代码.zip
04-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
中序遍历二叉树-java版本
04-26
在Java中，实现二叉树的中序遍历同样可以通过递归来完成。中序遍历的顺序是：首先递归地中序遍历左子树，然后访问根节点，最后递归地中序遍历右子树。 在这段代码中，Node类定义了二叉树的节点，BinaryTree类包含一个指向根节点的指针和inOrder方法，用于递归地进行中序遍历。printInOrder方法调用inOrder方法并打印出遍历的结果。 在Main类中，我们创建了一个示例二叉树，并调用printInOrder方法来输出中序遍历的结果。输出应该是：4 2 5 1 3，这表示中序遍历的顺序是左子树（4），然后是根节点（2），接着是右子树的左子树（5），然后是右子树的根节点（1），最后是右子树的右子树（3）。
无头单向非循环链表的实现（SList.c）
最新发布
04-26
无头单向非循环链表的实现（函数定义文件）
两个有序链表的合并pta
04-26
"PTA" 通常指的是一种在线编程平台，例如“Pata”或者某些特定学校或组织的编程练习与自动评测系统。在这种平台或系统中，学生或程序员会提交代码来解决各种问题，然后系统会自动运行并评测这些代码的正确性。 当提到“两个有序链表的合并PTA”时，这通常意味着在PTA平台上解决一个特定的问题，即合并两个有序链表。具体任务可能是给定两个已按升序排序的链表，要求编写代码来合并这两个链表，形成一个新的有序链表。
mdadm /dev/md0 -f /dev/sdg -r /sdv/sdf
11-07
在这个命令中，/dev/md0是RAID设备的名称，-f选项用于将设备标记为失败，/dev/sdg是要标记为失败的设备，-r选项用于从RAID设备中删除设备，/dev/sdv/sdf是要删除的设备。这个命令的作用是将设备标记为失败并从RAID...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值