目前分類：HTML (6)

瀏覽方式： 標題列表 簡短摘要

前一篇博文谈了对张院士透明计算的一些想法。后来，受到评论的启发，找到了英特尔的一个网页：link。这个网页介绍了了一种基于HTML5的透明计算的实现 -- freedom engine：

The tool is Freedom-Engine, a solution that frees developers from all obstacles to transparent computing, allowing them to write once and target both mobile and PC devices, including the latest Ultrabook features.

  • Code in the Cloud – no development kits or APIs to install

  • Full HTML5 Support – graphics, audio, input, devices, WebGL, Box2D

  • Deploy to all platforms – HTML5 browsers + Native mobiles, tablets & desktop

  • Write Once – input and resolution agnostic commands eliminate porting pain

  • Free To Use – develop, test and distribute your apps, you keep all revenues.

其透明计算的概念跟张院士大致相同，但是实现的技术迥异。计算应用保存在服务器（云端）的概念相同 -- code in the cloud；计算应用运行在各种终端的概念也相同 -- deploy to all platforms。具体实现方面的不同包括：freedom engine的计算应用是基于网络浏览器的 -- 现在主要支持firefox和chrome，这些网络浏览器对应了张院士透明计算概念中的操作系统（被作为计算应用的一部分）；freedom engine的计算应用需要重新开发 -- 使用HTML5和freedom engine提供的API，而张院士透明计算的目标之一是重用（reuse）各操作系统上已存在的计算应用（这也是将操作系统当作计算应用一部分的动机）。

freedom engine的开发环境在云端，程序本身和所需的资源保存在云端，编译在云端，最后生成的应用也在云端。英特尔提供了这个开发环境的演示：link （点击之后需要点击忽略安全证书错误；另外还需要webGL插件）。考虑到国内的网络访问这个链接会有问题，我把Hello Universe的例子截屏了下来：


(繼續閱讀...)

戮克 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：HTML
▲top

OpenGL的教程多以“画一个点”开始：简单的初始化过程后，调用glVertexXX()并传入描述点信息的位置。下面就是一个典型的OpenGL的HelloWorld代码。

glBegin(GL_POINTS); 
    glVertex3f(0.0f, 0.0f, 0.0f); 
glEnd();

开始学习WebGL的时候我试图寻找这样的代码，之后我发现在WebGL中，即使要画出一个点，也需要了解着色器和缓冲区的知识。好在对于尝试编写WebGL程序的人来说，关于着色器和缓冲区的知识是必要的。在研究了HiWebGL站点翻译的WebGL教程前几课的代码，并且自己尝试实现一个3D贪吃蛇程序之后，我对着色器和缓冲区的知识稍作整理，写下这篇博文，以便以后查阅。如果你也在学习这方面的知识，希望这篇博文能够帮助到你。

着色器

着色器，可以理解为运行在显卡中的指令和数据。 
完整的着色器包括顶点着色器和片元着色器。顶点着色器最基本的任务是接收三维空间中点的坐标，将其处理为二维空间中的坐标并输出；片元着色器最基本的任务是对需要处理的屏幕上的每个像素输出一个颜色值；将顶点着色器输出的二维空间中的点坐标，转化为需要处理的像素并传递给片元着色器的过程，称为图元光栅化。

1

在WebGL中，着色器是用一种类似于C的语言x-shader编写的。

1.顶点着色器

顶点着色器接受attribute变量和uniform变量。attribute变量存储着关于点本身的数据，其中最重要的当然是点的位置。uniform变量存储的数据仅仅帮助着色器完成任务，换言之，着色器仅仅是需要uniform变量而并不处理他们。顶点着色器需要输出varying变量给片元着色器。 
注意，attribute、uniform、varying并不是数据类型，而只是描述该变量在着色器中的作用。

最简单的顶点着色器代码如下：

复制代码
(繼續閱讀...)

戮克 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：HTML
▲top

 

WebGL中文教程

 

第1课至第16课所有教程实例打包下载：

115网盘下载：http://115.com/file/dn34mx83#

新浪微博微盘下载：http://vdisk.weibo.com/s/1tsZE/1323662911

 

作为目前最好的学习WebGL的网站之一，LearingWebGL.com的作者Giles Thomas提供了一系列通俗易懂、由浅入深的教程，并配有配套的代码实例。长期以来国内还没有相应的WebGL中文教程。因此HiWebGL决定正式启动教程翻译工程！

今后HiWebGL将会陆陆续续的更新中文版的WebGL教程。翻译的内容主要是基于LearningWebGL.com的教程。但由于原文最后更新于2011年3月，其中部分章节已经不适合现在的情况（例如Mac OS X的最新版本已经由Snow Leopard升为Lion、Firefox 6.0已经开始将大部分的Linux下的显卡驱动移除出黑名单等），并且一些内容不适合中国本地情况，我们将会酌情进行适量的修改，以适应目前中国开发者的开发环境。

另外，因为译者个人方便的原因，我们将原教程中的第三方图形库由glMatrix改为Oak3D实现，这不影响到Demo的最终效果和实现，也不影响到WebGL的讲解和学习。原教程正文中相应的代码和讲解也为做了相应修改。

(繼續閱讀...)

戮克 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：HTML
▲top

微软IE团队与知名游戏开发厂商育碧（Ubisoft）联合推出了网页版《刺客信条：海盗传奇（Assassin’s Creed Pirates）》游戏，将3D技术与Web相结合，带给用户前所未有的浏览体验。

游戏地址：http://race.assassinscreedpirates.com/

《刺客信条：海盗传奇》背后：IE11与前沿技术的完美结合

移动游戏《刺客信条：海盗传奇》，现在已经成为一款免费的网页游戏。在页游版游戏中，玩家可以跟随游戏故事主角Alonzo Batilla船长遨游在加勒比海寻宝和挑战海盗，并能和其他玩家进行实时海战。游戏中的背景会根据时间和地点的不同而发生改变，玩家可以体验实时的海盗生涯。

页游版游戏中采用了全3D画面，令所有船只与环境看上去更加真实，即便是船只开动时细微的海浪波动也能得到完美的呈现，给玩家带来像在真正海面上航行的真实体验。玩家在 IE11 中运行游戏时，游戏会自动检测玩家的设备种类及输入方式，自动调整游戏来适应屏幕，以达到最佳的显示效果。

1403161418_530170

为了实现上面的效果，微软IE团队与育碧使用了开源的3D引擎Babylon.JS来搭建游戏。Babylon.JS是一个基于WebGL、JavaScript和TypeScript技术的开源3D引擎，配合Babylon.JS，开发者可以更好的利用WebGL技术，更方便快捷地完成光线、轮船纹理、海浪等的3D建模，从而带来最佳的呈现效果。正是因为WebGL所拥有的GPU加速特性，玩家们可以用最短的时间在浏览器上加载完复杂的3D页面。

1403161437_698904

WebGL引领未来网页游戏开发趋势

过去Flash+非标准插件的3D页游模式，正在逐渐演变成由WebGL当家，HTML5技术提供支撑的新3D页游模式，现在WebGL为页游带来的3D体验甚至可以媲美传统的PC桌面游戏。

通过WebGL，3D物体形象可以直接在网页上呈现出来，网页开发人员可以直接借助系统显卡在浏览器里更流畅地展示3D场景和模型，还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦，将开发流程进一步简化的同时，又能为用户带来更炫酷的3D效果体验。

(繼續閱讀...)

戮克 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：HTML
▲top

天翼空间开发者社区http://www.189works.com/

　　地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理及各个浏览器的数据精度情况。



　　在访问位置信息前，浏览器都会询问用户是否共享其位置信息，以 Chrome 浏览器为例，如果您允许 Chrome 浏览器与网站共享您的位置，Chrome 浏览器会向 Google 位置服务发送本地网络信息，估计您所在的位置。然后，浏览器会与请求使用您位置的网站共享您的位置。



　　HTML5 Geolocation API 使用非常简单，基本调用方式如下：　



　　if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(locationSuccess, locationError,{ // 指示浏览器获取高精度的位置，默认为false enableHighAcuracy: true, // 指定获取地理位置的超时时间，默认不限时，单位为毫秒 timeout: 5000, // 最长有效期，在重复获取地理位置时，此参数指定多久再次获取位置。 maximumAge: 3000 });}else{ alert("Your browser does not support Geolocation!");} 
　　locationError为获取位置信息失败的回调函数，可以根据错误类型提示信息：



　　locationError: function(error){ switch(error.code) { case error.TIMEOUT: showError("A timeout occured! Please try again!"); break; case error.POSITION_UNAVAILABLE: showError('We can\'t detect your location. Sorry!'); break; case error.PERMISSION_DENIED: showError('Please allow geolocation access for this to work.'); break; case error.UNKNOWN_ERROR: showError('An unknown error occured!'); break; }} 
　　locationSuccess为获取位置信息成功的回调函数，返回的数据中包含经纬度等信息，结合Google Map API 即可在地图中显示当前用户的位置信息，如下：



　　locationSuccess: function(position){ var coords = position.coords; var latlng = new google.maps.LatLng( // 维度 coords.latitude, // 精度 coords.longitude ); var myOptions = { // 地图放大倍数 zoom: 12, // 地图中心设为指定坐标点 center: latlng, // 地图类型 mapTypeId: google.maps.MapTypeId.ROADMAP }; // 创建地图并输出到页面 var myMap = new google.maps.Map( document.getElementById("map"),myOptions ); // 创建标记 var marker = new google.maps.Marker({ // 标注指定的经纬度坐标点 position: latlng, // 指定用于标注的地图 map: myMap }); //创建标注窗口 var infowindow = new google.maps.InfoWindow({ content:"您在这里纬度："+ coords.latitude+ "经度："+coords.longitude }); //打开标注窗口 infowindow.open(myMap,marker); } 
　　经过测试，Chrome/Firefox/Safari/Opera四个浏览器获取到的位置信息都是一摸一样的，估计都是用的同一个位置服务，数据如下：
　　






　　而IE浏览器的和上面几款浏览器获取到的数据不一样，数据如下：
　　






　　位置服务用于估计您所在位置的本地网络信息包括：有关可见 WiFi 接入点的信息（包括信号强度）、有关您本地路由器的信息、您计算机的 IP 地址。位置服务的准确度和覆盖范围因位置不同而异。　



　　总的来说，在PC的浏览器中 HTML5 的地理位置功能获取的位置精度不够高，如果借助这个 HTML5 特性做一个城市天气预报是绰绰有余，但如果是做一个地图应用，那误差还是太大了。不过，如果是移动设备上的 HTML5 应用，可以通过设置 enableHighAcuracy 参数为 true，调用设备的 GPS 定位来获取高精度的地理位置信息。


戮克 發表在 痞客邦 留言(0) 人氣()

  • 個人分類：HTML
▲top
HTML5設定編碼方法<meta charset="UTF-8">
HTML4.01設定編碼方法
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

程式碼加在head


<head>


   <meta charset="UTF-8" />


  <title>標題</title>
</head>



                                    

        
 
        
        

    

        

    

    
        

            戮克 發表在 痞客邦                    留言(0) 人氣()
                    
 
                
 
        

        
    
            
  • 個人分類：HTML
    •         

                
▲top

        
 
    

				
 
		              
 
                        
 
                        
                        
                    

                    
                    

                        
本部落格的文章和圖片大多來自網路，如有侵權請告知，以便刪除