语言遵产品经理能力划分,我们用看哪样书

前不久工作达成忙忙碌碌工作,相同之业务周而复始难免会止步不前,感觉已经守迷失,需要重新补充下能量。但刚而人们都说了的,产品经理知识是一个苛而博大且没有特意教材的学科,所以花费了点时,按产品经营所欲的力,分别整理了几随是的书写,根据自己当哪些方面缺乏或需运用,挑着读一诵读。

  原文地址:WebGL学习(3) –
3D模型
  相信广大总人口是以创办逼真酷炫的老三维效果呢对象而上webGL的吧,首先自己虽是。我控制了十足的webGL技巧后,正准备大展身手时,遇到了扳平栽骑虎难下的景象:还是开不起想如果的东西。为啥吧,因为没3D模型可供应操作啊,纯粹用代码构建复杂的3D模型完全不行想像。那必须下3dMax,maya,以及开源之blender等建模软件拓展构建。既然已经入了webGL的坑了,那吧只能硬在头皮继续上学3D建模,断断续续学了一个基本上月份之blender教程,总算入门了。
  这节主要学习怎样导入模型文件,然后据此代码用效益,操作模型。首先展示下我的杰作,喷火战斗机的3D模型:webGL
喷火战斗机

语言 1

理所当然分类不是格外严厉,因为写不见面只是说一个接触,知识也是互通的。

情大纲

  1. 型文件
  2. 着色器
  3. 光照
  4. 范变换
  5. 事件处理

▏逻辑思考

1.《学会提问:批判性思维指南》

2.《批判性思维:带你运动有思想的误区》

3.《思考,快与慢》

4.《批判性思维工具》

型文件

  blender导出之模子文件plane.obj,
同时还连材质文件plane.mtl。模型包括2800大多独极点,2200多个对,共200大抵k的体积,内容比较老,所以只好用文件加载入html文件于好。
  那怎么加载呢?一般会利用ajax获取,但本身此发出再次便利之点子。那就是以模型文件内容预编译直出至html中,这样不光提高了加载性能,开发为再便民。具体而参照我前的稿子:前端快速支付模版
  这里运用本人事先的开销模版,
将模型(obj、mtl)文件为字符串的款型写入text/template模版中,同时以GLSL语言写的着色器也预编译到html中。到时用gulp的命令构建页面,所有内容就是见面自动生成到页面被,html部分的代码如下所示:

    {% extends '../layout/layout.html' %}
    {% block title %}spitfire fighter{% endblock %}
    {% block js %}
    <script src="./lib/webgl.js"></script>
    <script src="./lib/objParse.js"></script>
    <script src="./lib/matrix.js"></script>
    <script src="./js/index.js"></script>
    {% endblock %}
    {% block content %}
    <div class="content">
    <p>上下左右方向键 调整视角,W/S/A/D键 旋转模型, +/-键 放大缩小</p>
    <canvas id="canvas" width="800" height="600"></canvas>
    </div>
    <!-- obj文件 -->
    <script type="text/template" id="tplObj">
    {% include '../model/plane.obj' %}
    </script>
    <!-- mtl文件 -->
    <script type="text/template" id="tplMtl">
    {% include '../model/plane.mtl' %}
    </script>
    <!-- 顶点着色器 -->
    <script type="x-shader/x-vertex" id="vs">
    {% include '../glsl/vs.glsl' %}
    </script>
    <!-- 片元着色器 -->
    <script type="x-shader/x-fragment" id="fs">
    {% include '../glsl/fs.glsl' %} 
    </script>
    {% endblock %}

**▏创新**

1.《别做常规的傻瓜》

2.《这为会想到?巧妙解答无厘头问题》

3.《打开餐巾纸(〈餐巾纸的反面〉之实用手册)》

4.《idea+打开设计师的新意百宝箱》

obj文件

  obj文件包含的是范的顶点法线索引等信息。这里坐尽简便易行的立方体为例。

  • v 几哪体顶点
  • vt 贴图为标点
  • vn 顶点法线
  • f 面:顶点索引 / 纹理坐标索引 / 法线索引
  • usemtl 使用的质料名称

    # Blender v2.79 (sub 0) OBJ File: ''
    # www.blender.org
    mtllib cube.mtl
    o Cube
    v -0.442946 -1.000000 -1.000000
    v -0.442946 -1.000000 1.000000
    v -2.442946 -1.000000 1.000000
    v -2.442945 -1.000000 -1.000000
    v -0.442945 1.000000 -0.999999
    v -0.442946 1.000000 1.000001
    v -2.442946 1.000000 1.000000
    v -2.442945 1.000000 -1.000000
    vn 0.0000 -1.0000 0.0000
    vn 0.0000 1.0000 0.0000
    vn 1.0000 0.0000 0.0000
    vn -0.0000 -0.0000 1.0000
    vn -1.0000 -0.0000 -0.0000
    vn 0.0000 0.0000 -1.0000
    usemtl Material
    s off
    f 1//1 2//1 3//1 4//1
    f 5//2 8//2 7//2 6//2
    f 1//3 5//3 6//3 2//3
    f 2//4 6//4 7//4 3//4
    f 3//5 7//5 8//5 4//5
    f 5//6 1//6 4//6 8//6

要求分析

1.《淘宝十年产品从》

2.《启示录:打造用户喜爱之活》

3.《腾讯传》

4.《需求:缔造光辉商业传奇的固力量》

5.《周鸿祎自述:我之互联网方法论》

mtl文件

  mtl文件包含的是范的材质信息

  • Ka 环境色 rgb
  • Kd 漫反射色,材质颜色 rgb
  • Ks 高光色,材质高光颜色 rgb
  • Ns 反射高光 指定材质的反光指数
  • Ni 折射值 指定材质表面的一味密度
  • d 透明度

    # Blender MTL File: 'None'
    # Material Count: 1

    newmtl Material
    Ns 96.078431
    Ka 1.000000 1.000000 1.000000
    Kd 0.640000 0.640000 0.640000
    Ks 0.500000 0.500000 0.500000
    Ke 0.000000 0.000000 0.000000
    Ni 1.000000
    d 1.000000
    illum 2

  知道了obj和mtl文件之格式,我们得开的便是读取它们,逐行分析,这里运用的objParse读取解析,想了解其中原理,可以查看源代码,这里不详述。
  提取出用之音讯后,就可拿模型信息写副缓冲区,然后渲染出来。

    var canvas = document.getElementById('canvas'),
        gl = get3DContext(canvas, true),
        objElem = document.getElementById('tplObj'),
        mtlElem = document.getElementById('tplMtl');
    function main() {
        //...

        //获取变量地址
        var program = gl.program;
        program.a_Position = gl.getAttribLocation(gl.program, 'a_Position');
        //...

        // 创建空数据缓冲
        var vertexBuffer = createEmptyArrayBuffer(gl, program.a_Position, 3, gl.FLOAT);
        //...

        // 分析模型字符串
        var objDoc = new OBJDoc('plane',objElem.text,mtlElem.text);
        if(!objDoc.parse(1, false)){return;}
        var drawingInfo = objDoc.getDrawingInfo();

        // 将数据写入缓冲区
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, drawingInfo.vertices, gl.STATIC_DRAW);
        //...
    }

▏商业价值

1.《免费:商业的前景》

2.《从0到1:开启商业和前景之潜在》

3.《商业模式新生代》

4.《重来》

5.《跨越界限》

着色器

产品运营

1.《从零开始做运营》

2.《用户力:需求使之制品、运营和商业模式》

3.《长尾理论2.0》

4.《我看电商》

极着色器

  顶点着色器比较简单,和前面的区分比较充分之是,把计算颜色光照部分更换到了片元着色器,这样好实现逐片元光照,效果会更加栩栩如生和当。

    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 = normalize(vec3(u_NormalMatrix * a_Normal));
        v_Color = a_Color;
        v_Scolor = a_Scolor;
    }

产品设计

1.《简约至上:交互式设计四国策》

2.《用户体验要素:以用户也主导的产品设计》

3.《点石成金:访客至上的网页设计秘笈》

4.《在公身边,为公设计:腾讯的用户体验设计的志》

5.《写于大家看的设计书》

6.《About Face3交互设计精髓》

光照

  光照相关的盘算主要以片元着色器中,首先科普一下光照的相关信息。

    物体呈现出颜色亮度就是表面的反射光导致,计算反射光公式如下:
    <表面的反射光颜色> = <漫反射光颜色> + <环境反射光颜色> + <镜面反射光颜色>

    1. 其中漫反射公式如下:
    <漫反射光颜色> = <入射光颜色> * <表面基底色> * <光线入射角度>

    光线入射角度可以由光线方向和表面的法线进行点积求得:
    <光线入射角度> = <光线方向> * <法线方向>

    最后的漫反射公式如下:
    <漫反射光颜色> = <入射光颜色> * <表面基底色> * (<光线方向> * <法线方向>)

    2. 环境反射光颜色根据如下公式得到:
    <环境反射光颜色> = <入射光颜色> * <表面基底色>

    3. 镜面(高光)反射光颜色公式,这里使用的是冯氏反射原理
    <镜面反射光颜色> = <高光颜色> * <镜面反射亮度权重> 

    其中镜面反射亮度权重又如下
    <镜面反射亮度权重> = (<观察方向的单位向量> * <入射光反射方向>) ^ 光泽度

数量解析

1.《统计数字会说谎》

2.《巴菲特教你解析财报》

3.《谁说菜鸟无见面数据解析》

4.《深入浅出数据解析》

片元着色器

  着色器代码就是对点公式内容的演绎

    #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_MaterialShininess;// 镜面反射光泽度
    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 - v_Position);
        // 计算光线方向和法向量点积
        float nDotL = max(dot(lightDirection, normal), 0.0);
        // 漫反射光亮度
        vec3 diffuse = u_diffuseColor  * nDotL * v_Color.rgb;
        // 环境光亮度
        vec3 ambient = u_AmbientColor * v_Color.rgb;
        // 观察方向的单位向量V
        vec3 eyeDirection = normalize(-v_Position);
        // 反射方向
        vec3 reflectionDirection = reflect(-lightDirection, normal);
        // 镜面反射亮度权重
        float specularLightWeighting = pow(max(dot(reflectionDirection, eyeDirection), 0.0), u_MaterialShininess);
        // 镜面高光亮度
        vec3 specular =  v_Scolor.rgb * specularLightWeighting ;
        gl_FragColor = vec4(ambient + diffuse + specular, v_Color.a);
    }

心理学

1.《消费者行为学》

2.《怪诞心理学》

3.《乌合之多:大众心理学》

4.《马斯洛人本哲学》

5.《人类简史:从动物及上帝》

型变换

  这里先安装光照相关的初步标准,然后是mvp矩阵变换和法向量矩阵相关的乘除,具体知识点可参照前的章*[WebGL学习(2)

  • 3D场景](http://www.cnblogs.com/edwardloveyou/p/7833639.html)*

  要留心的是逆转置矩阵,主要用来计算模型变换之后的法向量,有矣转移后的法向量才能够是计算光照。

     求逆转置矩阵步骤
        1.求原模型矩阵的逆矩阵
        2.将逆矩阵转置

    <变换后法向量> = <逆转置矩阵> * <变换前法向量>

  给正在色器变量赋值然后绘制出模型,最后调用requestAnimationFrame不断执行动画。矩阵的盘部分可整合下面的keydown事件展开查。

    function main() {
        //...

        // 光线方向
        gl.uniform3f(u_LightPosition, 0.0, 2.0, 12.0);
        // 漫反射光照颜色
        gl.uniform3f(u_diffuseColor, 1.0, 1.0, 1.0);
        // 设置环境光颜色
        gl.uniform3f(u_AmbientColor, 0.5, 0.5, 0.5);
        // 镜面反射光泽度
        gl.uniform1f(u_MaterialShininess, 30.0);

        var modelMatrix = new Matrix4();
        var mvpMatrix = new Matrix4();
        var normalMatrix = new Matrix4();
        var n = drawingInfo.indices.length;

        (function animate() {
            // 模型矩阵
            if(notMan){ angleY+=0.5; }
            modelMatrix.setRotate(angleY % 360, 0, 1, 0); // 绕y轴旋转
            modelMatrix.rotate(angleX % 360, 1, 0, 0); // 绕x轴旋转

            var eyeY=viewLEN*Math.sin(viewAngleY*Math.PI/180),
                len=viewLEN*Math.cos(viewAngleY*Math.PI/180),
                eyeX=len*Math.sin(viewAngleX*Math.PI/180),
                eyeZ=len*Math.cos(viewAngleX*Math.PI/180);

            // 视点投影
            mvpMatrix.setPerspective(30, canvas.width / canvas.height, 1, 300);
            mvpMatrix.lookAt(eyeX, eyeY, eyeZ, 0, 0, 0, 0, (viewAngleY>90||viewAngleY<-90)?-1:1, 0);
            mvpMatrix.multiply(modelMatrix);
            // 根据模型矩阵计算用来变换法向量的矩阵
            normalMatrix.setInverseOf(modelMatrix);
            normalMatrix.transpose();

            // 模型矩阵
            gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix.elements);
            // mvp矩阵
            gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);
            // 法向量矩阵
            gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);

            // 清屏|清深度缓冲
            gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

            // 根据顶点索引绘制图形(图形类型,绘制顶点个数,顶点索引数据类型,顶点索引中开始绘制的位置)
            gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_SHORT, 0);
            requestAnimationFrame(animate);
        }());
    }

联系协调

1.《非暴力沟通》

2.《高难度谈话》

3.《关键对话》

4.《身份的担忧》

事件处理

  +/-
键实现放大/缩小场景的法力;WSAD键实现模型的转动,也就是是贯彻绕x轴和y轴旋转;上下横方向键实现之是视点的转。矩阵变换的连锁兑现参考上面代码的卡通片部分。

  模型旋转和视点旋转看正在特别一般,其实以产生两样的。视点的旋转是不折不扣场景比如光照模型等还是随即变化的,如果以场景做参照物,它就是一定给人变更观察位置来看物体。而模型旋转也,它只旋转模型自身,外部的普照和现象都是休转换的,以场景做参照物,相当给人口以同一职位看到模型在走。从demo的普照好观看两栽办法的界别。

    document.addEventListener('keydown',function(e){
        if([37,38,39,65,58,83,87,40].indexOf(e.keyCode)>-1){
            notMan=false;
        }
        switch(e.keyCode){
            case 38:        //up
                viewAngleY-=2;
                if(viewAngleY<-270){
                    viewAngleY+=360
                }
                break;
            case 40:        //down
                viewAngleY+=2;
                if(viewAngleY>270){
                    viewAngleY-=360
                }
                break;
            case 37:        //left
                viewAngleX+=2;
                break;
            case 39:        //right
                viewAngleX-=2;
                break;
            case 87:        //w
                angleX-=2;
                break;
            case 83:        //s
                angleX+=2;
                break;
            case 65:        //a
                angleY+=2;
                break;
            case 68:        //d
                angleY-=2;
                break;
            case 187:       //zoom in
                if(viewLEN>6) viewLEN--;
                break;
            case 189:       //zoom out
                if(viewLEN<30) viewLEN++;
                break;
            default:break;
        }
    },false);

日管理

1.《高功能人士的七单习惯》

2.《番茄工作法图解》

3.《搞定:无抑制工作的不二法门》

4.《小强升职记:时间管理故事写(升级版本)》

总结

  最后,个人感觉建立3D模型或挺费时间,需要花心机慢慢调整,才能够做出比较全面的模子。

花色管理

1.《海底捞你模仿非会见》

2.《深入浅出PMP》

3.《人月神话》

4.《敏捷估计和规划》

工具运用

1.《PPT炼成记》

2.《Excel图表之道:如何做专业中的商务图表》

3.《Word排版艺术》

4.《UML精粹:标准对象建模语言简明指南》

5.《Axure RP 6原型设计精髓》

技能知识

1.《推荐系统推行》

2.《淘宝技术随即十年》

3.《数学之美》

4.《构建的效》

末了吧利大家学习,整理了电子版的图书,有亟待之可点此购买。


笔者:璟扬,前淘宝产品经理,现电商创业狗,微信公众号:思维新势力。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图