精华内容
下载资源
问答
  • MRSL Motion Primitive Library for quadrotor v1.2 Motion Primitive Library 是一个基于搜索的规划器,用于计算四旋翼飞行器在障碍物杂乱环境中飞行的动态可行轨迹。 我们的方法通过使用一组短时运动原语探索地图...
  • 主要primitive类型的撒点 canvas的绘制 相机视角的封装 材质类的扩展 可扩展性强 预览核心代码:http://dongnan185.com/primitivePoints1.png http://dongnan185.com/primitivePoints2.png ...
  • nodejs-primitive 这是应用程序的nodejs端口,最初由Michael Fogleman创建(用go编写)。 其目的是复制带有几何图元的图像。 此实现比原始实现慢,但足够快以致可以使用。 这个怎么运作 您可以在原始go app的中找到...
  • primitive字体

    2019-10-22 22:48:22
    primitive字体是一款用于海报设计方面的字体
  • JavaScript中,string、number、boolean均为primitive基本类型,也即字符串、数值、布尔值并不是以对象的形式而存在的。不过,由于需要对这三种primitive类型值进行操作,因此JavaScript会自动封装这三种类型的值,...
  • $ npm install --save is-primitive 原始值 定义了六种基本类型的数据类型: Boolean Null Undefined Number String Symbol (ECMAScript 6中的新增功能) 用法 var isPrimitive = require ( 'is-primitive' )...
  • Time Series Shapelets A New Primitive for Data Mining shapelets论文2009
  • $ npm install validate.io-primitive-array 要在浏览器中使用,请使用 。 用法 var isPrimitiveArray = require ( 'validate.io-primitive-array' ) ; isPrimitiveArray( 值 ) 验证value是否为 JavaScript 原语...
  • $ npm install validate.io-number-primitive 要在浏览器中使用,请使用 。 用法 var isNumber = require ( 'validate.io-number-primitive' ) ; isNumber( 值 ) 验证value是否为number原语,不包括NaN 。 var ...
  • Primitive-Collections-源码

    2021-06-24 20:05:13
    自述文件 只需编译源代码就可以了。 一般的 这个项目的诞生是为了在 Java 中使用集合时避免装箱和自动装箱。 1.1 检查测试文件夹以获取示例(我正在从 bitbucket 移动项目,所以...) 重要的 ...
  • Java 的原始集合是原始 Java 类型的集合框架。 该框架支持所有原始类型,并包括到标准 Java 集合框架的桥梁。
  • PrimitiveType.java

    2020-05-06 15:22:24
    java基础数据类型实例。数据类型在**数据结构**中的定义:一组性质相同的值的集合以及定义在这个值集合上的一组操作的总称。 所以我们要编写程序,就要捣鼓数据结构,数据结构的最基本组成就是基本数据类型。
  • Laravel开发-primitive

    2019-08-28 12:02:53
    Laravel开发-primitive php oop基元类型
  • React原语 跨目标的原始React接口 安装 npm install --save react-primitives 您还需要安装要支持的目标: 网络: npm install --save react-dom react-native-web react-art 本机iOS和Android: npm install --...
  • 基本接口 用于原始协议的开源接口。 这是一个用create-next-app引导的Next.js项目。 入门 首先,使用yarn dev运行开发服务器,并使用浏览器打开以查看结果。 您可以在./src/pages开始编辑页面。...
  • 我们从下面图片去观察cesium是怎样触发primitive更新的 1,初始化cesium场景时候会默认执行CesiumWidget类里面的startRenderLoop方法,该方法的作用是 ![image]...

    我们从下面图片去观察cesium是怎样触发primitive更新的

    1,初始化cesium场景时候会默认执行CesiumWidget类里面的startRenderLoop方法,该方法的作用是

    image

    调用浏览器requestAnimationFrame方法循环执行widget.render方法进行渲染,我们再看看

    image

     

    CesiumWidget里面的rander方法,这个方法调用了scene.initializeFrame()进行初始化一帧,Clock.tick()方法触发时钟更新当前时间,Scene.render方法进行渲染。我们再看看Scene.render方法

    image

     

    该方法大致做了以下几件事,更新帧数,预先更新3dtiles数据,预先更新相机飞行的3dtiles数据,调用render方法等

    image

     

    我们看看Scene.render方法,该方法内部调用Scene.updateAndExecuteCommands方法

    image

     

    Scene.prototype.updateAndExecuteCommands方法根据frameState.mode变量判断是否是3d场景然后执行executeCommandsInViewport方法渲染视口内的图元,

    image

     

    调用Scene类里的updateAndRenderPrimitives方法执行primitive更新

    image.png

     


    从图中可以看到Scene类里的updateAndRenderPrimitives方法主要做了以下几件事1,更新groundPrimtive贴地primitive.2,更新primitive。3,更新shadowmap 阴影贴图。4,渲染globe椭球体。我们再看看scene._primitives.update(frameState)方法
     

    image.png

     


    PrimitiveCollection类的update方法遍历了集合中的primitive然后调用单个primitive的update方法

    image.png

     


    从图中我们可以看到调用了createBatchTable方法,该方法的作用是cesium会根据primitive的参数设置自动生成shader
     

    image.png

     


     

    image.png

     


    例如根据primitive的填充颜色会生成"czm_batchTable_color"方法,根据primitive是否被选中生成"czm_batchTable_pickColor"方法等。
    创建完batchTable之后接着会更新batchTable关联的纹理,将batchTable的属性都写入纹理中,再从片元着色器读取纹理获得属性信息。之后会调用loadAsynchronous或者loadSynchronous方法合并几何实例对象

    image.png

     


    然后再根据appearance外观属性和material材质属性是否改变来创建

    image.png

     

    image.png

     


    渲染状态,创建着色程序,创建渲染命令,更新帧状态里的绘制命令数组。(这些方法代码太多,不细述)
    我们看一下绘制primitive最后生成的着色程序
    1,顶点着色器
    ``` #define OES_texture_float_linear

    #define OES_texture_float

    uniform vec3 czm_encodedCameraPositionMCLow;
    uniform vec3 czm_encodedCameraPositionMCHigh;
    float czm_signNotZero(float value)
    {
    return value >= 0.0 ? 1.0 : -1.0;
    }
    vec2 czm_signNotZero(vec2 value)
    {
    return vec2(czm_signNotZero(value.x), czm_signNotZero(value.y));
    }
    vec3 czm_signNotZero(vec3 value)
    {
    return vec3(czm_signNotZero(value.x), czm_signNotZero(value.y), czm_signNotZero(value.z));
    }
    vec4 czm_signNotZero(vec4 value)
    {
    return vec4(czm_signNotZero(value.x), czm_signNotZero(value.y), czm_signNotZero(value.z), czm_signNotZero(value.w));
    }

    vec4 czm_columbusViewMorph(vec4 position2D, vec4 position3D, float time)
    {
    vec3 p = mix(position2D.xyz, position3D.xyz, time);
    return vec4(p, 1.0);
    }

    vec4 czm_translateRelativeToEye(vec3 high, vec3 low)
    {
    vec3 highDifference = high - czm_encodedCameraPositionMCHigh;
    vec3 lowDifference = low - czm_encodedCameraPositionMCLow;
    return vec4(highDifference + lowDifference, 1.0);
    }

    uniform float czm_morphTime;
    vec3 czm_octDecode(vec2 encoded, float range)
    {
    if (encoded.x == 0.0 && encoded.y == 0.0) {
    return vec3(0.0, 0.0, 0.0);
    }
    encoded = encoded / range * 2.0 - 1.0;
    vec3 v = vec3(encoded.x, encoded.y, 1.0 - abs(encoded.x) - abs(encoded.y));
    if (v.z < 0.0)
    {
    v.xy = (1.0 - abs(v.yx)) * czm_signNotZero(v.xy);
    }
    return normalize(v);
    }
    vec3 czm_octDecode(vec2 encoded)
    {
    return czm_octDecode(encoded, 255.0);
    }
    vec3 czm_octDecode(float encoded)
    {
    float temp = encoded / 256.0;
    float x = floor(temp);
    float y = (temp - x) * 256.0;
    return czm_octDecode(vec2(x, y));
    }
    void czm_octDecode(vec2 encoded, out vec3 vector1, out vec3 vector2, out vec3 vector3)
    {
    float temp = encoded.x / 65536.0;
    float x = floor(temp);
    float encodedFloat1 = (temp - x) * 65536.0;
    temp = encoded.y / 65536.0;
    float y = floor(temp);
    float encodedFloat2 = (temp - y) * 65536.0;
    vector1 = czm_octDecode(encodedFloat1);
    vector2 = czm_octDecode(encodedFloat2);
    vector3 = czm_octDecode(vec2(x, y));
    }

    uniform mat4 czm_modelViewProjectionRelativeToEye;
    uniform mat3 czm_normal;
    uniform mat4 czm_modelViewRelativeToEye;
    vec4 czm_computePosition();

    #line 0

    #line 0

    attribute vec3 position2DHigh;
    attribute vec3 position2DLow;

    attribute float compressedAttributes;
    vec3 normal;

    attribute vec3 position3DHigh;
    attribute vec3 position3DLow;


    attribute float batchId;
    varying vec3 v_positionEC;
    varying vec3 v_normalEC;
    varying vec4 v_color;

    uniform highp sampler2D batchTexture; 
    uniform vec4 batchTextureStep; 
    //根据batchId关联表id和batchTextureStep关联表纹理步长计算纹理坐标
    vec2 computeSt(float batchId) 

        float stepX = batchTextureStep.x; 
        float centerX = batchTextureStep.y; 
        float numberOfAttributes = float(2); 
        return vec2(centerX + (batchId * numberOfAttributes * stepX), 0.5); 

    //根据batchId从纹理中获取填充颜色
    vec4 czm_batchTable_color(float batchId) 

        vec2 st = computeSt(batchId); 
        st.x += batchTextureStep.x * float(0); 
        vec4 textureValue = texture2D(batchTexture, st); 
        vec4 value = textureValue; 
        return value; 

    //根据batchId从纹理中获取拾取颜色
    vec4 czm_batchTable_pickColor(float batchId) 

        vec2 st = computeSt(batchId); 
        st.x += batchTextureStep.x * float(1); 
        vec4 textureValue = texture2D(batchTexture, st); 
        vec4 value = textureValue; 
        return value; 

    void czm_non_pick_main()
    {
    //计算坐标,cesium会将一个世界坐标拆成整数部分和小数部分
    vec4 p = czm_computePosition();
    //将模型坐标系下的顶点坐标转到相机坐标系
    v_positionEC = (czm_modelViewRelativeToEye * p).xyz;
    //将法线转到相机坐标系
    v_normalEC = czm_normal * normal;
    //获取填充颜色
    v_color = czm_batchTable_color(batchId);
    //使用MVP矩阵将坐标转换到标准裁剪坐标系
    gl_Position = czm_modelViewProjectionRelativeToEye * p;
    }

    varying vec4 v_pickColor; 
    void czm_non_compressed_main() 

        czm_non_pick_main(); 
        v_pickColor = czm_batchTable_pickColor(batchId); 
    }
    void main() 

        normal = czm_octDecode(compressedAttributes);
        czm_non_compressed_main(); 
    }
    vec4 czm_computePosition()
    {
        vec4 p;
        if (czm_morphTime == 1.0)
        {
            p = czm_translateRelativeToEye(position3DHigh, position3DLow);
        }
        else if (czm_morphTime == 0.0)
        {
            p = czm_translateRelativeToEye(position2DHigh.zxy, position2DLow.zxy);
        }
        else
        {
            p = czm_columbusViewMorph(
                    czm_translateRelativeToEye(position2DHigh.zxy, position2DLow.zxy),
                    czm_translateRelativeToEye(position3DHigh, position3DLow),
                    czm_morphTime);
        }
        return p;
    }

    ```

    2,片元着色器

    ``` #ifdef GL_FRAGMENT_PRECISION_HIGH
        precision highp float;
    #else
        precision mediump float;
        #define highp mediump
    #endif

    #define OES_texture_float_linear

    #define OES_texture_float

    const float czm_epsilon2 = 0.01;

    uniform vec3 czm_lightColor;
    const float czm_sceneMode3D = 3.0;

    uniform float czm_sceneMode;
    //计算高光
    float czm_getSpecular(vec3 lightDirectionEC, vec3 toEyeEC, vec3 normalEC, float shininess)
    {
    vec3 toReflectedLight = reflect(-lightDirectionEC, normalEC);
    float specular = max(dot(toReflectedLight, toEyeEC), 0.0);
    return pow(specular, max(shininess, czm_epsilon2));
    }
    //计算漫反射
    float czm_getLambertDiffuse(vec3 lightDirectionEC, vec3 normalEC)
    {
    return max(dot(lightDirectionEC, normalEC), 0.0);
    }
    //材质结构体
    struct czm_material
    {
    vec3 diffuse;
    float specular;
    float shininess;
    vec3 normal;
    vec3 emission;
    float alpha;
    };
    //材质输入结构体
    struct czm_materialInput
    {
    float s;
    vec2 st;
    vec3 str;
    vec3 normalEC;
    mat3 tangentToEyeMatrix;
    vec3 positionToEyeEC;
    float height;
    float slope;
    float aspect;
    };

    uniform float czm_gamma;
    uniform vec3 czm_lightDirectionEC;
    float czm_private_getLambertDiffuseOfMaterial(vec3 lightDirectionEC, czm_material material)
    {
    return czm_getLambertDiffuse(lightDirectionEC, material.normal);
    }
    float czm_private_getSpecularOfMaterial(vec3 lightDirectionEC, vec3 toEyeEC, czm_material material)
    {
    return czm_getSpecular(lightDirectionEC, toEyeEC, material.normal, material.shininess);
    }
    //布灵冯-光照模型
    vec4 czm_phong(vec3 toEye, czm_material material, vec3 lightDirectionEC)
    {
    float diffuse = czm_private_getLambertDiffuseOfMaterial(vec3(0.0, 0.0, 1.0), material);
    if (czm_sceneMode == czm_sceneMode3D) {
    diffuse += czm_private_getLambertDiffuseOfMaterial(vec3(0.0, 1.0, 0.0), material);
    }
    float specular = czm_private_getSpecularOfMaterial(lightDirectionEC, toEye, material);
    vec3 materialDiffuse = material.diffuse * 0.5;
    vec3 ambient = materialDiffuse;
    vec3 color = ambient + material.emission;
    color += materialDiffuse * diffuse * czm_lightColor;
    color += material.specular * specular * czm_lightColor;
    return vec4(color, material.alpha);
    }
    vec4 czm_private_phong(vec3 toEye, czm_material material, vec3 lightDirectionEC)
    {
    float diffuse = czm_private_getLambertDiffuseOfMaterial(lightDirectionEC, material);
    float specular = czm_private_getSpecularOfMaterial(lightDirectionEC, toEye, material);
    vec3 ambient = vec3(0.0);
    vec3 color = ambient + material.emission;
    color += material.diffuse * diffuse * czm_lightColor;
    color += material.specular * specular * czm_lightColor;
    return vec4(color, material.alpha);
    }
    //cesium内置获取默认材质发方法
    czm_material czm_getDefaultMaterial(czm_materialInput materialInput)
    {
    czm_material material;
    material.diffuse = vec3(0.0);
    material.specular = 0.0;
    material.shininess = 1.0;
    material.normal = materialInput.normalEC;
    material.emission = vec3(0.0);
    material.alpha = 1.0;
    return material;
    }
    //伽马矫正
    vec3 czm_gammaCorrect(vec3 color) {
    #ifdef HDR
    color = pow(color, vec3(czm_gamma));
    #endif
    return color;
    }
    vec4 czm_gammaCorrect(vec4 color) {
    #ifdef HDR
    color.rgb = pow(color.rgb, vec3(czm_gamma));
    #endif
    return color;
    }

    #line 0

    #line 0
    varying vec4 v_pickColor;
    #define FACE_FORWARD
    varying vec3 v_positionEC;
    varying vec3 v_normalEC;
    varying vec4 v_color;
    void main()
    {
    //相机坐标下,片元到相机的连线
    vec3 positionToEyeEC = -v_positionEC;
    //相机坐标下,法向量
    vec3 normalEC = normalize(v_normalEC);
    //如果开启了背面翻转属性
    #ifdef FACE_FORWARD
    normalEC = faceforward(normalEC, vec3(0.0, 0.0, 1.0), -normalEC);
    #endif
    //获取伽马矫正之后的颜色
    vec4 color = czm_gammaCorrect(v_color);
    //给输入材质结构体赋值
    czm_materialInput materialInput;
    materialInput.normalEC = normalEC;
    materialInput.positionToEyeEC = positionToEyeEC;
    czm_material material = czm_getDefaultMaterial(materialInput);
    material.diffuse = color.rgb;
    material.alpha = color.a;
    //在计算光照之后设置片元颜色
    gl_FragColor = czm_phong(normalize(positionToEyeEC), material, czm_lightDirectionEC);
    }
    ```

    展开全文
  • git clone https://github.com/cielito-lindo-productions/primitive.nextgen.git npm install npm start 保存图像 计算完图像后,您有2个选项可保存结果: 默认情况下,第一个被选中的是将生成的图像直接保存为...
  • 创建一个字符串的primitive表示
  • 嵌于柱阵列中的线性高分子的原始路径分析,侯吉旋,,我们利用蒙特卡洛算法模拟了嵌入柱阵列中的线性高分子链的弛豫过程。模拟结果涵盖了从单链区域到缠结区域的整个渡越区域。采用原
  • Cyrptographic primitive Cryptographic primitives are well-established, low-level cryptographic algorithms that are frequently used to build cryptographic protocols for computer security systems. These...
    • Cyrptographic primitive

      Cryptographic primitives are well-established, low-level cryptographic algorithms that are frequently used to build cryptographic protocols for computer security systems.

      These routines include, but are not limited to, one-way hash functions and encryption functions.

    • Commonly used primitives

      • one-way hash function, sometimes also called as one-way compression function-compute a reduced hash value for a message.
      • Symmetric key cryptography - compute a ciphertext decodable with the same key used to encode
      • Public-key cryptography - compute a ciphertext decodable with a different key used to encode.
      • Digital signatures - confirm the author of a mesage
      • Mix network - pool communications from many users to anonymize what came from whom
      • Private information retrieval - get database information without server knowing which item was requested
      • Commitment scheme - allows one to commit to a chosen value while keeping it hidden to others, with the ability to reveal it later.
    • References

    1. Cryptographic Primitive
    2. microsoft docs : cryptographic primitive
    3. What’s a cryptographic primitive, really?
    展开全文
  • Cesium 通过primitive 添加垂直图片资源

    千次阅读 2020-06-17 11:20:24
    这里简单比较一下primitive 和entity。 primitive 基于比较底层的webgl技术,进行渲染资源,所以对于很多自定义的效果支持比较好,灵活度比较高,带来的开销就是API复杂,参数多,单独相对大。 entity, 是对...

    实际Cesium 项目中添加了部分贴地的资源。资源类型有图片,gltf或者glb的模型。这里简单比较一下primitive 和entity。

    primitive 基于比较底层的webgl技术,进行渲染资源,所以对于很多自定义的效果支持比较好,灵活度比较高,带来的开销就是API复杂,参数多,单独相对大。

    entity, 是对primitive的封装,操作简单,一般的效果都能满足。

    本次项目中是为了通过坐标系,变换实体模型对象。目前知道的就是通过primitive加进去的模型,支持坐标变换。其他的应该也有,但是没接触到。

    先看一下效果

    其实有两种思路处理这个问题,一种是做一个glb的模型,另一外一种是通过图片作为材质创建primitive对象。实际验证的效果是通过glb模型创建添加的资源,可以实现坐标系的编辑,通过图片作为材质创建的primitive对象,无法完成坐标变换。调试发现是因为图片添加的primitive modelMatrix 为空。可能也和我操作有关,我亲自测试失败了。

    作为glb模型添加

    var targetPosition = Cesium.Cartesian3.fromDegrees(pos[0], pos[1], pos[2] + 0.5);
        var headingPitchRoll = new Cesium.HeadingPitchRoll(0, 0, 0);
        var modelMatrix = new Cesium.Matrix4();
        var modelEntity;
        Cesium.Transforms.headingPitchRollToFixedFrame(targetPosition, headingPitchRoll, Cesium.Ellipsoid.WGS84, Cesium.Transforms.eastNorthUpToFixedFrame, modelMatrix);
        window.setTimeout(function() {
            modelEntity = viewer.scene.primitives.add(Cesium.Model.fromGltf({
                id: src_manager._GenGuid("3d_geo_"),
                name: name,
                url: url,
                modelMatrix: modelMatrix,
                scale: 2,
                colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT
            }));
            modelEntity.readyPromise.then(function(modeltemp) {
            });
        }, 500);

    作为图片添加的primitive对象,参考链接https://zhuanlan.zhihu.com/p/41862338

    function addDevImg(pos, size, url) {
        var dimensions = new Cesium.Cartesian3(size, size, 1.0);
        var positionOnEllipsoid = Cesium.Cartesian3.fromDegrees(parseFloat(pos[0]), parseFloat(pos[1]));
        var translateMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(positionOnEllipsoid);
        var rotationYMatrix = Cesium.Matrix4.fromRotationTranslation(Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(120.0)));
        var scaleMatrix = Cesium.Matrix4.fromScale(dimensions);
    
        var planeYModelMatrix = new Cesium.Matrix4();
        Cesium.Matrix4.multiply(translateMatrix, rotationYMatrix, planeYModelMatrix);
        Cesium.Matrix4.multiply(planeYModelMatrix, scaleMatrix, planeYModelMatrix);
    
        createPlane(planeYModelMatrix, new Cesium.Color(0.0, 1.0, 0.0, 1.0));
    
        function createPlane(planeModelMatrix, color) {
            // 创建平面
            /*var planeGeometry = new Cesium.PlaneGeometry({
                vertexFormat : Cesium.PerInstanceColorAppearance.VERTEX_FORMAT,
            });*/
            var planeGeometry = new Cesium.PlaneGeometry();
    
            var planeGeometryInstance = new Cesium.GeometryInstance({
                geometry: planeGeometry,
                modelMatrix: planeModelMatrix,
            });
    
            var material = new Cesium.Material({
                fabric: {
                    type: "DiffuseMap",
                    uniforms: {
                        image: url,
                    },
                },
            });
            var model = viewer.scene.primitives.add(new Cesium.Primitive({
                geometryInstances: planeGeometryInstance,
                appearance: new Cesium.MaterialAppearance({
                    closed: false,
                    //translucent: false,
                    material: material
                })
            }));
        }
    }

     

    通过坐标系拾取模型对象进行坐标变换。

    function rotateTranslation(viewer) {
        //handler && handler.destroy();			
        var timeoutID = null;
        if (!window.roate_handler) {
            window.roate_handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        }
        //var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        var tooltip;
        window.roate_handler.setInputAction(function(movement) {
            tooltip = document.getElementById("toolTip");
            tooltip.innerHTML = '<p style="color:red;font-size:16px;">单击选择单体模型</p>';
            tooltip.style.display = "block";
            tooltip.style.left = movement.endPosition.x + 3 + "px";
            tooltip.style.top = movement.endPosition.y - 25 + "px";
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
        //鼠标左击
        window.roate_handler.setInputAction(function(movement) {
            if (timeoutID != null) {
                clearTimeout(timeoutID);
            }
            var picked = viewer.scene.pick(movement.position);
            if (Cesium.defined(picked)) {
                if (picked.primitive) {
                    var model = picked.primitive;
                    var scale = model.boundingSphere.radius;
                    timeoutID = window.setTimeout(function() {
                        if (window.axisModel) {
                            viewer.scene.primitives.remove(window.axisModel);
                        }
                        var axisModel = viewer.scene.primitives.add(Cesium.Model.fromGltf({
                            url: '../../Build/DECore/models/TransformGizmo_Tex12.gltf',
                            modelMatrix: model.modelMatrix,
                            scale: 2,
                            colorBlendMode: Cesium.ColorBlendMode.HIGHLIGHT
                        }));
                        if (axisModel) {
                            window.axisModel = axisModel;
                            tooltip.style.display = "none";
                            //旋转平移
                            rotateAndTranslation(viewer, model, axisModel);
                        }
                    }, 250);
                }
            }
            clearAxisHandler = function(e) {
                clearTimeout(timeoutID);
                window.roate_handler = window.roate_handler && window.roate_handler.destroy();
                // downHandler = downHandler && downHandler.destroy();
                if (window.axisModel) {
                    viewer.scene.primitives.remove(window.axisModel);
                }
                window.axisModel = undefined;
                tooltip.style.display = "none";
            };
        }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
        window.roate_handler.setInputAction(function(movement) {
            clearTimeout(timeoutID);
            window.roate_handler = window.roate_handler && window.roate_handler.destroy();
            // downHandler = downHandler && downHandler.destroy();
            if (window.axisModel) {
                viewer.scene.primitives.remove(window.axisModel);
            }
            window.axisModel = undefined;
            tooltip.style.display = "none";
    
        }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
    }
    
    function rotateAndTranslation(viewer, model, axisModel) {
        // 事件监控
        if (!window.roate_handler) {
            window.roate_handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
        }
        // 判断当前是否点击在坐标轴上进行拖动和旋转
        var isAxis = false;
    
        var zhou = undefined; // 当前拖拽的是哪个轴
    
        window.roate_handler.setInputAction(function(movement) {
    
            var cartesian = viewer.scene.pickPosition(movement.position);
            var pickedObject = viewer.scene.pick(movement.position);
            if (!Cesium.defined(pickedObject)) {
                return;
            }
            if (!Cesium.defined(pickedObject.mesh)) {
                return;
            }
            if (Cesium.defined(pickedObject)) {
                zhou = pickedObject.mesh.name;
                isAxis = true;
            }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
    
        window.roate_handler.setInputAction(function(movement) {
            var pickedObject = viewer.scene.pick(movement.endPosition);
            var startCartesian3 = viewer.scene.pickPosition(movement.startPosition);
            var endCartesian3 = viewer.scene.pickPosition(movement.endPosition);
            var m = model.modelMatrix;
            // 旋转和平移函数得到射线和面交点
            var axisTransForm = function(surface) {
    
                    var matrix = Cesium.Matrix4.inverseTransformation(m, new Cesium.Matrix4());
    
                    // 获取相机坐标
                    var camera1 = viewer.camera.position;
    
                    // 转 模型坐标
                    var camera = Cesium.Matrix4.multiplyByPoint(matrix, camera1, new Cesium.Cartesian3());
                    var startM = Cesium.Matrix4.multiplyByPoint(matrix, startCartesian3, new Cesium.Cartesian3());
                    var endM = Cesium.Matrix4.multiplyByPoint(matrix, endCartesian3, new Cesium.Cartesian3());
                    // 从相机看模型的方向
                    var startDirection = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(startM, camera, new Cesium.Cartesian3()), new Cesium.Cartesian3());
                    var endDirection = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(endM, camera, new Cesium.Cartesian3()), new Cesium.Cartesian3())
    
                    // 面
                    var plane = Cesium.Plane.fromPointNormal(Cesium.Cartesian3.ZERO, surface);
    
                    // 射线
                    var startRay = new Cesium.Ray(camera, startDirection);
                    var endRay = new Cesium.Ray(camera, endDirection);
    
                    // 射线和面交点
                    var start = Cesium.IntersectionTests.rayPlane(startRay, plane);
                    var end = Cesium.IntersectionTests.rayPlane(endRay, plane);
                    return { start: start, end: end };
                }
                // 平移函数
            var axisMove = function(surface, zeroAxis1, zeroAxis2) {
                var point = axisTransForm(surface);
                // 两点差值
                var sub = Cesium.Cartesian3.subtract(point.end, point.start, new Cesium.Cartesian3());
                sub[zeroAxis1] = 0;
                sub[zeroAxis2] = 0;
                //  var sub2 = Cesium.Matrix4.multiplyByPoint(m, sub, new Cesium.Cartesian3());
                var mm = Cesium.Matrix4.multiplyByTranslation(m, sub, new Cesium.Matrix4());
                model.modelMatrix = mm;
                // 将坐标轴模型移到和模型相同的位置
                axisModel.modelMatrix = model.modelMatrix;
            }
    
            // 旋转函数
            var axisRotate = function(surface, tant1, tant2) {
                var point = axisTransForm(surface);
                // 两点角度
                var tant = (point.start[tant1] * point.end[tant2] - point.start[tant2] * point.end[tant1]) / (point.start[tant1] * point.end[tant1] + point.start[tant2] * point.end[tant2]);
    
                var quat = Cesium.Quaternion.fromAxisAngle(surface, Math.atan(tant)); //quat为围绕这个surface轴旋转d度的四元数
                var rot_mat3 = Cesium.Matrix3.fromQuaternion(quat);
    
                var m2 = Cesium.Matrix4.multiplyByMatrix3(m, rot_mat3, new Cesium.Matrix4());
                // 移动模型
                model.modelMatrix = m2;
                // 将坐标轴模型移到和模型相同的位置
                axisModel.modelMatrix = model.modelMatrix;
            }
            if (isAxis && startCartesian3 && endCartesian3) {
    
                cameraControl(false); // 禁止球转动和拖动
                switch (zhou) {
                    case 'YArrow_1':
                        axisMove(Cesium.Cartesian3.UNIT_Z, 'y', 'z');
                        break;
                    case 'XArrow_1':
                        axisMove(Cesium.Cartesian3.UNIT_X, 'x', 'z');
                        break;
                    case 'ZArrow_1':
                        axisMove(Cesium.Cartesian3.UNIT_Y, 'x', 'y');
                        break;
                    case 'YAxis_1':
                        axisRotate(Cesium.Cartesian3.UNIT_X, 'y', 'z');
                        break;
                    case 'XAxis_1':
                        axisRotate(Cesium.Cartesian3.UNIT_Y, 'z', 'x');
                        break;
                    case 'ZAxis_1':
                        axisRotate(Cesium.Cartesian3.UNIT_Z, 'x', 'y');
                        break;
    
                }
    
            }
    
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    
        window.roate_handler.setInputAction(function(movement) {
            isAxis = false;
            cameraControl(true);
        }, Cesium.ScreenSpaceEventType.LEFT_UP);
    
    
        // 球转动事件
        var cameraControl = function(isCamera) {
            viewer.scene.screenSpaceCameraController.enableRotate = isCamera;
            viewer.scene.screenSpaceCameraController.enableTranslate = isCamera;
            viewer.scene.screenSpaceCameraController.enableZoom = isCamera;
            viewer.scene.screenSpaceCameraController.enableTilt = isCamera;
            viewer.scene.screenSpaceCameraController.enableLook = isCamera;
        }
    
    }

    最后结合一下,把图片贴在透明的glb模型上,按glb模型的方式统一加载,效果可以。贴一张效果图。

    展开全文
  • Primitive Specializations Generator (JPSG) 是一个模板处理器,其主要目标是生成专用于任何 Java 基元类型和对象(泛型)类型的代码,而 Java 没有基元上的泛型。 的源代码是用 JPSG 生成的。 JPSG 与支持其他 ...
  • Primitive API 创建图形对象的结构如下: + Primitive - GeometryInstance | GeometryInstance[] - Geometry - GeometryAttributes - GeometryAttribute - Appearance 坐标系统选择 如果使用 ENU 坐标,则需要计算...

    与调用官方各种参数化 API 不同,本例直接使用 Geometry 和 Appearance 类进行构造图形,灵活度较大。

    1 目的与结果

    有如下一个经纬高数组,表示三角形的三个点,逆时针顺序:

    const coords_geo = [
      [112.470, 25.694, 200000],
      [109.961, 19.862, 200000],
      [118.122, 21.921, 200000]
    ]
    

    其在GIS软件中绘制的形状如下:
    在这里插入图片描述
    最终在 Cesium 的绘制效果如下:
    在这里插入图片描述

    2 实现原理

    使用 Primitive 创建静态图形,不依赖官方封装好的 XXGeometry(最方便的应该是 PolygonGeometry)和 XXAppearance,只用最基础的 Geometry 类和 Appearance 类。
    Primitive API 创建图形对象的结构如下:

    + Primitive
        - GeometryInstance | GeometryInstance[]
            - Geometry
                - GeometryAttributes
                    - GeometryAttribute
        - Appearance
    

    坐标系统选择

    如果使用 ENU 坐标,则需要计算转换矩阵,官方已提供了例子。

    此处全为经纬高坐标,需要借助 Cesium 数学API 进行世界坐标转换。

    Primitive API 直到传递给 WebGL 之前,想要在地球上绘制正确,必须是世界坐标。

    3 踩坑点

    3.1 GeometryAttribute 的构造

    3.1.1 position 的构造 - 数值类型

    使用 Cesium.ComponentDatatype.DOUBLE,values 必须传递 Float64Array,否则顶点着色器中匹配不到 attribute vec3 position3DHigh 和 attribute vec3 position3DLow。

    若改为 Cesium.ComponentDatatype.FLOAT,values 传递 Float32Array,会导致异常。

    暂不清楚传递 Float32Array 时,顶点着色器的坐标 attribute 应该改成什么(或许根本不应传递 Float32Array)

    3.1.2 顶点着色器中 attribute 变量的名称

    参考 GeometryAttributes 的文档,允许的 attribute 有如下几个:

    • 坐标 position,需为 Float64 的数值,且每个点必须是 xyz 三个维度的
    • 纹理坐标 st,需为 Float32 的数值,且必须是 xy 两个维度的
    • 顶点颜色 color,需为 Uint8 的数值,且必须是 xyzw 四个维度的
    • 顶点法线 normal,需为 Float32 的数值,且必须是 xyz 三个维度的
    • (不知道是什么,应该是切线之类的)bitangent,需为 Float32 的数值,且必须是 xyz 三个维度的
    • 顶点切线向量tangent,需为 Float32 的数值,且必须是 xyz 三个维度的

    在 Primitive.prototype.update 方法运行时,有一个 if (createSP) 分支会调用 createShaderProgram 函数,其内会调用函数 validateShaderMatching 来检测着色器与 js 对象中 GeometryAttribute 的匹配情况。

    顶点着色器中的 attribute 变量名,理应与 attributes 中的 key 一样,除了 position 被分解成了 position3DHigh 和 position3DLow(原因大家应该都知道,就是精度不够,需要分别编码)。

    3.1.3 顶点着色器必须有 batchId attribute

    否则会报错。
    在这里插入图片描述

    3.2 仅 3D 模式

    若 new Viewer 时不指定 scene3DOnly,Primitive 的着色器要处理二三维的全部情况,这里只关心三维的情况,故要指定仅使用三维模式。

    new Cesium.Viewer('cesiumViewport', {
      scene3DOnly: true,
    })
    

    若不指定仅三维模式,且不计算范围球(见3.4),必报错。

    3.3 Appearance 的 renderState

    一个对象,这个 renderState 对象的属性会在渲染时覆盖默认的 renderState。

    • depthMask:是否将深度值写入缓冲区
    • blending:透明度混合
    • depthTest: enabled 深度检测

    具体更多细节见 Renderer/RenderState.js

    这里必须指明的是,即使什么 renderState 都不给,也要在 new Appearance 时给 renderState 一个空对象:

    new Cesium.Appearance({
      renderState: { },
      vertexShaderSource: `...`,
      fragmentShaderSource: `...`
    })
    

    否则会报错:
    在这里插入图片描述

    3.4 Geometry 的 boundingSphere

    若不指定,图形就不会出现。

    Cesium.BoundingSphere.fromVertices(coords_world)
    

    coords_world 是世界坐标数组,[x1, y1, z1, x2, y2, z2, …]

    若不计算包围球且不指定仅三维模式(见3.2),程序将报错:

    在这里插入图片描述

    3.5 Primitive 的异步计算

    new Primitive 时,有一个 asynchronous 选项用于指定异步计算生成图形,要自己写 WebWorker,在这里因为没有写 WebWorker,所以将其指定为 false 进行同步计算。

    若不写 WebWorker 也不指定其为 false,将报错:
    在这里插入图片描述

    const primitive = new Cesium.Primitive({
        /* 其他属性 */
      asynchronous: false
    })
    

    4 代码

    <div id="cesiumViewport"></div>
    
    const vsSource = `
    attribute vec3 position3DHigh;
    attribute vec3 position3DLow;
    attribute vec4 color;
    varying vec4 v_color;
    
    void main() {
      vec4 position = czm_modelViewProjectionRelativeToEye * czm_computePosition();
      float r = color.r / 255.0;
      float g = color.g / 255.0;
      float b = color.b / 255.0;
      float a = color.a / 255.0;
    
      v_color = vec4(r, g, b, a);
      gl_Position = position;
    }`
    const fsSource = `
    varying vec4 v_color;
    
    void main() { 
      gl_FragColor = v_color;
    }`
    
    const viewer = new Cesium.Viewer('cesiumViewport', {
      scene3DOnly: true,
    })
    
    /* 计算顶点坐标 */
    const coords = [
      [112.470, 25.694, 200000],
      [109.961, 19.862, 200000],
      [118.122, 21.921, 200000]
    ]
    const coords_world = coords.map((coord) => {
      const cart = Cesium.Cartesian3.fromDegrees(...coord)
      return [cart.x, cart.y, cart.z]
    })
    const coords_vbo = new Float64Array(coords_world.flat())
    /* 结束计算顶点坐标 */
    
    /* 装配并创建 Primitive */
    const geometry = new Cesium.Geometry({
      attributes: {
        position: new Cesium.GeometryAttribute({
          componentDatatype: Cesium.ComponentDatatype.DOUBLE,
          componentsPerAttribute: 3,
          values: coords_vbo
        }),
        color: new Cesium.GeometryAttribute({
          componentDatatype: Cesium.ComponentDatatype.UNSIGNED_BYTE,
          componentsPerAttribute: 4,
          values: new Uint8Array([
            255, 10, 10, 123,
            10, 255, 10, 123,
            10, 10, 255, 123
          ])
        })
      },
      boundingSphere: Cesium.BoundingSphere.fromVertices(coords_world.flat())
    })
    const instance = new Cesium.GeometryInstance({
      geometry: geometry,
      id: 'aaa'
    })
    /* 使用着色器代码及专属于此 primitive 的渲染状态创建自定义外观 */
    const customAppearance = new Cesium.Appearance({
      renderState: {
        depthMask: true,
        blending: Cesium.BlendingState.PRE_MULTIPLIED_ALPHA_BLEND,
        depthTest: {
          enabled: true
        }
      },
      vertexShaderSource: vsSource,
      fragmentShaderSource: fsSource
    })
    const primitive = new Cesium.Primitive({
      geometryInstances: [instance],
      releaseGeometryInstances: false,
      compressVertices: false,
      appearance: customAppearance,
      asynchronous: false
    })
    /* 装配结束 */
    
    viewer.scene.primitives.add(primitive)
    
    /* 定位 */
    viewer.camera.setView({
      destination: new Cesium.Cartesian3(-5079092, 11300083, 4872035),
      orientation: {
        heading: 6.28,
        pitch: -1.57,
        roll: 0
      }
    })
    
    /* 点击拾取 */
    const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
    handler.setInputAction((e) => {
      const result = viewer.scene.pick(e.position)
      console.log(result)
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
    
    展开全文
  • 基本数据类型 Primitive Data Types Java语言是静态类型(statically-typed)的,这意味着所有variables必须先被declared,然后才能被使用。正如你已经看到的,这涉及到variable的类型和名称: int gear = 1; 这样做...
  • Primitive Entity czml文件 GeoJson文件等 如果要显示大量的点呢?比如几千个,几万个,甚至是几十万,上百万个?那么什么场景要用到显示这么多点呢? 在航天领域,就是地球空间的所有在轨物体了,包括火箭残骸、...
  • [cesium] entity 和primitive 绘制对象

    千次阅读 2019-07-13 20:08:03
    Entity 和primitive 对比 entity偏向图形,primitive偏向数据.primitive更底层 entity用法简单,primitive用法复杂。我们会有这样的疑问:entity已经封装的如此完美,调用如此便捷,为何还要primitive接口呢?区别...
  • 欢迎来到 Red Canary 的 Exploit Primitive 平台! 该项目通过为故意脆弱的服务提供易于使用的漏洞利用原语(例如,越界限制,任意写入和任意读取漏洞),帮助研究人员,重新部署人员和防御者更好地了解Linux的利用...
  • 一种点云物体基本形状提取框架PRAQ,宁小娟,李璠,形状分析属于计算机视觉和数字几何处理交叉学科,具有前沿性应了至关重要的作用。本文提出了一种分析实现点云物体的基本形状(包
  • 就好像 Integer、String 是所有编程语言的Primitive一样,在 DDD 里, DP 可以说是一切模型、方法、架构的基础,而就像 Integer、String 一样, DP 又是无所不在的。所以,第一讲会对 DP 做一个全面的介绍和分析,但...
  • React Wizard Primitive处理状态管理,然后您带上UI。 利用渲染道具或挂钩API摆脱​​繁琐的样板。 您可以使用此库来构建其他抽象,使其更适合您的特定需求。 快速开始 安装react-wizard-primitive npm i react-...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 65,157
精华内容 26,062
关键字:

primitive