WebGL展示3D房屋内景

作者: jeffzhong | 来源:发表于2018-05-31 02:10 被阅读21次

      原文地址:WebGL展示3D房屋内景
      由于生活和工作上的原因,从年前开始一直到处奔波,没有太多的时间去关注和学习WebGL图形学相关的技术, 不过陆陆续续都有学习使用blender进行3D建模, 而这篇文章涉及到的房屋内景3D建模就是我这段时间以来的学习成果,现在展示出来.
      文件模型比较大,页面加载比较慢,请耐心等候,实例:餐厅 dinning hall 3D
      动画效果如下:

    dinning hall

    Blender

      Blender是开源的建模和动画制作软件,功能虽然没有3dmax和maya强大,但它精简,易学易用,而且还是开源的, 非常适合像我这样的入门级新手.如果你也想做模型和特效,创建自己心目中的3D世界,Blender值得你去尝试.
      入门教程推荐台湾大神的blender教程全集

    模型文件

      在blender制作好模型之后,接着就是导出obj文件,接着就是使用js读取obj文件,之后就开始涉及到WebGL,具体的步骤可以参考我之前的文章 WebGL学习(3) - 3D模型

    着色器

      着色器代码实现的是WebGL最基本的功能,使用了一个平行光源,光照部分有环境光,漫反射,冯氏高光镜面反射.代码详情如下:

    顶点着色器

    attribute vec4 a_position;//顶点位置
    attribute vec4 a_color;//顶点颜色
    attribute vec4 a_scolor;//顶点高光颜色
    attribute vec4 a_normal;//法向量
    uniform mat4 u_MvpMatrix;//mvp矩阵
    uniform mat4 u_ModelMatrix;//模型矩阵
    uniform mat4 u_NormalMatrix;
    varying vec4 v_Color;
    varying vec4 v_Scolor;
    varying vec3 v_Normal;
    varying vec3 v_Position;
    
    void main() {
        gl_Position = u_MvpMatrix * a_position;
        // 计算顶点在世界坐标系的位置,以便计算点光源在顶点处点位置
        v_Position = vec3(u_ModelMatrix * a_position);
        // 计算变换后的法向量
        v_Normal = vec3(u_NormalMatrix * a_normal);
        v_Color = a_color;
        v_Scolor = a_scolor;
    }
    

    片段着色器

    #ifdef GL_ES
    precision mediump float;
    #endif
    uniform vec3 u_LightPosition;//光源位置
    uniform vec3 u_diffuseColor;//漫反射光颜色
    uniform vec3 u_AmbientColor;//环境光颜色
    uniform vec3 u_specularColor;//镜面反射光颜色
    uniform float u_Shininess;// 镜面反射光泽度
    uniform vec3 u_viewPosition;// 视点位置
    varying vec3 v_Normal;//法向量
    varying vec3 v_Position;//顶点位置
    varying vec4 v_Color;//顶点颜色
    varying vec4 v_Scolor;//顶点高光颜色
    
    void main() {
        vec3 normal = normalize(v_Normal);
        // 平行光
        vec3 lightDirection = normalize(u_LightPosition);
        // 计算光线方向和法向量点积
        float nDotL = max(dot(lightDirection, normal), 0.0);
        // 漫反射光亮度
        vec3 diffuse = u_diffuseColor  * nDotL * v_Color.rgb;
        // 环境光亮度
        vec3 ambient = u_AmbientColor * v_Color.rgb;
        // gl_FragColor = vec4(diffuse + ambient, v_Color.a);
    
        // 观察方向的单位向量V
        vec3 eyeDirection = normalize(u_viewPosition - v_Position.xyz);// 反射方向
        // 反射方向
        vec3 reflectionDirection = reflect(-lightDirection, normal);
        // 镜面反射亮度权重
        float specularWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), u_Shininess);
        vec3 specular =  u_specularColor.rgb * specularWeighting;
        gl_FragColor = vec4(ambient + diffuse + specular, v_Color.a);
    }
    

    模型变换

      模型变换同样可参考我之前的文章 WebGL多模型光照综合实例

    总结

      这个实例最困难和花费时间最多的其实是3D建模部分,而开发所使用到的WebGL知识点由于比较基础,反而没多大难度.总之要做出酷炫逼真的特效和模型,还得继续深入学习3D建模.

    相关文章

      网友评论

        本文标题:WebGL展示3D房屋内景

        本文链接:https://www.haomeiwen.com/subject/bjefsftx.html