devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Arcgis 进阶篇（3）——Arcgis js api的externalRenderers用法1_arcgis renderer

作者：黑客灵魂 | 2024-07-21 17:08:21

赞

踩

arcgis renderer

arcgis js api的externalRenderers可以直接使用webgl的shader，这样就使得你可以按照自己想法做各种效果。但前提是：熟悉webgl。

1、externalRenderers简单使用

先看一下externalRenderers的介绍：

externalRenderers | API Reference | ArcGIS API for JavaScript 4.24 | ArcGIS DevelopersDocumentation site for ArcGIS API for JavaScript on ArcGIS Developers.https://developers.arcgis.com/javascript/latest/api-reference/esri-views-3d-externalRenderers.html这里的例子不是很清晰，以下是个简单的例子（在arcgis三维场景上画一个三角形）：

  1. <template>
  2.   <div id="main-view"></div>
  3. </template>
  4.  
  5. <script>
  6. import SceneView from '@arcgis/core/views/SceneView'
  7. import Map from '@arcgis/core/Map'
  8. import esriConfig from "@arcgis/core/config";
  9. import * as externalRenderers from "@arcgis/core/views/3d/externalRenderers";
  10. import {initWebgl2Shaders} from '../utils/initWebgl2Shaders'
  11. import Matrix4 from '@math.gl/core/dist/es5/classes/matrix4'
  12. let viewer = null
  13. let map = null
  14. export default {
  15.     mounted() {
  16.         this.initConfig()
  17.         this.init()
  18.         this.initRender()
  19.     },
  20.     methods:{
  21.         // 初始设置
  22.         initConfig(){
  23.             esriConfig.assetsPath = "./assets";
  24.         },
  25.         init(){
  26.             map = new Map({
  27.                 basemap: 'hybrid',
  28.                 ground: "world-elevation"
  29.             })
  30.              viewer = new SceneView({
  31.                 map,
  32.                 container: 'main-view'
  33.              })
  34.              viewer.ui.empty('bottom-trailing')
  35.              viewer.ui.empty('manual')
  36.         },
  37.         initRender(){
  38.             let myExternalRenderer = {
  39.                 vbo: null,
  40.                 shaderProgram: null,
  41.                 a_Position: null,
  42.                 setup: function(context) {
  43.                     let gl = context.gl;
  44.  
  45.                     // 初始化shader
  46.                     var VSHADER=`#version 300 es
  47.                     layout (location=0) in vec4 a_Position;       
  48.                     void main(){
  49.                         gl_Position=a_Position;
  50.                     }
  51.                     `;
  52.                     var FSHADER=`#version 300 es
  53.                     precision mediump float;
  54.                     out vec4 fragColor;
  55.                     void main(){
  56.                         fragColor=vec4(1.0,0.0,0.0,1.0);
  57.                     }
  58.                     `;
  59.                     this.shaderProgram=initWebgl2Shaders(gl, VSHADER, FSHADER)
  60.                     if(!this.shaderProgram){
  61.                         console.assert("初始化shader错误")
  62.                     }
  63.                     this.a_Position= gl.getAttribLocation(this.shaderProgram, 'a_Position')
  64.                     gl.enableVertexAttribArray(this.a_Position) //连接变量a_Position和缓冲区对象
  65.  
  66.  
  67.                     // 初始化bufferdata
  68.                     this.vbo = context.gl.createBuffer();
  69.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  70.                     let positions = new Float32Array([0, 0, 0,   1, 0, 0,   0, 1, 0]);
  71.                     context.gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  72.                 },
  73.                 render: function(context) {
  74.                     let gl = context.gl
  75.  
  76.                     gl.enable(gl.DEPTH_TEST); // 开启深度检测
  77.                     // gl.disable(gl.CULL_FACE);
  78.                     // gl.disable(gl.BLEND);
  79.  
  80.                     gl.useProgram(this.shaderProgram);
  81.  
  82.                     // 创建数据
  83.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  84.                     gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
  85.  
  86.                     context.gl.drawArrays(gl.TRIANGLES, 0, 3);
  87.  
  88.                     console.log(1) // 每帧检测
  89.                 }
  90.             }
  91.             externalRenderers.add(viewer, myExternalRenderer);
  92.         },
  93. }
  94. }
  95. </script>
  96.  
  97. <style>
  98. #main-view{
  99.     width: 1000px;
  100.     height: 800px;
  101. }
  102. </style>

 其中initWebgl2Shaders的方法

  1. function checkShaderCompilation(gl, shader) {
  2.   var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
  3.   // console.log("Shader compiled successfully: " + compiled);
  4.   var compilationLog = gl.getShaderInfoLog(shader);
  5.   // console.log("Shader compiler log: " + compilationLog);
  6. }
  7.  
  8. export function initWebgl2Shaders(gl, vertCode, fragCode) {
  9.   // Create a vertex shader object
  10.   var vertShader = gl.createShader(gl.VERTEX_SHADER);
  11.  
  12.   // Attach vertex shader source code
  13.   gl.shaderSource(vertShader, vertCode);
  14.  
  15.   // Compile the vertex shader
  16.   gl.compileShader(vertShader);
  17.  
  18.   checkShaderCompilation(gl, vertShader);
  19.  
  20.   // Create fragment shader object
  21.   var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
  22.  
  23.   // Attach fragment shader source code
  24.   gl.shaderSource(fragShader, fragCode);
  25.  
  26.   // Compile the fragment shader
  27.   gl.compileShader(fragShader);
  28.  
  29.   checkShaderCompilation(gl, fragShader);
  30.  
  31.   // Create a shader program object to store
  32.   // the combined shader program
  33.   var shaderProgram = gl.createProgram();
  34.  
  35.   // Attach a vertex shader
  36.   gl.attachShader(shaderProgram, vertShader);
  37.  
  38.   // Attach a fragment shader
  39.   gl.attachShader(shaderProgram, fragShader);
  40.  
  41.   // Link both the programs
  42.   gl.linkProgram(shaderProgram);
  43.  
  44.   // Use the combined shader program object
  45.   gl.useProgram(shaderProgram);
  46.  
  47.   return shaderProgram;
  48. }

最终效果：

 2、添加矩阵

两步：

1、在shader里添加矩阵

2、引用@math.gl/core，api见下面的链接

math.gl | Overview

例子（将上面的initshader改为initshader2）：

  1.         initRender2() {
  2.             let myExternalRenderer = {
  3.                 vbo: null,
  4.                 shaderProgram: null,
  5.                 a_Position: null,
  6.                 setup: function(context) {
  7.                     let gl = context.gl;
  8.  
  9.                     // 初始化shader
  10.                     var VSHADER=`#version 300 es
  11.                     layout (location=0) in vec4 a_Position;
  12.                     uniform mat4 u_formMatrix;      
  13.                     void main(){
  14.                         gl_Position= u_formMatrix*a_Position;
  15.                     }
  16.                     `;
  17.                     var FSHADER=`#version 300 es
  18.                     precision mediump float;
  19.                     out vec4 fragColor;
  20.                     void main(){
  21.                         fragColor=vec4(1.0,0.0,0.0,1.0);
  22.                     }
  23.                     `;
  24.                     this.shaderProgram=initWebgl2Shaders(gl, VSHADER, FSHADER)
  25.                     if(!this.shaderProgram){
  26.                         console.assert("初始化shader错误")
  27.                     }
  28.                     this.a_Position= gl.getAttribLocation(this.shaderProgram, 'a_Position')
  29.                     gl.enableVertexAttribArray(this.a_Position) //连接变量a_Position和缓冲区对象
  30.  
  31.  
  32.                     // 初始化bufferdata
  33.                     this.vbo = context.gl.createBuffer();
  34.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  35.                     let positions = new Float32Array([0, 0, 0,   1, 0, 0,   0, 1, 0]);
  36.                     context.gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  37.                 },
  38.                 render: function(context) {
  39.                     let gl = context.gl
  40.  
  41.                     gl.enable(gl.DEPTH_TEST); // 开启深度检测
  42.                     // gl.disable(gl.CULL_FACE);
  43.                     // gl.disable(gl.BLEND);
  44.  
  45.                     gl.useProgram(this.shaderProgram);
  46.  
  47.                     // 创建数据
  48.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  49.                     gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
  50.  
  51.                     //旋转矩阵
  52.                     let u_formMatrix=gl.getUniformLocation(this.shaderProgram, 'u_formMatrix')
  53.                     let formMatrix=new Matrix4().translate([-1.0, -1.0, 0])
  54.                     gl.uniformMatrix4fv(u_formMatrix, false, formMatrix.elements)
  55.  
  56.                     context.gl.drawArrays(gl.TRIANGLES, 0, 3);
  57.  
  58.                     console.log(1) // 每帧检测
  59.                 }
  60.             }
  61.             externalRenderers.add(viewer, myExternalRenderer);
  62.         },

最终效果：

 3、提取出颜色

提取出颜色的步骤：

1、在shader中提取出颜色

2、给颜色赋值

例子3（将例1的initshader改为initshader3）：

  1. initRender3() {
  2.             let myExternalRenderer = {
  3.                 vbo: null,
  4.                 shaderProgram: null,
  5.                 a_Position: null,
  6.                 a_color: null,
  7.                 colorBuffer: null,
  8.                 setup: function(context) {
  9.                     let gl = context.gl;
  10.  
  11.                     // 初始化shader
  12.                     var VSHADER=`#version 300 es
  13.                     layout (location=0) in vec4 a_Position;
  14.                     layout (location=1) in vec4 a_color;
  15.                     out vec4 v_color;
  16.                     uniform mat4 u_formMatrix;      
  17.                     void main(){
  18.                         gl_Position= u_formMatrix*a_Position;
  19.                         v_color=a_color;
  20.                     }
  21.                     `;
  22.                     var FSHADER=`#version 300 es
  23.                     precision mediump float;
  24.                     in vec4 v_color;
  25.                     out vec4 fragColor;
  26.                     void main(){
  27.                         fragColor=v_color;
  28.                     }
  29.                     `;
  30.                     this.shaderProgram=initWebgl2Shaders(gl, VSHADER, FSHADER)
  31.                     if(!this.shaderProgram){
  32.                         console.assert("初始化shader错误")
  33.                     }
  34.                     this.a_Position= gl.getAttribLocation(this.shaderProgram, 'a_Position')
  35.                     gl.enableVertexAttribArray(this.a_Position) //连接变量a_Position和缓冲区对象
  36.                     this.a_color= gl.getAttribLocation(this.shaderProgram, 'a_color')
  37.                     gl.enableVertexAttribArray(this.a_color) //连接变量a_color和缓冲区对象                    
  38.  
  39.                     // 初始化顶点的bufferdata
  40.                     this.vbo = context.gl.createBuffer();
  41.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  42.                     let positions = new Float32Array([0, 0, 0,   1, 0, 0,   0, 1, 0]);
  43.                     context.gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  44.  
  45.                     // 给顶点的各个点赋予颜色                    
  46.                     this.colorBuffer=gl.createBuffer()  //创建缓冲区对象
  47.                     gl.bindBuffer(gl.ARRAY_BUFFER,this.colorBuffer)  //将缓冲区对象绑定到目标
  48.                     let colors=new Float32Array([1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0])
  49.                     gl.bufferData(gl.ARRAY_BUFFER,colors,gl.STATIC_DRAW) //向缓冲区对象写入数据
  50.                 },
  51.                 render: function(context) {
  52.                     let gl = context.gl
  53.  
  54.                     gl.enable(gl.DEPTH_TEST); // 开启深度检测
  55.                     // gl.disable(gl.CULL_FACE);
  56.                     // gl.disable(gl.BLEND);
  57.  
  58.                     gl.useProgram(this.shaderProgram);
  59.  
  60.                     // 创建数据
  61.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  62.                     gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
  63.                     gl.bindBuffer(gl.ARRAY_BUFFER,this.colorBuffer)  //将缓冲区对象绑定到目标
  64.                     gl.vertexAttribPointer(this.a_color,3,gl.FLOAT,false,0,0) //将缓冲区对象分配给a_color
  65.  
  66.                     //旋转矩阵
  67.                     let u_formMatrix=gl.getUniformLocation(this.shaderProgram, 'u_formMatrix')
  68.                     let formMatrix=new Matrix4().translate([-1.0, -1.0, 0])
  69.                     gl.uniformMatrix4fv(u_formMatrix, false, formMatrix.elements)
  70.  
  71.                     context.gl.drawArrays(gl.TRIANGLES, 0, 3);
  72.  
  73.                     console.log(1) // 每帧检测
  74.                 }
  75.             }
  76.             externalRenderers.add(viewer, myExternalRenderer);
  77.         },

最终效果：

4、添加动态效果

添加动态效果，通常最好的办法就是修改矩阵。

在例3的基础上，修改一下矩阵，注意动态效果需要在render里添加externalRenderers.requestRender(viewer);用来场景变化时，仍然调用该render。

例子4（（将例1的initshader改为initshader4）

  1. initRender4() {
  2.             let myExternalRenderer = {
  3.                 vbo: null,
  4.                 shaderProgram: null,
  5.                 a_Position: null,
  6.                 a_color: null,
  7.                 colorBuffer: null,
  8.                 i: 0,
  9.                 setup: function(context) {
  10.                     let gl = context.gl;
  11.  
  12.                     // 初始化shader
  13.                     var VSHADER=`#version 300 es
  14.                     layout (location=0) in vec4 a_Position;
  15.                     layout (location=1) in vec4 a_color;
  16.                     out vec4 v_color;
  17.                     uniform mat4 u_formMatrix;      
  18.                     void main(){
  19.                         gl_Position= u_formMatrix*a_Position;
  20.                         v_color=a_color;
  21.                     }
  22.                     `;
  23.                     var FSHADER=`#version 300 es
  24.                     precision mediump float;
  25.                     in vec4 v_color;
  26.                     out vec4 fragColor;
  27.                     void main(){
  28.                         fragColor=v_color;
  29.                     }
  30.                     `;
  31.                     this.shaderProgram=initWebgl2Shaders(gl, VSHADER, FSHADER)
  32.                     if(!this.shaderProgram){
  33.                         console.assert("初始化shader错误")
  34.                     }
  35.                     this.a_Position= gl.getAttribLocation(this.shaderProgram, 'a_Position')
  36.                     gl.enableVertexAttribArray(this.a_Position) //连接变量a_Position和缓冲区对象
  37.                     this.a_color= gl.getAttribLocation(this.shaderProgram, 'a_color')
  38.                     gl.enableVertexAttribArray(this.a_color) //连接变量a_color和缓冲区对象                    
  39.  
  40.                     // 初始化顶点的bufferdata
  41.                     this.vbo = context.gl.createBuffer();
  42.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  43.                     let positions = new Float32Array([0, 0, 0,   1, 0, 0,   0, 1, 0]);
  44.                     context.gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  45.  
  46.                     // 给顶点的各个点赋予颜色                    
  47.                     this.colorBuffer=gl.createBuffer()  //创建缓冲区对象
  48.                     gl.bindBuffer(gl.ARRAY_BUFFER,this.colorBuffer)  //将缓冲区对象绑定到目标
  49.                     let colors=new Float32Array([1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0])
  50.                     gl.bufferData(gl.ARRAY_BUFFER,colors,gl.STATIC_DRAW) //向缓冲区对象写入数据
  51.                 },
  52.                 render: function(context) {
  53.                     let gl = context.gl
  54.                     this.i += 1
  55.                     gl.enable(gl.DEPTH_TEST); // 开启深度检测
  56.                     // gl.disable(gl.CULL_FACE);
  57.                     // gl.disable(gl.BLEND);
  58.                     gl.useProgram(this.shaderProgram);
  59.  
  60.                     // 创建数据
  61.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  62.                     gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
  63.                     gl.bindBuffer(gl.ARRAY_BUFFER,this.colorBuffer)  //将缓冲区对象绑定到目标
  64.                     gl.vertexAttribPointer(this.a_color,3,gl.FLOAT,false,0,0) //将缓冲区对象分配给a_color
  65.  
  66.                     //旋转矩阵
  67.                     let u_formMatrix=gl.getUniformLocation(this.shaderProgram, 'u_formMatrix')
  68.                     let formMatrix=new Matrix4()
  69.                     formMatrix.rotateY(Math.PI/180 * this.i)
  70.                     gl.uniformMatrix4fv(u_formMatrix, false, formMatrix.elements)
  71.  
  72.                     context.gl.drawArrays(gl.TRIANGLES, 0, 3);
  73.  
  74.                     console.log(1) // 每帧检测
  75.                     externalRenderers.requestRender(viewer);
  76.                 }
  77.             }
  78.             externalRenderers.add(viewer, myExternalRenderer);
  79.         },

最终效果：

5、关联相机

根据webgl的三维矩阵方程：

gl_position=ProjectionMatrix*ViewMatrix*ModelMatrix*position

可以在render里使用相机的ProjectionMatrix和ViewMatrix。（根据地球的大小，可以将三角形长宽设置在10000000m）

  1. initRender5() {
  2.             let myExternalRenderer = {
  3.                 vbo: null,
  4.                 shaderProgram: null,
  5.                 a_Position: null,
  6.                 a_color: null,
  7.                 colorBuffer: null,
  8.                 i: 0,
  9.                 setup: function(context) {
  10.                     let gl = context.gl;
  11.  
  12.                     // 初始化shader
  13.                     var VSHADER=`#version 300 es
  14.                     layout (location=0) in vec3 a_Position;
  15.                     layout (location=1) in vec4 a_color;
  16.                     out vec4 v_color;
  17.                     uniform mat4 u_projectionMatrix;
  18.                     uniform mat4 u_viewMatrix;
  19.                     uniform mat4 u_formMatrix;      
  20.                     void main(){
  21.                         gl_Position= u_projectionMatrix*u_viewMatrix*u_formMatrix*vec4(a_Position,1.0);
  22.                         v_color=a_color;
  23.                     }
  24.                     `;
  25.                     var FSHADER=`#version 300 es
  26.                     precision mediump float;
  27.                     in vec4 v_color;
  28.                     out vec4 fragColor;
  29.                     void main(){
  30.                         fragColor=v_color;
  31.                     }
  32.                     `;
  33.                     this.shaderProgram=initWebgl2Shaders(gl, VSHADER, FSHADER)
  34.                     if(!this.shaderProgram){
  35.                         console.assert("初始化shader错误")
  36.                     }
  37.                     this.a_Position= gl.getAttribLocation(this.shaderProgram, 'a_Position')
  38.                     gl.enableVertexAttribArray(this.a_Position) //连接变量a_Position和缓冲区对象
  39.                     this.a_color= gl.getAttribLocation(this.shaderProgram, 'a_color')
  40.                     gl.enableVertexAttribArray(this.a_color) //连接变量a_color和缓冲区对象                    
  41.  
  42.                     // 初始化顶点的bufferdata
  43.                     this.vbo = context.gl.createBuffer();
  44.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  45.                     let positions = new Float32Array([0, 0, 0,   10000000, 0, 0,   0, 10000000, 0]);
  46.                     context.gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
  47.  
  48.                     // 给顶点的各个点赋予颜色                    
  49.                     this.colorBuffer=gl.createBuffer()  //创建缓冲区对象
  50.                     gl.bindBuffer(gl.ARRAY_BUFFER,this.colorBuffer)  //将缓冲区对象绑定到目标
  51.                     let colors=new Float32Array([1.0,0.0,0.0,0.0,1.0,0.0,0.0,0.0,1.0])
  52.                     gl.bufferData(gl.ARRAY_BUFFER,colors,gl.STATIC_DRAW) //向缓冲区对象写入数据
  53.                 },
  54.                 render: function(context) {
  55.                     let gl = context.gl
  56.                     this.i += 1
  57.                     gl.enable(gl.DEPTH_TEST); // 开启深度检测
  58.                     // gl.disable(gl.CULL_FACE);
  59.                     // gl.disable(gl.BLEND);
  60.                     gl.useProgram(this.shaderProgram);
  61.  
  62.                     // 创建数据
  63.                     context.gl.bindBuffer(gl.ARRAY_BUFFER, this.vbo);
  64.                     gl.vertexAttribPointer(this.a_Position,3,gl.FLOAT,false,0,0) //将缓冲区对象分配给a_Posiotion
  65.                     gl.bindBuffer(gl.ARRAY_BUFFER,this.colorBuffer)  //将缓冲区对象绑定到目标
  66.                     gl.vertexAttribPointer(this.a_color,3,gl.FLOAT,false,0,0) //将缓冲区对象分配给a_color
  67.  
  68.                     // project 矩阵
  69.                     let programUniformProjectionMatrix = gl.getUniformLocation(
  70.                         this.shaderProgram,
  71.                         "u_projectionMatrix"
  72.                     );
  73.                     
  74.                     console.log(context.camera)
  75.                     gl.uniformMatrix4fv(
  76.                         programUniformProjectionMatrix,
  77.                         false,
  78.                         context.camera.projectionMatrix
  79.                     );
  80.                     // view 矩阵
  81.                     let programUniformViewMatrix = gl.getUniformLocation(
  82.                         this.shaderProgram,
  83.                         "u_viewMatrix"
  84.                     );
  85.                     gl.uniformMatrix4fv(
  86.                         programUniformViewMatrix,
  87.                         false,
  88.                         context.camera.viewMatrix
  89.                     );
  90.                     //旋转矩阵
  91.                     let u_formMatrix=gl.getUniformLocation(this.shaderProgram, 'u_formMatrix')
  92.                     let formMatrix=new Matrix4()
  93.                     formMatrix.rotateY(Math.PI/180*this.i) 
  94.                     gl.uniformMatrix4fv(u_formMatrix, false, formMatrix.elements)
  95.  
  96.                     context.gl.drawArrays(gl.TRIANGLES, 0, 3);
  97.  
  98.                     console.log(this.i) // 每帧检测
  99.                     externalRenderers.requestRender(viewer);
  100.                 }
  101.             }
  102.             externalRenderers.add(viewer, myExternalRenderer);
  103.         },

最终效果：

 

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号