整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML5移動(dòng)開發(fā)技術(shù)可以說是Web開發(fā)世界一次重大變革，無論你喜不喜歡，它都代表了未來發(fā)展趨勢(shì)。如今HTML5廣為流傳，各類媒體炒的如火如荼，很多文章都在不遺余力的介紹HTML5技術(shù)，想學(xué)HTML5開發(fā)技術(shù)的人也是越來越多。今天千鋒武漢HTML5培訓(xùn)小編要跟大家分享的文章是關(guān)于零基礎(chǔ)怎么學(xué)習(xí)HTML5？難不難學(xué)？
互聯(lián)網(wǎng)發(fā)展到今天，越來越多的技術(shù)崗位人才出現(xiàn)了稀缺的狀態(tài)，就拿當(dāng)前的HTML5來講，基本成為了每家互聯(lián)網(wǎng)公司不可缺少的人才。如果抓住這個(gè)機(jī)會(huì)，把HTML5搞好，那么前途不可限量，而且這門行業(yè)是越老越吃香，經(jīng)驗(yàn)越多待遇越高。
身邊有些朋友在自學(xué)HTML5的過程中，發(fā)現(xiàn)的一個(gè)很嚴(yán)重的問題，那便是自學(xué)HTML5并不是想象的那么簡(jiǎn)單，你必須要滿足以下條件：
1、一定要有高手指導(dǎo)。遇到難題如果沒有高手指導(dǎo)，單純的靠自己琢磨特別耗費(fèi)時(shí)間，進(jìn)度緩慢不說，而且最后不一定能弄懂，時(shí)間一久就很容易放棄，這也是很多自學(xué)HTML5的同學(xué)半途而廢的首要原因。
2、一定要有足夠的設(shè)計(jì)靈感和開發(fā)思想，多看代碼多讀代碼。要想學(xué)好HTML5，HTML5設(shè)計(jì)思想就必須放在第一位，因?yàn)榍岸俗⒅氐木褪强蛻趔w驗(yàn)度。
3、除了培養(yǎng)HTML5項(xiàng)目的鍛煉，你還有輔助提升辦法。比如多多強(qiáng)化你的英語閱讀水平，HTML5編程雖然要用到的英語詞匯不多，也就500個(gè)單詞左右，但是你的英語閱讀水平提高了，那么在自學(xué)HTML5的過程中，你的進(jìn)度一定會(huì)更加的好，并且對(duì)日后的發(fā)展也很有幫助。
如果沒有基礎(chǔ)，在很多人看來自學(xué)HTML5是不可思議的事情。如果你覺得自學(xué)HTML5這條路太難走，又不想放棄HTML5的學(xué)習(xí)，那么對(duì)于想快速學(xué)好HTML5的你來說，最好的辦法就是參加系統(tǒng)的HTML5培訓(xùn)班。
參加培訓(xùn)不但可以快速學(xué)習(xí)HTML5，同時(shí)還能帶來意想不到的收獲：
1、當(dāng)你遇到難題，很快的就有人為你解答
2、可以讓你完全的掌握HTML5行業(yè)的技術(shù)與項(xiàng)目
3、可以助你找到一個(gè)好的工作
4、可以給你帶來工作經(jīng)驗(yàn)
5、有一個(gè)好的教學(xué)環(huán)境
6、可以認(rèn)識(shí)更多的人脈關(guān)系
以上就是千鋒武漢HTML5培訓(xùn)小編今天跟大家分享的零基礎(chǔ)怎么學(xué)習(xí)HTML5？希望本篇文章能夠?qū)φ郎?zhǔn)備自學(xué)的小伙伴們提高幫助，如果覺得自學(xué)有困難參加HTML5培訓(xùn)也是不錯(cuò)的選擇哦。
evExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。
點(diǎn)擊“了解更多”獲取DevExtreme v20.1.4完整版下載
具體更新內(nèi)容如下：
此列表包括v20.1.4中已解決的所有問題。
All Angular products
DevExtreme Core
DevExtreme Data Grid
DevExtreme Data Visualization
薦：使用NSDT 編輯器快速搭建3D應(yīng)用場(chǎng)景
大多數(shù) 3D 對(duì)象是 使用建模工具創(chuàng)建，這是有充分理由的。創(chuàng)建復(fù)雜對(duì)象 （如飛機(jī)甚至建筑物）很難在代碼中完成。建模工具 幾乎總是有意義的，但也有例外！其中之一可能是案例 就像飛行拱廊島連綿起伏的丘陵一樣。我們最終使用了 我們發(fā)現(xiàn)更簡(jiǎn)單，甚至可能更直觀的技術(shù)：一個(gè) 高度圖。
高度圖是一種 使用常規(guī)二維圖像來描述 像島嶼或其他地形一樣的表面。這是一種非常常見的使用方式 高程數(shù)據(jù)，不僅在游戲中，而且在地理信息系統(tǒng)中 制圖師和地質(zhì)學(xué)家使用的 （GIS）。
幫助您獲得想法 有關(guān)其工作原理，請(qǐng)查看此交互式演示中的高度圖。嘗試?yán)L圖 ，然后檢出生成的地形。
高度圖背后的概念 很簡(jiǎn)單。在上圖所示的圖像中，純黑色是 “地板”和純白色是最高峰。介于兩者之間的灰度顏色 表示相應(yīng)的高程。這為我們提供了 256 個(gè)海拔高度，這 是我們游戲的大量細(xì)節(jié)。實(shí)際應(yīng)用程序可能會(huì)使用完整的 色譜可存儲(chǔ)更多層次的細(xì)節(jié)（2564 = 4，294，967，296 級(jí) 詳細(xì)信息（如果包含 Alpha 通道）。
高度圖有幾個(gè) 與傳統(tǒng)多邊形網(wǎng)格相比的優(yōu)勢(shì)：
一、高度圖很多 更緊湊。僅存儲(chǔ)最重要的數(shù)據(jù)（高程）。它 需要以編程方式轉(zhuǎn)換為 3D 對(duì)象，但這是 經(jīng)典交易：您現(xiàn)在節(jié)省空間，稍后通過計(jì)算付款。通過存儲(chǔ) 數(shù)據(jù)即圖像，您將獲得另一個(gè)空間優(yōu)勢(shì)：您可以利用標(biāo)準(zhǔn) 圖像壓縮技術(shù)并使數(shù)據(jù)變?。ㄏ啾戎拢?！
其次，高度圖是一個(gè) 生成、可視化和編輯地形的便捷方式。非常直觀 當(dāng)你看到一個(gè)。感覺有點(diǎn)像看地圖。這被證明是 對(duì)飛行街機(jī)特別有用。我們?cè)O(shè)計(jì)和編輯了我們的島嶼 在 Photoshop 中！這使得根據(jù)需要進(jìn)行小調(diào)整變得非常簡(jiǎn)單。 例如，當(dāng)我們想確保跑道完全平坦時(shí)， 我們只是確保以單一顏色在該區(qū)域上繪畫。
您可以看到高度圖 下面的飛行拱廊。看看你是否能發(fā)現(xiàn)我們?yōu)?跑道和村莊。
飛行街機(jī)島的高度圖。它是在Photoshop中創(chuàng)建的，它基于著名的太平洋島鏈中的“大島”。有什么猜測(cè)嗎？
在解碼高度貼圖后映射到生成的 3D 網(wǎng)格上的紋理。更多內(nèi)容見下文。
我們用Babylon.js建造了飛行拱廊，Babylon給了我們一個(gè)漂亮的 從高度圖到 3D 的簡(jiǎn)單路徑。Babylon提供了一個(gè) API 來生成 來自高度圖圖像的網(wǎng)格幾何體：
ar ground = BABYLON.Mesh.CreateGroundFromHeightMap(
'your-mesh-name',
'/path/to/heightmap.png',
100, // width of the ground mesh (x axis)
100, // depth of the ground mesh (z axis)
40, // number of subdivisions
0, // min height
50, // max height
scene,
false, // updateable?
null // callback when mesh is ready
);`
細(xì)節(jié)量是 由該細(xì)分的財(cái)產(chǎn)決定。需要注意的是， 參數(shù)是指高度圖兩側(cè)的細(xì)分?jǐn)?shù)量 圖像，而不是單元格總數(shù)。所以稍微增加這個(gè)數(shù)字可以 對(duì)網(wǎng)格中的頂點(diǎn)總數(shù)有很大影響。
在下一節(jié)中，我們將 了解如何為地面設(shè)置紋理，但在嘗試使用高度貼圖時(shí) 創(chuàng)建時(shí)，查看線框很有用。這是應(yīng)用簡(jiǎn)單代碼 線框紋理，因此很容易看到高度圖數(shù)據(jù)是如何轉(zhuǎn)換為的 網(wǎng)格的頂點(diǎn)：
// simple wireframe material
var material = new BABYLON.StandardMaterial('ground-material', scene);
material.wireframe = true;
ground.material = material;`
一旦我們有一個(gè)模型，映射一個(gè) 質(zhì)地相對(duì)簡(jiǎn)單。對(duì)于飛行街機(jī)，我們簡(jiǎn)單地創(chuàng)建了一個(gè) 非常大的圖像，與我們的高度圖中的島嶼相匹配。圖像得到 延伸到地形的輪廓上，所以紋理和高度圖 保持相關(guān)性。這真的很容易想象，再一次，所有 制作工作是在Photoshop中完成的。
原始紋理圖像是 創(chuàng)建于 4096x4096。那可是挺大的?。ㄎ覀冏罱K將尺寸減小了 為了保持下載合理，級(jí)別到2048x2048，但所有 使用全尺寸圖像進(jìn)行開發(fā)。這是來自 原始紋理。
原始島嶼紋理的全像素示例。整個(gè)城鎮(zhèn)只有大約300平方像素。
這些矩形表示 島上城鎮(zhèn)的建筑。我們很快注意到 我們可以在地形和 其他 3D 模型。即使使用我們巨大的島嶼紋理，區(qū)別在于 令人分心的明顯！
為了解決這個(gè)問題，我們“混合” 以隨機(jī)噪聲的形式進(jìn)入地形紋理的附加細(xì)節(jié)。您可以 請(qǐng)參閱下面的之前和之后。注意額外的噪點(diǎn)如何增強(qiáng)外觀 地形細(xì)節(jié)。
我們創(chuàng)建了一個(gè)自定義著色器 添加噪音。著色器為您提供了對(duì) WebGL 3D 場(chǎng)景的渲染，這是著色器如何 有用。
WebGL著色器由兩個(gè)組成 主要部分：頂點(diǎn)和片段著色器。頂點(diǎn)的主要目標(biāo) 著色器是將頂點(diǎn)映射到渲染幀中的某個(gè)位置。片段（或 像素）著色器控制像素的結(jié)果顏色。
著色器是用 稱為GLSL（圖形庫著色器語言）的高級(jí)語言，它 類似于C。此代碼在 GPU 上執(zhí)行。深入了解如何 著色器工作，請(qǐng)參閱此處 有關(guān)如何為 Babylon.js 創(chuàng)建自己的自定義著色器的教程，或參閱此圖形著色器編碼初學(xué)者指南。
我們不會(huì)改變我們的 紋理映射到地面網(wǎng)格體，因此我們的頂點(diǎn)著色器非常簡(jiǎn)單。 它只是計(jì)算標(biāo)準(zhǔn)映射并分配目標(biāo)位置。
precision mediump float;
// Attributes
attribute vec3 position;
attribute vec3 normal;
attribute vec2 uv;
// Uniforms
uniform mat4 worldViewProjection;
// Varying
varying vec4 vPosition;
varying vec3 vNormal;
varying vec2 vUV;
void main() {
vec4 p = vec4( position, 1.0 );
vPosition = p;
vNormal = normal;
vUV = uv;
gl_Position = worldViewProjection * p;
}
我們的片段著色器有點(diǎn) 更復(fù)雜。它結(jié)合了兩個(gè)不同的圖像：基礎(chǔ)圖像和混合圖像。 基礎(chǔ)圖像映射到整個(gè)地面網(wǎng)格。在飛行街機(jī)中，這個(gè) 是島嶼的彩色圖像?；旌蠄D像是使用的小噪點(diǎn)圖像 在近距離為地面提供一些紋理和細(xì)節(jié)。著色器 組合每個(gè)圖像中的值以創(chuàng)建跨 島。
飛行的最后一課 街機(jī)發(fā)生在有霧的日子，所以我們的像素著色器的另一個(gè)任務(wù)是 調(diào)整顏色以模擬霧。調(diào)整基于頂點(diǎn)的距離 來自相機(jī)，遠(yuǎn)處像素被“遮擋”得更厲害 在霧中。您將在函數(shù)中看到此距離計(jì)算 在主著色器代碼上方。calcFogFactor
// #ifdef GL_ES
precision highp float;
// #endif
uniform mat4 worldView;
varying vec4 vPosition;
varying vec3 vNormal;
varying vec2 vUV;
// Refs
uniform sampler2D baseSampler;
uniform sampler2D blendSampler;
uniform float blendScaleU;
uniform float blendScaleV;
// #define FOGMODE_NONE 0.
// #define FOGMODE_EXP 1.
// #define FOGMODE_EXP2 2.
// #define FOGMODE_LINEAR 3.
// #define E 2.71828
uniform vec4 vFogInfos;
uniform vec3 vFogColor;
float calcFogFactor() {
// gets distance from camera to vertex
float fogDistance = gl_FragCoord.z / gl_FragCoord.w;
float fogCoeff = 1.0;
float fogStart = vFogInfos.y;
float fogEnd = vFogInfos.z;
float fogDensity = vFogInfos.w;
if (FOGMODE_LINEAR == vFogInfos.x) {
fogCoeff = (fogEnd - fogDistance) / (fogEnd - fogStart);
}
else if (FOGMODE_EXP == vFogInfos.x) {
fogCoeff = 1.0 / pow(E, fogDistance * fogDensity);
}
else if (FOGMODE_EXP2 == vFogInfos.x) {
fogCoeff = 1.0 / pow(E, fogDistance * fogDistance * fogDensity * fogDensity);
}
return clamp(fogCoeff, 0.0, 1.0);
}
void main(void) {
vec4 baseColor = texture2D(baseSampler, vUV);
vec2 blendUV = vec2(vUV.x * blendScaleU, vUV.y * blendScaleV);
vec4 blendColor = texture2D(blendSampler, blendUV);
// multiply type blending mode
vec4 color = baseColor * blendColor;
// factor in fog color
float fog = calcFogFactor();
color.rgb = fog * color.rgb + (1.0 - fog) * vFogColor;
gl_FragColor = color;
}
我們定制的最后一件作品 Blend shader 是 Babylon 使用的 JavaScript 代碼。主要目的 此代碼用于準(zhǔn)備傳遞給頂點(diǎn)和像素著色器的參數(shù)。
function BlendMaterial(name, scene, options) {
this.name = name;
this.id = name;
this.options = options;
this.blendScaleU = options.blendScaleU || 1;
this.blendScaleV = options.blendScaleV || 1;
this._scene = scene;
scene.materials.push(this);
var assets = options.assetManager;
var textureTask = assets.addTextureTask('blend-material-base-task', options.baseImage);
textureTask.onSuccess = _.bind(function(task) {
this.baseTexture = task.texture;
this.baseTexture.uScale = 1;
this.baseTexture.vScale = 1;
if (options.baseHasAlpha) {
this.baseTexture.hasAlpha = true;
}
}, this);
textureTask = assets.addTextureTask('blend-material-blend-task', options.blendImage);
textureTask.onSuccess = _.bind(function(task) {
this.blendTexture = task.texture;
this.blendTexture.wrapU = BABYLON.Texture.MIRROR_ADDRESSMODE;
this.blendTexture.wrapV = BABYLON.Texture.MIRROR_ADDRESSMODE;
}, this);
}
BlendMaterial.prototype = Object.create(BABYLON.Material.prototype);
BlendMaterial.prototype.needAlphaBlending = function () {
return (this.options.baseHasAlpha === true);
};
BlendMaterial.prototype.needAlphaTesting = function () {
return false;
};
BlendMaterial.prototype.isReady = function (mesh) {
var engine = this._scene.getEngine();
// make sure textures are ready
if (!this.baseTexture || !this.blendTexture) {
return false;
}
if (!this._effect) {
this._effect = engine.createEffect(
// shader name
"blend",
// attributes describing topology of vertices
[ "position", "normal", "uv" ],
// uniforms (external variables) defined by the shaders
[ "worldViewProjection", "world", "blendScaleU", "blendScaleV", "vFogInfos", "vFogColor" ],
// samplers (objects used to read textures)
[ "baseSampler", "blendSampler" ],
// optional define string
"");
}
if (!this._effect.isReady()) {
return false;
}
return true;
};
BlendMaterial.prototype.bind = function (world, mesh) {
var scene = this._scene;
this._effect.setFloat4("vFogInfos", scene.fogMode, scene.fogStart, scene.fogEnd, scene.fogDensity);
this._effect.setColor3("vFogColor", scene.fogColor);
this._effect.setMatrix("world", world);
this._effect.setMatrix("worldViewProjection", world.multiply(scene.getTransformMatrix()));
// Textures
this._effect.setTexture("baseSampler", this.baseTexture);
this._effect.setTexture("blendSampler", this.blendTexture);
this._effect.setFloat("blendScaleU", this.blendScaleU);
this._effect.setFloat("blendScaleV", this.blendScaleV);
};
BlendMaterial.prototype.dispose = function () {
if (this.baseTexture) {
this.baseTexture.dispose();
}
if (this.blendTexture) {
this.blendTexture.dispose();
}
this.baseDispose();
};
Babylon.js使它變得容易 創(chuàng)建基于著色器的自定義材質(zhì)。我們的混合材料相對(duì)簡(jiǎn)單， 但它確實(shí)對(duì)島嶼的外觀產(chǎn)生了很大的影響，當(dāng) 飛機(jī)低空飛到地面。著色器將 GPU 的強(qiáng)大功能帶到 瀏覽器，擴(kuò)展可應(yīng)用于 3D 的創(chuàng)意效果類型 場(chǎng)景。在我們的案例中，這是畫龍點(diǎn)名！
原文鏈接：使用 WebGL 為 HTML5 游戲創(chuàng)建逼真的地形
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
