WebGL开发:加载图片配准

简介: WebGL开发:加载图片配准

WebGL可以加载图片纹理,图片可以根据设定的坐标变化,设置图片的尺寸等等。

一般在加载图片的时候,关键的是设置图片的像素位置坐标,如下边的坐标形式,按照顺序排列图片的位置。
image.png
图片的像素位置设置好以后,设置图片的尺寸,默认可以根据图片的长和宽进行加载,当x1和y1是0,0的时候,从左上角进行图片的加载,要想离开一点可以将x1和y1值调大些。
image.png
WebGL的vertex-shader(顶点着色器)中,需要将屏幕坐标,变换成渲染空间的坐标,下边一段是从WebGL基础网站复制下的,直接可以用,上边有英文说明。

attribute vec2 a_position; 

            attribute vec2 a_texCoord; 

            uniform vec2 u_resolution; 

            varying vec2 v_texCoord;  

            void main() { 

        // convert the rectangle from pixels to 0.0 to 1.0  

         vec2 zeroToOne =  a_position / u_resolution;  

        // convert from 0->1 to 0->2 

        vec2 zeroToTwo = zeroToOne * 2.0; 

        // convert from 0->2 to -1->+1 (clipspace) 

        vec2 clipSpace = zeroToTwo - 1.0; 

        gl_Position = vec4(clipSpace * vec2(1, -1), 0, 1); 

        // pass the texCoord to the fragment shader 

         // The GPU will interpolate this value between points.

         v_texCoord = a_texCoord;

                 }

WebGL的fragment-shader(片段着色器)中,我们只需要设置图片的颜色即可了,这也是参照webgl基础网站的代码。

precision mediump float; 

    // our texture 

    uniform sampler2D u_image;

    uniform vec2 u_res; 

       //the texCoords passed in from the vertex shader. 

        varying vec2 v_texCoord; 

    void main() 

    {  

             gl_FragColor = texture2D(u_image, v_texCoord);  

     }

当然说了以上这些,加载一张图片还是比较简单的,如果下边的背景是一个地图控件的话,如何让加载的图片和地图进行联动配准。

下边简要说一下思路:

一般地图都是按照web墨卡托进行切片的,第一级的切片尺寸是256*256,对应的经纬度范围是[-180,-90,180,90],根据这些我们就能换算第一级的时候,经纬度在第一级的切片像素位置,具体的算法参照以下的网址。

// -- converts latlon to pixels at zoom level 0 (for 256x256 tile size) , inverts y coord )

// -- source : http://build-failed.blogspot.cz/2013/02/displaying-webgl-data-on-google-maps.html

根据地图的四至范围,使用的是左上角的坐标,就能换算出来对应在第一级切片的像素位置。这样就能构建地图的变换矩阵translateMatrix,再根据地图的缩放级别,构建地图的缩放矩阵scaleMatrix,在地图发生变化的时候,往vertex-shader中传递矩阵,用矩阵和坐标进行相乘,就能使坐标发生变化,从而使图片进行覆盖变化。

gl_Position =u_matrix * a_position;

白色的图片是以半透明加载上去的,在地图移动时进行变化,半透明要改变shader中的颜色透明度。

gl_FragColor = vec4(floor(255.0 color 0.75) / 255.0);
image.png
webgl加载图片的效率也是相当高的,上边图片的大小是6M左右。

相关文章
|
6月前
|
Web App开发 编解码 前端开发
webgl canvas系列——快速加背景、抠图、加水印并下载图片
webgl canvas系列——快速加背景、抠图、加水印并下载图片
241 8
webgl canvas系列——快速加背景、抠图、加水印并下载图片
|
6月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
|
前端开发
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
2127 0
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
|
3月前
|
缓存 图形学
Unity3D学习笔记12——渲染纹理
Unity3D学习笔记12——渲染纹理
39 2
|
5月前
|
图形学
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
【实现100个unity特效之2】使用shader和shader Graph实现2d图片描边效果(附源码)
230 0
|
6月前
|
Android开发 开发者
Android开发之通过渲染纹理展示地球仪
该文阐述了如何使用OpenGL为三维物体添加纹理,以增强其真实感。纹理坐标是二维的,用于标记摊平后的“布料”对应物体的哪个部位,类似裁缝制作衣服的过程。在OpenGL中,启用纹理和深度测试是关键,还包括设置纹理参数、分配纹理编号、绑定位图材质等步骤。计算材质的纹理坐标后,通过`glDrawArrays`结合顶点和纹理坐标逐个贴图。最终示例展示了将世界地图贴到球体上形成逼真的地球仪效果。通过控制旋转、平移和缩放,能实现简单的三维动画效果。
76 2
Android开发之通过渲染纹理展示地球仪
|
前端开发 JavaScript
threejs实战_canvans纹理
threejs加载canvas纹理
156 0
threejs实战_canvans纹理
|
存储 异构计算
threejs实战_3d纹理
threejs加载3d纹理
207 0
threejs实战_3d纹理
|
缓存 JavaScript 前端开发
【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
376 0
【图形基础篇】04 # GPU与渲染管线:如何用WebGL绘制最简单的几何图形?
|
编解码
unity3dUGUI之UI粒子特效自适应缩放
using UnityEngine; using System.Collections; using System.Collections.Generic; public class UIParticleScale : MonoBehaviour...
1587 0