🚗 💺 👴🏼 Dart + WebGL डार्क साइड पर कुकीज़ स्वादिष्ट हैं 🌑 ➖ 🖐️

वेब अनुप्रयोगों के विकास का इतिहास, एक्केन स्काईवॉकर के जीवन से मिलता जुलता है। लगभग 15 साल पहले वे कमजोर और अनाड़ी थे। लेकिन अब समय बीत चुका है, सिर में टेस्टोस्टेरोन हिट हो जाता है और हमारा "अनकेड" ब्राउज़र कार्यक्रमों की गुणवत्ता और कार्यक्षमता के लिए आवश्यकताओं के लाल-गर्म लावा में गिर जाता है। अपनी एकमात्र जीवित जावास्क्रिप्ट के साथ, वह पृथ्वी को अपने अधीन कर लेता है। यहां एक चौकस पाठक ध्यान देगा कि इस तरह हम दूर नहीं जाएंगे। एक अप्रत्याशित, लेकिन वास्तव में काफी प्राकृतिक साजिश मोड़, और उद्धारकर्ता डार्ट दृश्य पर दिखाई देता है। चलो उसके साथ पक्ष करने की कोशिश करते हैं।

डार्ट क्यों, केवल इसलिए कि यह टाइप किया गया है और इसमें सी-लाइक सिंटैक्स है। इसके अलावा, Google डार्ट के लिए VirtualMachine विकसित कर रहा है, जो लंबी अवधि में इस भाषा के प्रदर्शन में एक महत्वपूर्ण लाभ दे सकता है।

क्यों WebGL, क्योंकि डार्ट जैसी यह तकनीक सबसे आगे है, और ब्राउज़र में 3D, मेरी राय में, एक बहुत ही दिलचस्प विषय है।

यह ब्राउज़र तकनीक से बोर्ड गेम की गुणवत्ता की उम्मीद करने का कोई मतलब नहीं है। WebGL OpenGL 2.0 है, जिसका अर्थ है कि हमारे पास केवल हमारे हाथों में वर्टेक्स और टुकड़ा शेड हैं, जिसका अर्थ है कि तस्वीर की गुणवत्ता लगभग 5 वर्षों तक बोर्ड गेम से पीछे रह जाएगी। अपने शिल्प के स्वामी के लिए, यह एक बाधा नहीं है, टैंकों ने इसे ऑनलाइन साबित किया, और यहां तक कि यह पहले टैंकों के रचनाकारों के हाथों में नहीं था।

सबसे पहले हमें आईडीई डार्ट संपादक की आवश्यकता है। इसे आधिकारिक वेबसाइट www.dartlang.org से डाउनलोड किया जा सकता है
इस आईडीई का आधार, कई, परिचित, ग्रहण के लिए है, इसलिए, बिटनेस के संस्करण को डाउनलोड करने की सलाह दी जाती है जिसे आपने जावा स्थापित किया है। अन्यथा, आप इसे शुरू नहीं कर पाएंगे।

एक नया प्रोजेक्ट बनाएं: फ़ाइल-> नया एप्लिकेशन।

import 'dart:html'; void main() { }

यह डार्ट पर आवेदन का न्यूनतम विन्यास है। बाकी को सुरक्षित हटाया जा सकता है।
किसी विशेष आईडी वाले एक पृष्ठ से एक तत्व पर अपने हाथ पाने के लिए, आपको इस तरह क्वेरी फ़ंक्शन को कॉल करने की आवश्यकता है:
var someElement = querySelector ("# someid");
न्यूनतम HTML फ़ाइल पर एक नज़र डालें जो हम प्रयोगों के लिए उपयोग करेंगे:

 <!DOCTYPE html> <html> <body> <!--      --> <p id="status"></p> <!--    --> <canvas id="canvas3d" width="800" height="600"></canvas> <!--      --> <script src="Simple.dart" type="application/dart"></script> <script src="packages/browser/dart.js"></script> </body> </html>

यह डार्ट कोड कैसा दिखेगा, पृष्ठ पर एक छोटा संदेश प्रदर्शित करता है:

 import 'dart:html'; void main() { var status = querySelector('#status'); status.innerHtml = '<p>    Dart.</p>'; }

आप प्रारंभ बटन दबाकर प्रदर्शन की जांच कर सकते हैं:

वेब पर प्रकाशन के लिए संकलन - प्रोजेक्ट फ़ाइल ट्री के साथ विंडो में डार्ट फ़ाइल पर आरएमबी क्लिक करके और "जावास्क्रिप्ट के रूप में चलाएँ" पर क्लिक करें:

3 डी ग्राफिक्स प्रदर्शित करने के लिए, हमें कैनवास से 3 डी संदर्भ प्राप्त करने की आवश्यकता है, जिस पर हम आकर्षित करेंगे।

 //  canvas = document.querySelector('#canvas3d'); // webGl     gl = (canvas.getContext("webgl")!=null)?canvas.getContext("webgl") : canvas.getContext("experimental-webgl");

यदि इस अनुरोध के बाद gl शून्य है, तो ब्राउज़र webGl का समर्थन नहीं करता है।

 if (gl == null) { status.innerHtml = '<p>,     WebGl</p>'; }

संदर्भ प्राप्त करने के बाद, इसे शुरू करना आवश्यक है, मापदंडों के रूप में क्षैतिज पारी, ऊर्ध्वाधर पारी, प्रदर्शन फ्रेम की चौड़ाई और ऊंचाई:

 gl.viewport(0, 0, canvas.width, canvas.height);

कैनवास पर कम से कम कुछ प्रदर्शित करने के लिए, आपको दो शेड्स, एक शीर्ष और एक टुकड़ा (उर्फ पिक्सेल) लोड करने की आवश्यकता है।

 //  String vsSource = """ attribute vec3 aPosition; void main() { gl_Position = vec4(aPosition, 1); }"""; //   String fsSource = """ precision mediump float; uniform vec4 uColor; void main() { gl_FragColor = uColor; }"""; // ,        . // WebGLShader vs = gl.createShader(WebGLRenderingContext.VERTEX_SHADER); gl.shaderSource(vs, vsSource); gl.compileShader(vs); WebGLShader fs = gl.createShader(WebGLRenderingContext.FRAGMENT_SHADER); gl.shaderSource(fs, fsSource); gl.compileShader(fs); //    GPU WebGLProgram p = gl.createProgram(); gl.attachShader(p, vs); gl.attachShader(p, fs); gl.linkProgram(p); gl.useProgram(p); //    . if (!gl.getShaderParameter(vs, WebGLRenderingContext.COMPILE_STATUS)) { print(gl.getShaderInfoLog(vs)); } if (!gl.getShaderParameter(fs, WebGLRenderingContext.COMPILE_STATUS)) { print(gl.getShaderInfoLog(fs)); } if (!gl.getProgramParameter(p, WebGLRenderingContext.LINK_STATUS)) { print(gl.getProgramInfoLog(p)); }

प्रिंट कमांड इस्तेमाल की गई आईडीई के सौदेबाजी कंसोल को सूचना प्रिंट करता है। अगर कुछ गलत हुआ है, तो कारणों को पढ़ा जा सकता है।
अब हमें GPU में शीर्ष बफर को लोड करने की आवश्यकता है:

 //     Float32List vertices = new Float32List.fromList([ -0.4, 0.4, 1.0, 0.4, 0.4, 1.0, -0.4, -0.4, 1.0]); //       gl.bindBuffer(WebGLRenderingContext.ARRAY_BUFFER, gl.createBuffer()); gl.bufferDataTyped(WebGLRenderingContext.ARRAY_BUFFER, vertices, WebGLRenderingContext.STATIC_DRAW); //    int numItems = 3; //  ,       int aPosition = gl.getAttribLocation(program, "aPosition"); gl.enableVertexAttribArray(aPosition); gl.vertexAttribPointer(aPosition, 3, WebGLRenderingContext.FLOAT, false, 0, 0); //     (RedGreenBlueAlpha) gl.clearColor(0.9, 0.9, 0.9, 1); gl.clear(WebGLRenderingContext.COLOR_BUFFER_BIT); //  ,      WebGLUniformLocation uColor = gl.getUniformLocation(program, "uColor"); //          RGBA gl.uniform4fv(uColor, new Float32List.fromList([0.5, 0.9, 0.9, 1.0]));

केवल एक ही चीज़ करना बाकी है: रेंडर कमांड देना:

 gl.drawArrays(WebGLRenderingContext.TRIANGLES, 0, numItems);

अब आप परियोजना शुरू कर सकते हैं और परिणाम देख सकते हैं:

आप संपूर्ण डार्ट स्रोत फ़ाइल यहां डाउनलोड कर सकते हैं: dl.dropbox.com/u/41059365/Simple.dart
इस लेख का उद्देश्य यह बताना था कि डार्ट जेएस के समान हो सकता है, लेकिन अधिक सुविधाजनक है। स्टेटिक टाइपिंग और ऑटो-पूर्ति विकास के समय को बहुत कम कर देते हैं, जिससे अनावश्यक जानकारी की आवश्यकता समाप्त हो जाती है। ये और अन्य उपहार वीडियो में अच्छी तरह से वर्णित हैं, पहली टिप्पणी में लिंक।

हमारी सीथ अभी भी युवा है, लेकिन वह तेजी से बदल रहा है और बड़ा हो रहा है। WebGl इसके साथ मजबूत हो रहा है, यद्यपि यह कुछ धीमा है। डार्ट और जेएस की तुलना करते हुए, मैं उन लोगों के प्रति अपना गहरा सम्मान व्यक्त करना चाहता हूं जो उनमें से दूसरे पर वास्तव में जटिल परियोजनाएं लिखने में सक्षम हैं। डार्ट के लिए तीसरे पक्ष के पुस्तकालयों की संख्या जेएस के लिए अतुलनीय रूप से छोटी है, लेकिन इससे जुड़ी भाषा और उपकरण इतने अच्छे हैं कि यह नई परियोजनाओं के पीछे नहीं जाएगा। और चरण-दर-चरण कोड डीबगिंग नौसिखिए प्रोग्रामर के लिए एक खजाना है। कुकीज़ डार्ट की तरफ हैं और वह जल्द ही पूरे इंटरनेट का मालिक बन जाएगा।

Dart + WebGL डार्क साइड पर कुकीज़ स्वादिष्ट हैं

More articles: