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月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
前端必看的8个HTML+CSS技巧 (六) 裁剪图像的动画
|
前端开发 JavaScript 定位技术
threejs绘制风羽
threejs绘制风羽
238 0
|
存储 前端开发 JavaScript
three.js 纹理
纹理是添加到材料中的图像或颜色,以提供更多细节或美感。纹理是Three.js中必不可少的主题。在本节中,我们将了解如何将基本纹理应用于我们的材质。
101 0
|
前端开发
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
2103 0
Threejs - 加载视频纹理渲染 实现一个3D视频播放器
|
23天前
Threejs绘制圆锥体
这篇文章讲解了如何在Three.js中创建并正确定向圆锥体,确保其在不同场景下的稳定显示,涵盖了生成圆锥体几何体、设置材质和纹理以及解决可能的倾斜显示问题等内容。
28 1
Threejs绘制圆锥体
|
24天前
Threejs绘制传送带
这篇文章详细介绍了如何使用Three.js绘制一个动态的传送带模型,包括传送带的几何体创建、纹理应用以及实现带体循环移动的动画效果。
18 0
Threejs绘制传送带
|
3月前
|
缓存 图形学
Unity3D学习笔记12——渲染纹理
Unity3D学习笔记12——渲染纹理
38 2
|
前端开发 JavaScript
threejs实战_canvans纹理
threejs加载canvas纹理
156 0
threejs实战_canvans纹理
|
存储 异构计算
threejs实战_3d纹理
threejs加载3d纹理
206 0
threejs实战_3d纹理
|
缓存 Android开发
Skia深入分析5——skia文字绘制的实现
文字绘制主要包括编码转换(主要是中文)、字形解析(点线或image)和实际渲染三个步骤。在这个过程中,字形解析和实际渲染均是耗时步骤。Skia对文字解析的结果做了一套缓存机制。在中文字较多,使用多种字体,绘制的样式(粗/斜体)有变化时,这个缓存会变得很大,因此Skia文字缓存做了内存上的限制。 1、SkPaint 文字绘制与SkPaint的属性相关很大,先回头看下SkPaint相关
6757 0