首页 > 其他分享 >Arcgis 与 Pixi.js 可视化 glsl 特效篇(十七)

Arcgis 与 Pixi.js 可视化 glsl 特效篇(十七)

时间:2023-09-21 10:48:35浏览次数:50  
标签:glsl rand float js Arcgis vec2 let 100

这次我们用pixi.js和arcgis js结合

我们先定义一下 传入数据结构 symbol 暂时不做

  • let option = {
  • renderer: {
  • type: "simple",
  • symbol: {
  • }
  • },
  • data: [
  • {
  • geometry: [12956152.73135875, 4855356.473704897],
  • attributes: {
  • name: "北京"
  • }
  • },
  • {
  • geometry: [12697872.012783196, 2577456.5937789795],
  • attributes: {
  • name: "深圳"
  • }
  • }
  • ]
  • };

 

对于data 数据 ,
toScreen 方法参考链接提示
app 的构建参考 链接提示

  • let data = this.options.data;
  • for(let item of data){
  • //转换屏幕坐标,获取颜色,半径和线条粗细样式
  • let geo = item.geometry
  • let XY1 = toScreen(geo);
  • const geometry = new PIXI.Geometry()
  • .addAttribute("position", [100, 100, -100, 100, -100, -100, 100, -100, 200, 200], 2)
  • .addAttribute('uv', // the attribute name
  • [0, 0, // u, v
  • 1, 0, // u, v
  • 1, 1,
  • 0, 1], // u, v
  • 2)
  • .addIndex([0, 1, 2, 0, 2, 3]);
  • const fragmentShader = `
  • precision highp float;
  • uniform float iTime;
  • uniform vec2 iResolution;
  • varying vec2 vUv;
  • // Rand value between 0 and 1
  • float rand(vec2 p) {
  • return fract(sin(dot(p, vec2(12.543,514.123)))*4732.12);
  • }
  • // Value noise
  • float noise(vec2 p) {
  • vec2 f = smoothstep(0.0, 1.0, fract(p));
  • vec2 i = floor(p);
  • float a = rand(i);
  • float b = rand(i+vec2(1.0,0.0));
  • float c = rand(i+vec2(0.0,1.0));
  • float d = rand(i+vec2(1.0,1.0));
  • return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);
  • }
  • // Fractal noise
  • float fbm(vec2 p) {
  • float a = 0.5;
  • float r = 0.0;
  • for (int i = 0; i < 8; i++) {
  • r += a*noise(p);
  • a *= 0.5;
  • p *= 2.0;
  • }
  • return r;
  • }
  • Arcgis 与 Pixi.js 可视化 glsl 特效篇(十七) - 小专栏

 

发布于 2023-06-16 13:52・IP 属地广东

标签:glsl,rand,float,js,Arcgis,vec2,let,100
From: https://www.cnblogs.com/haibalai/p/17719302.html

相关文章

  • Arcgis 与 Pixi.js 可视化 glsl 特效篇(十六)
    这次我们用pixi.js和arcgisjs结合我们先定义一下传入数据结构symbol暂时不做let option={renderer:{type:"simple",symbol:{}},data:[{geometry:[12956152.73135875,4855356.473704897],attributes:{name:"北京"}},{geometry:[12697872.01278319......
  • Arcgis 与 Pixi.js 可视化 glsl 特效篇(十五)
    这次我们用pixi.js和arcgisjs结合我们先定义一下传入数据结构symbol暂时不做let option={renderer:{type:"simple",symbol:{}},data:[{geometry:[12956152.73135875,4855356.473704897],attributes:{name:"北京"}},{geometry:[12697872.01278319......
  • Arcgis 与 Pixi.js 可视化 glsl 特效篇(二十)
    这次我们用pixi.js和arcgisjs结合我们先定义一下传入数据结构symbol暂时不做let option={renderer:{type:"simple",symbol:{}},data:[{geometry:[12956152.73135875,4855356.473704897],attributes:{name:"北京"}},{geometry:[12697872.01278319......
  • Arcgis 与 Pixi.js 可视化 glsl 特效篇(十九)
    这次我们用pixi.js和arcgisjs结合我们先定义一下传入数据结构symbol暂时不做let option={renderer:{type:"simple",symbol:{}},data:[{geometry:[12956152.73135875,4855356.473704897],attributes:{name:"北京"}},{geometry:[12697872.01278319......
  • 【漏洞复现】深信服 SG上网优化管理系统 catjs.php 任意文件读取漏洞
    1、简介2、漏洞描述深信服SG上网优化管理系统catjs.php存在任意文件读取漏洞,攻击者通过漏洞可以获取服务器上的敏感文件3、受影响版本深信服SG上网优化管理系统4、FOFA语句title==“SANGFOR上网优化管理”5、漏洞复现POCPOST/php/catjs.phpHTTP/1.1Host:User-A......
  • c++ 简单模拟js Promise
    main:#include<stdio.h>#include"common.h"#include"promise.h"#include<chrono>//std::chrono::seconds#include<thread>//std::this_thread::sleep_forintmain(void){Promise*pro=newPromise([](ca......
  • [880] Calculate Field in ArcGIS Pro (with python code)
    Firstly,weshoulddefineafunction.defIsFlood(join_count):ifjoin_count>0:return"Yes"else:return"No"Secondly,weshouldcallthisfunctionusingtheotherfieldslike IsFlood(!Join_Count!)Here......
  • Node.js 20 —— 几个令人大开眼界的特性
    前言:欢迎来到Node.js20Node.js20已经发布,带来了创新和激动人心的新时代。这个开创性的版本于2023年4月18日首次亮相,并将在2023年10月发布长期支持(LTS)版本,并且将持续支持至2026年4月,下面小编就为大家介绍一下Node.js20的几个新特性:1.Node.js权限访问Node.js20正式推出了......
  • js解密日记3 jsentrypt带给我的困扰
    随着技术的不断进步,保护敏感数据已成为开发者的首要任务之一。加密是一种保护数据的方法,JSenCrypt是一款流行的加密库,提供了HTML、Python和Node.js版本。本文将探讨每个版本的特点、优点、缺点,并提供代码示例来演示它们的用法。jsentryptHTML版本优点:客户端加密:jsentrypt......
  • 一文彻底搞懂JS函数柯里化
    函数柯里化是一种强大的函数式编程技术,它使我们能够预设函数的参数,创建新的函数,并在需要的时候执行这些函数。这个技术提供了强大的代码复用和组合能力,使我们的代码变得更简洁、更具可读性。什么是函数柯里化?函数柯里化(Currying)是在函数式编程中常用的技术,它的基本思想是将......