卜若的代码笔记-webgl系列-第十四章：glsl探索(二)$第一个shader$

最新推荐文章于 2022-04-09 12:15:03 发布

卜若

最新推荐文章于 2022-04-09 12:15:03 发布

阅读量342

点赞数

分类专栏： webgl 文章标签： webgl

本文链接：https://blog.csdn.net/qq_37080133/article/details/101012685

版权

webgl 专栏收录该内容

27 篇文章 3 订阅

订阅专栏

1 第一个shader应该在第四章的时候，就应该生出来了，但是，那个时候我太菜了，现在貌似懂一点，终于可以写一个简单的shader了。

1.1 先介绍一个Shader函数入口<-基于Three.js

var material = new THREE.ShaderMaterial({

                uniforms: params,
                vertexShader: document.getElementById('vertexShader').textContent,
                fragmentShader: document.getElementById('fragment_shader').textContent

            });

非常显然的是...显然，Shader是通过材质去进行表达的，比如最简单的材质

1.1.1 光照模型材质：

var material = new THREE.MeshLambertMaterial({color: 0xFFFFFF});

1.1.2 基础材质:

var material = new THREE.MeshBasicMaterial( {color:color.ox} );

这些都是一些简单的材质，显然，内部实现了某些Shader，之后，我们尝试去理解各种Shader，然后根据这些Shader呢，去实现我们自己的效果！！！

1.2 介绍一下，一个Three.Mesh怎么指定Material

我们需要先来看一下我封装的一个Cube函数：

function Cube(color,size) {
    var geometry = new THREE.CubeGeometry(size.x,size.y,size.z);

    var material = new THREE.MeshLambertMaterial({color: 0xFFFFFF});
    var cube = new THREE.Mesh(geometry, material);
    cube.setPosition = function(vector3){

        cube.position.x = vector3.x;
        cube.position.y = vector3.y;
        cube.position.z = vector3.z;

    };
    return cube;
}

1.3 我们发现：Cube是一个THREE.Mesh类型 so lets see ,this type comprise two object witch is material and geometry, so if we can set the material of this cube ?lets try

 window.onload = function (ev) {

            create(document.getElementById("canvas-frame"));//创建了一个View，也就是指定了Camera，lisght，Scene,renderer

            setViewport(20);//设定Camera的z值为20，保证我们的cube在裁剪空间里面
            var cube = createCube();//创建了一个cube，并添加到View中的Scene中，指定的是Lambda光照材质
            frame();//循环渲染


        }

当然，上述函数都被我封装起来了，我们现在来看一下效果：

这是一个红色立方体。

接着，我们尝试去切换它的材质，我们先来尝试打印一下这个对象：

这个对象里面有个geometry参数，这个显然是几何了，也就是用于描述mesh的点的信息，另外一个就是材质了就是material

现在，我们尝试将它的material换成其他：

我们使用Basic材质：

var material = new THREE.MeshBasicMaterial( {color:color.ox} );

Color是我自定义的一种数据结构：

function Color(r,g,b) {

    var color = {};
    color.r = r;
    color.g = g;
    color.b = b;

    color.ox = (color.r << 16) | (color.g << 8) | color.b;

    return color;
}

我们使用一个比较好看的颜色吧！

更新后的代码为：

   <script >

        window.onload = function (ev) {

            create(document.getElementById("canvas-frame"));//创建了一个View，也就是指定了Camera，lisght，Scene,renderer

            setViewport(20);//设定Camera的z值为20，保证我们的cube在裁剪空间里面
            var cube = createCube();//创建了一个cube，并添加到View中的Scene中，指定的是Lambda光照材质
            var color = Color(147,112,219);
            var material = new THREE.MeshBasicMaterial( {color:color.ox} );
            console.info(cube);
            cube.material = material;
            frame();//循环渲染


        }
    </script>

效果为：

ok，现在我们已经可以更换Mesh的材质了，接下来，我们是不是可以自己写自己的shader了？？？

写shader，就要自定义shader块：它是文本类型的哟

既然是文本类型嘛，我们就创建俩<script>脚本去存储它就ok啦~~

    <script id="fragment_shader" type="x-shader/x-fragment">
        uniform float time;

        varying vec2 vUv;
        varying vec4 pos;
        float inityValue = 0.0;
        void main( void ) {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );

        }

    </script>
    <script id="vertexShader" type="x-shader/x-vertex">
        varying vec2 vUv;
        varying vec4 pos;
        void main()
        {
        vUv = uv;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;

        }

    </script>

这就是你的第一个VertexShader 和 FragmentShader了，激动不？？

不不不，还有更刺激的嘞

我们接下来就要根据这个Shader去创建这个材质，这一步操作才是更骚的！

uniforms1 = {
                time: { value: 1.0 }
            };
            var material = new THREE.ShaderMaterial({

                uniforms: uniforms1,
                vertexShader: document.getElementById('vertexShader').textContent,
                fragmentShader: document.getElementById('fragment_shader').textContent

            });

我们像1.3中切换材质一样，把这个材质弄上去：

效果如下：

红色的嘛，红色就对啦~~

这是第一个Shader的以上内容，干巴爹，年轻人。

以下是这个Context的代码，有些依赖包没有，将就看呗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        div#canvas-frame {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 600px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="../../core/three.js"></script>
    <script src="../../core/BasicElementCreater.js"></script>
    <script src="../../core/WebglManager.js"></script>

    <script id="fragment_shader" type="x-shader/x-fragment">
        uniform float time;

        varying vec2 vUv;
        varying vec4 pos;
        float inityValue = 0.0;
        void main( void ) {
        gl_FragColor = vec4( 1.0, 0.0, 0.0, 1.0 );

        }

    </script>
    <script id="vertexShader" type="x-shader/x-vertex">
        varying vec2 vUv;
        varying vec4 pos;
        void main()
        {
        vUv = uv;
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;

        }

    </script>

    <script >

        window.onload = function (ev) {

            create(document.getElementById("canvas-frame"));//创建了一个View，也就是指定了Camera，lisght，Scene,renderer

            setViewport(20);//设定Camera的z值为20，保证我们的cube在裁剪空间里面
            var cube = createCube();//创建了一个cube，并添加到View中的Scene中，指定的是Lambda光照材质
            var color = Color(147,112,219);
         //   var material = new THREE.MeshBasicMaterial( {color:color.ox} );

            uniforms1 = {
                time: { value: 1.0 }
            };
            var material = new THREE.ShaderMaterial({

                uniforms: uniforms1,
                vertexShader: document.getElementById('vertexShader').textContent,
                fragmentShader: document.getElementById('fragment_shader').textContent

            });


            console.info(cube);
            cube.material = material;
            frame();//循环渲染


        }
    </script>
<body>


<div id="canvas-frame"></div>
</body>
</html>

卜若

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
卜若的代码笔记-webgl系列-第十四章：glsl探索(二)$第一个shader$

1 第一个shader应该在第四章的时候，就应该生出来了，但是，那个时候我太菜了，现在貌似懂一点，终于可以写一个简单的shader了。1.1 先介绍一个Shader函数入口<-基于Three.jsvar material = new THREE.ShaderMaterial({ uniforms: params, ...
复制链接

扫一扫

专栏目录