Saturday, August 30, 2025

M04 Media The Mind


Media Literacy: Evolution, Importance, and Application in India

by Dr. Sudheendra S G.

1. Introduction: The Enduring Challenge of Media Engagement

The fundamental questions surrounding media – "what media is, how it shapes us, and how we engage with it" – are timeless. This briefing explores the historical trajectory of media literacy, its critical relevance today, and practical applications, particularly within the Indian context.

2. Defining Media Literacy: Beyond Critical Consumption

Media literacy is defined as "The ability to access, analyze, evaluate, create, and act using all forms of communication." It goes beyond simply critically reading or watching, emphasizing a deep understanding of the message's creator, its purpose, and its influence on audiences.

3. Historical Context: A Legacy of Skepticism and Transformation

Every new medium throughout history has been met with both opportunity and apprehension, fundamentally altering societal structures and the flow of information.

a) Ancient Concerns: The Fear of New Media

  • Plato's Warning (370 BCE): Plato, in Phaedrus, cautioned that writing could lead to "forgetfulness" as people would increasingly rely on text rather than memory. This illustrates a recurring theme: "Every new medium — from writing to the internet — has triggered fear and skepticism."

b) Gutenberg and the Printing Revolution: Democratizing Information

  • 1452: Gutenberg's printing press "democratized information," leading to increased literacy rates as books became more affordable. However, this also sparked fear among "elites and religious authorities [who] feared losing control of information."
  • Indian Connection: The 19th-century "Bengal Renaissance leveraged the printing press to publish newspapers like Samachar Darpan and reformist literature by Raja Ram Mohan Roy," mirroring the printing press's transformative power.

c) Media and Power: Challenging Hierarchies

  • Martin Luther (1517): His translation of the Bible broke the "monopoly of Latin-speaking clergy," empowering ordinary people and serving as a "direct precursor to democratization of knowledge."
  • Indian Reference: Figures like "Ishwar Chandra Vidyasagar’s Bengali primers and Jyotirao Phule’s educational materials... challenged entrenched social hierarchies" by providing access to knowledge in local languages.

d) The Newspaper Era and Yellow Journalism: Information for the Masses, at a Cost

  • 1800s: The rise of cheap, accessible newspapers like the New York Sun "shaped public discourse." However, the ad-driven revenue model also fostered "sensationalism," leading to "Yellow Journalism."
  • Indian Parallel: During the freedom struggle, newspapers like Kesari (Bal Gangadhar Tilak) and Young India (Mahatma Gandhi) "informed and united people." In contrast, today's "tabloid-style headlines in Times of India or TRP-driven 'breaking news' on channels like Republic TV or India TV" demonstrate a contemporary form of sensationalism.

4. Yellow Journalism: Then and Now

Sensationalism, driven by profit or influence, has a long history and continues to manifest in modern media.

  • Historical Example: The rivalry between Pulitzer and Hearst "sensationalized the sinking of the USS Maine to boost newspaper sales."
  • Indian Parallel:The "sensational coverage during the 2012 Nirbhaya case, where TV channels prioritized graphic storytelling over ethical reporting."
  • "WhatsApp forwards during 2019 elections spreading unverified claims show modern forms of 'digital yellow journalism.'"

5. Core Lessons for Today: Navigating the Modern Media Landscape

The historical evolution of media offers critical insights for understanding our current information environment.

  1. Every New Medium Changes the Rules: Each new communication technology, from the printing press to social media, "changes the rules" of information dissemination and societal interaction.
  2. Access Without Literacy is Dangerous: The widespread availability of technology (e.g., "cheap smartphones + cheap data") can lead to "information overload without critical filters."
  3. Profit vs. Truth: "Advertising often drives platforms to prioritize clicks and engagement over facts."
  • Case Study: India: The "rise of 'WhatsApp University' during events like demonetization and COVID-19, where unchecked forwards led to confusion and panic," exemplifies the dangers of unchecked information access.

6. Building Media Literacy Skills: Practical Strategies for India

Developing media literacy is crucial for informed citizenship. Key skills and their application in the Indian context include:

SkillHow to Build ItIndian ExampleAccessLearn to find credible newsUse The Hindu, PIB releasesAnalyzeUnderstand intent, bias, toneCompare coverage of the same eventEvaluateCross-check factsUse AltNews fact-checksCreateProduce responsible contentStart a class blog or podcastActShare insights, educate othersConduct media literacy workshopsTeaching Strategies and Activities for Educators:

  • Decode a Headline: Analyze current Indian news headlines (e.g., from NDTV, Times Now, The Wire) for attention-grabbing words and factual vs. sensational content.
  • Fake vs. Fact: Use fact-checking sites like AltNews or BOOM Live to expose viral misinformation (e.g., rumors during the 2023 Manipur conflict, misattributed election quotes).
  • Social Media Experiments: Students track screen time and discuss algorithmic influence on their beliefs.
  • Local Media Analysis: Compare regional channels (e.g., TV9 Kannada, Public TV, Asianet News) for language, cultural nuances, and bias.

7. Conclusion: A Modern Necessity for Informed Citizenship

Media literacy is not a luxury but a "necessity." The central challenge persists: "How do we consume, interpret, and act responsibly on the information we receive?" In India, characterized by "explosive" digital media penetration and rapid spread of "fake news," teaching media literacy is paramount for "empowerment, ethics, and informed citizenship."

 


M03 Media Literacy: From Protection to Empowerment


From Protectionism to Empowerment – A Media Literacy Framework

Dr Sudheendra S G summarizes key themes and facts from the "History of Media Literacy" excerpts, focusing on the evolution of media literacy from a protective stance to one of empowerment, with specific examples and tools relevant to India.

I. The Evolution of Media Literacy: From Protectionism to Empowerment

Historically, the rise of new media technologies has been met with a "protectionist stance" (David Buckingham), aimed at shielding audiences from perceived harms. This contrasts sharply with modern media literacy, which seeks to equip individuals with the skills to critically engage with media.

A. Protectionist Approaches (20th-Century Pivot) As media like film, radio, TV, and the web emerged, debates shifted from simple access to concerns about analysis and effects. Protectionism manifested in three key forms:

  • Cultural Defensiveness: Fear that new media promotes "low culture."
  • Indian Example: "Doordarshan-era tastes vs. 1990s satellite TV soaps & music videos; 'item numbers' vs. classical arts; 'reels culture' today."
  • Political Defensiveness: Anxiety over "propaganda/manipulation."
  • Indian Example: "Emergency (1975–77) press controls; election-season narrative wars; paid news debates."
  • Moral Defensiveness: Concern about "sex/violence/consumerism."
  • Indian Example: "CBFC cuts in films; 'influencer' culture & soft advertising to minors; periodic outcry over violent video games or 'obscene' content."

B. Moral Panic Cycles Protectionism often fuels "moral panics," as described by Stanley Cohen, where a perceived threat to societal norms triggers widespread anxiety and calls for protection, particularly of children.

  • Indian Mini-cases: "Short-video apps & 'corrupting youth' narratives," "PUBG/violent games debates in schools/press," and "Pop lyrics/dance trends framed as 'decay of values.'"
  • Key Questions: Who defines the threat? What data (vs. anecdotes) are used? What proportionate, rights-respecting responses exist (e.g., age ratings, media education, parental tools)?

II. McLuhan in the Smartphone Era: The Medium is the Message

Marshall McLuhan's core idea, "the medium is the message," emphasizes that "Platforms reshape how we relate, not only what we say." The characteristics of a platform fundamentally alter how information is consumed and interpreted.

  • Platform Lenses:Cinema hall vs. OTT on phone: "solitary, on-demand, bingeable; changes pacing & storytelling."
  • Newspaper op-ed vs. Twitter/X thread: "brevity, virality, dog-whistles."
  • WhatsApp group vs. public FB page: "encryption, closed-loop trust, forwardability."
  • India Focus:WhatsApp family and school groups serve as "default 'newsfeed'."
  • Regional-language keyboards facilitate "faster spread of local memes/rumours."
  • The "creator-economy on Insta/YouTube reshaping ads into 'edutainment'."

III. From Shielding to Skills: Developing Media Literacies

Modern media literacy focuses on equipping individuals with practical skills.

A. Digital Literacy vs. News Literacy

  • Digital Literacy: Focuses on safe and responsible use of devices and apps, addressing issues like "privacy, scams, dark patterns, time-well-spent."
  • India Angle: "UPI fraud patterns; OTP phishing; 'free data' bait; privacy settings in Indic apps."
  • News Literacy: Focuses on understanding the news ecosystem, including "how news is gathered; sourcing; verification; headlines vs body; editorial vs advertorial; filter bubbles."

B. Indian Toolbench for Verification

Practical tools for media literacy in the Indian context include:

  • Reverse image/video checks: Google Images, Yandex, InVID.
  • Fact-checkers: Alt News, BOOM, Factly, PIB Fact Check.
  • Source triangulation: Comparing news from sources like The Hindu, Indian Express, and Press Information Bureau releases.
  • Ad/disclosure literacy: Understanding ASCI influencer guidelines and identifying #ad/#sponsored content.

IV. Critical Engagement: Bias, Framing, and Representation

Understanding how media constructs narratives is crucial. Key aspects include:

  • Framing: Identifying the dominant frame of a story (e.g., "conflict, responsibility, solutions").
  • Omissions: Recognizing what information, voices, regions, genders, or caste/class angles are left out.
  • Proportionality: Assessing if the "headline is proportional to evidence."
  • India Tie-ins: "North-centric framing; metro bias; portrayal of the Northeast; gendered crime reporting language."

V. Responsible Creation

Media literacy also extends to responsible content creation. A "micro-creator code of conduct" should include:

  • "label sponsorships"
  • "link sources"
  • "avoid misleading thumbnails"
  • "consent & dignity in street content"
  • "contextual captions for archival/old footage"
  • "age-appropriate targeting and comment moderation"

This framework emphasizes a shift from merely protecting audiences to actively empowering them with the knowledge and skills necessary to navigate and critically engage with today's complex media landscape.

 


M02 Plato to WhatsApp Forwards The Evolution and Importance of Media Lit...



Media Literacy: Evolution, Importance, and Application in India

by Dr. Sudheendra S G.

1. Introduction: The Enduring Challenge of Media Engagement

The fundamental questions surrounding media – "what media is, how it shapes us, and how we engage with it" – are timeless. This briefing explores the historical trajectory of media literacy, its critical relevance today, and practical applications, particularly within the Indian context.

2. Defining Media Literacy: Beyond Critical Consumption

Media literacy is defined as "The ability to access, analyze, evaluate, create, and act using all forms of communication." It goes beyond simply critically reading or watching, emphasizing a deep understanding of the message's creator, its purpose, and its influence on audiences.

3. Historical Context: A Legacy of Skepticism and Transformation

Every new medium throughout history has been met with both opportunity and apprehension, fundamentally altering societal structures and the flow of information.

a) Ancient Concerns: The Fear of New Media

  • Plato's Warning (370 BCE): Plato, in Phaedrus, cautioned that writing could lead to "forgetfulness" as people would increasingly rely on text rather than memory. This illustrates a recurring theme: "Every new medium — from writing to the internet — has triggered fear and skepticism."

b) Gutenberg and the Printing Revolution: Democratizing Information

  • 1452: Gutenberg's printing press "democratized information," leading to increased literacy rates as books became more affordable. However, this also sparked fear among "elites and religious authorities [who] feared losing control of information."
  • Indian Connection: The 19th-century "Bengal Renaissance leveraged the printing press to publish newspapers like Samachar Darpan and reformist literature by Raja Ram Mohan Roy," mirroring the printing press's transformative power.

c) Media and Power: Challenging Hierarchies

  • Martin Luther (1517): His translation of the Bible broke the "monopoly of Latin-speaking clergy," empowering ordinary people and serving as a "direct precursor to democratization of knowledge."
  • Indian Reference: Figures like "Ishwar Chandra Vidyasagar’s Bengali primers and Jyotirao Phule’s educational materials... challenged entrenched social hierarchies" by providing access to knowledge in local languages.

d) The Newspaper Era and Yellow Journalism: Information for the Masses, at a Cost

  • 1800s: The rise of cheap, accessible newspapers like the New York Sun "shaped public discourse." However, the ad-driven revenue model also fostered "sensationalism," leading to "Yellow Journalism."
  • Indian Parallel: During the freedom struggle, newspapers like Kesari (Bal Gangadhar Tilak) and Young India (Mahatma Gandhi) "informed and united people." In contrast, today's "tabloid-style headlines in Times of India or TRP-driven 'breaking news' on channels like Republic TV or India TV" demonstrate a contemporary form of sensationalism.

4. Yellow Journalism: Then and Now

Sensationalism, driven by profit or influence, has a long history and continues to manifest in modern media.

  • Historical Example: The rivalry between Pulitzer and Hearst "sensationalized the sinking of the USS Maine to boost newspaper sales."
  • Indian Parallel:The "sensational coverage during the 2012 Nirbhaya case, where TV channels prioritized graphic storytelling over ethical reporting."
  • "WhatsApp forwards during 2019 elections spreading unverified claims show modern forms of 'digital yellow journalism.'"

5. Core Lessons for Today: Navigating the Modern Media Landscape

The historical evolution of media offers critical insights for understanding our current information environment.

  1. Every New Medium Changes the Rules: Each new communication technology, from the printing press to social media, "changes the rules" of information dissemination and societal interaction.
  2. Access Without Literacy is Dangerous: The widespread availability of technology (e.g., "cheap smartphones + cheap data") can lead to "information overload without critical filters."
  3. Profit vs. Truth: "Advertising often drives platforms to prioritize clicks and engagement over facts."
  • Case Study: India: The "rise of 'WhatsApp University' during events like demonetization and COVID-19, where unchecked forwards led to confusion and panic," exemplifies the dangers of unchecked information access.

6. Building Media Literacy Skills: Practical Strategies for India

Developing media literacy is crucial for informed citizenship. Key skills and their application in the Indian context include:

SkillHow to Build ItIndian ExampleAccessLearn to find credible newsUse The Hindu, PIB releasesAnalyzeUnderstand intent, bias, toneCompare coverage of the same eventEvaluateCross-check factsUse AltNews fact-checksCreateProduce responsible contentStart a class blog or podcastActShare insights, educate othersConduct media literacy workshopsTeaching Strategies and Activities for Educators:

  • Decode a Headline: Analyze current Indian news headlines (e.g., from NDTV, Times Now, The Wire) for attention-grabbing words and factual vs. sensational content.
  • Fake vs. Fact: Use fact-checking sites like AltNews or BOOM Live to expose viral misinformation (e.g., rumors during the 2023 Manipur conflict, misattributed election quotes).
  • Social Media Experiments: Students track screen time and discuss algorithmic influence on their beliefs.
  • Local Media Analysis: Compare regional channels (e.g., TV9 Kannada, Public TV, Asianet News) for language, cultural nuances, and bias.

7. Conclusion: A Modern Necessity for Informed Citizenship

Media literacy is not a luxury but a "necessity." The central challenge persists: "How do we consume, interpret, and act responsibly on the information we receive?" In India, characterized by "explosive" digital media penetration and rapid spread of "fake news," teaching media literacy is paramount for "empowerment, ethics, and informed citizenship."

 


M01 Understanding Media Literacy


The Importance of Media Literacy in the Digital Age

Source: Dr. Sudheendra S G.

I. Executive Summary

This briefing document summarizes the critical need for media literacy in today's digital landscape, particularly within the Indian context. Dr. Sudheendra S G emphasizes that "Media is all around you. Understanding it is not just a skill — it’s survival." Media literacy empowers individuals to navigate a constant flow of information, from news to social media, by developing the ability to access, analyze, evaluate, create, and act responsibly with all forms of communication. The document highlights the pervasive influence of media in India, from political discourse to consumer habits, and underscores the dangers posed by fake news, propaganda, and unchecked consumerism. It advocates for the integration of critical thinking and practical skills to foster a more discerning and responsible media-consuming and creating public.

II. Defining Media Literacy

Media literacy is defined by the National Association of Media Literacy Educators (NAMLE) as "the ability to access, analyze, evaluate, create and act using all forms of communication." This multifaceted skill involves:

  • Access: Knowing how and where to find credible media.
  • Analyze: Understanding underlying messages, symbols, and agendas.
  • Evaluate: Assessing information for credibility, bias, or fabrication.
  • Create: Producing one's own media responsibly.
  • Act: Utilizing these skills to engage, share, or advocate responsibly.

III. Why Media Literacy Matters: The Indian Context and Key Reasons

The necessity of media literacy is particularly pronounced in India due to several factors:

  • Smartphone Penetration: With "over 750 million smartphone users in India," digital media is a constant presence.
  • Average Screen Time: Adults spend "4–5 hours daily" and teens "7–9 hours" on screens, amplifying media's impact.
  • Social Media Influence: Platforms like WhatsApp, YouTube, and Instagram significantly "shape everything from political opinions to shopping habits."

Key Reasons for its Importance:

  1. Fake News Epidemics: Misinformation can have severe real-world consequences, as seen in the 2018 example where "misinformation on WhatsApp led to mob violence in rural India."
  2. Advertising & Consumerism: Brands leverage influencer marketing and create urgency (e.g., "Flipkart Big Billion Days create urgency and FOMO") to manipulate consumer behavior.
  3. Representation & Stereotypes: Media, such as Bollywood, often "perpetuates stereotypes: the 'angry young man,' 'item numbers,' or 'South Indian accents' for comic relief."
  4. Political Manipulation: "Targeted ads during elections on Facebook and YouTube often blur the line between fact and propaganda."
  5. Digital Well-being: Media literacy promotes mindful consumption and helps combat issues like "doomscrolling and screen fatigue."

IV. Core Concepts to Teach

Effective media literacy education should incorporate:

  1. Encoding and Decoding (Stuart Hall, 1973): Media messages are "encoded by creators and decoded by audiences."
  • Example: A Zomato ad saying, "Order now, happiness delivered," encodes convenience as happiness, but audiences may decode it as time-saving or promoting unhealthy fast-food culture.
  • Media Messages vs. Media Effects:Media Messages: The intended values, ideas, and stories.
  • Media Effects: How audiences perceive or act on those messages.
  • Example: While a movie like Padman promotes menstrual hygiene (message), its effect varies, with some seeing empowerment and others dismissing it as preachy.
  • Critical Thinking in Media (5 Key Questions):Who created this message?
  • What techniques are used to attract attention?
  • How might different people interpret this message differently?
  • What lifestyles, values, or points of view are represented or omitted?
  • Why is this message being sent?
  • Indian Example: "A Swiggy ad during cricket season — is it just fun, or is it reinforcing consumerism?"

V. Engaging Examples for Educators (Indian Context)

The document provides practical, India-specific examples for teaching media literacy:

  • WhatsApp University: Analyzing viral, fake health tips to "analyze source, cross-check facts via AltNews or PIB Fact Check, and discuss why people believed it."
  • Film & OTT: Case studies like The Family Man (Amazon Prime) to discuss "how stereotypes are reinforced or challenged" and analyze regional/gender dynamics.
  • Meme Culture: Debating whether political memes during Indian elections are "harmless humor or tools of propaganda."
  • Advertising Dissection: Breaking down "Cred IPL ad or a Zomato BlinkIt meme ad" to analyze color schemes, slogans, influencers, and subtle messaging.
  • News Bias: Comparing coverage of the same story on different Indian news channels (e.g., NDTV, Republic TV, The Wire) to analyze "tone, language, and framing."

VI. Building Media Literacy Skills & Practical Tips

For Educators:

  • Integrate media deconstruction into daily classes.
  • Utilize tools like Google Reverse Image Search, fact-check platforms (AltNews, BOOM), and CrowdTangle.

For Students & Enthusiasts:

  • Create their own analytical content (blogs, podcasts, videos).
  • Engage in peer discussions on current affairs with evidence-based reasoning.

Practical Tips for Everyone:

  • Pause Before Sharing: "Think twice before forwarding content."
  • Cross-Verify Sources: Use multiple credible news outlets.
  • Recognize Bias: Understand both one's own and the creator’s perspectives.
  • Balance Consumption: Limit "doomscrolling" and set time boundaries.
  • Engage Creatively: Produce thoughtful, fact-based content.

VII. Conclusion

Media literacy is presented as an indispensable skill, especially in India, where "media shapes opinions from elections to entertainment." It is not merely about critical consumption but also about "becoming responsible creators and active participants in the media landscape." The document concludes that "being media literate is not optional — it’s essential."

 


10 interactive drawer animation compression


Verge3d + Blender: Interactive Table (web 3d/vr) — Step‑by‑step Student Guide

This session introduces interactivity using Verge3D Puzzles. Students learn how to assign materials to the metal stand by clicking on color spheres and replace wood textures on the table by clicking on wood slabs. The process covers exporting updated scenes, setting up puzzle logic, and testing interactions for a fully responsive 3D experience.

 

Session 10A — Drawer Animation, Camera Limits, and Optimization

Goal: Add click‑triggered animation for the drawer, adjust camera controls for a better user experience, improve texture quality, and enable compression for optimized web performance.


1) Trigger Drawer Animation with Puzzles

  1. Export the scene as Verge3D glTF and open Puzzles from the App Manager.
  2. Create a new tab in Puzzles (name it Animation).
  3. Drag in a “when clicked” event → set object to Drawer.
  4. From Animation, drag “play animation” → snap it under the event.
    • Set loop to once.
  5. Save and Play → clicking the drawer plays the opening animation.

2) Add Open/Close Toggle Logic

  1. In Variables, create a new variable: status.
  2. Set initial status to closed (drag in set status to + text block → type closed).
  3. Add an if-do block from Logic:
    • Condition: if status = closed, play the open animation.
  4. On the animation block, open its settings and enable “when finished”.
  5. Use a set status to block to set status to open once the animation finishes.
  6. Add an else if condition:
    • If status = open, play the animation in reverse.
    • Enable advanced playback and set direction: reverse.
    • On completion, set status back to closed.
  7. Save and Play → clicking toggles between opening and closing smoothly.

3) Adjust Light for Shadow Placement

  1. In Blender, hide the environment sphere (viewport only).
  2. Select the Sun Light, go to Top View, and use G (move) and R (rotate) to adjust its angle.
  3. Preview with Sneak Peek until the shadow falls in the desired direction.
  4. Save and Export the scene again.

4) Limit Camera Zoom and Rotation

  1. Select the Camera.
  2. In Camera Properties → Verge3D Settings:
    • Set Minimum Distance = 2
    • Set Maximum Distance = 4
    • Set Vertical Rotation Limit = 0 to ~85°
  3. Save and Sneak Peek → test that zoom and rotation are restricted properly.

5) Improve Texture Quality

  1. Select the Table_Main object.
  2. In the Shader Editor, click on the Image Texture node for the wood material.
  3. In the Verge3D settings for the texture, set Anisotropic Filtering to 8x.
  4. Save, Export, and Sneak Peek → textures should now render sharper.

6) Enable Asset Compression

  1. In Blender, go to Render Properties → Verge3D Settings.
  2. Enable LZMA Compression.
  3. Save and Export Verge3D glTF.
  4. In Puzzles, open the Init tab.
    • Drag in Configure Application and enable Compressed Assets.
  5. Save and Play → check the project folder; file sizes should be significantly reduced (e.g., .bin file reduced from ~105 KB to ~18 KB).

7) Final Testing

  1. Open the app from App Manager and test:
    • Drawer toggles open/close on click.
    • Shadows and textures look correct.
    • Camera zoom/rotation limits are enforced.
    • File sizes are optimized.

Mini‑Checklist

  •  

Next: Learn how to publish the optimized project to your website or web server.

 

Session 10B — Drawer Click Animation (Toggle Open/Close)

Goal: Use Puzzles to play the drawer animation on click, and toggle it open/closed using a state variable (no JavaScript).


1) Prep & Open Puzzles

  1. In Blender: File → Save, then File → Export → Verge3D glTF (overwrite the app scene file).
  2. In App Manager, open your app → click Puzzles.

2) Create a New Puzzles Tab

  1. Click the + at the top of Puzzles to create a new tab.
  2. Name it animation (keeps logic organized).

3) Basic Click → Play Animation

  1. From Events, drag when object clicked → set object to Drawer.
  2. From Animation, drag play animation and snap it under the event.
  3. Set Object to Drawer, Playback: Once.
  4. Save and Play to test: clicking the drawer should open (plays forward).

If it autoplays on load, recheck Session 6 to ensure Verge3D Settings → Auto Start = Off for the Drawer.


4) Add a State Variable (open/closed)

  1. From Variables, create a variable named status.
  2. Drag set status to and place it near the top of the tab; set the value to text closed.

5) If/Else Toggle Logic

  1. From Logic, drag if do and place it above the play animation block.
  2. From Logic → Comparators, drag = (equals) into the if condition.
  3. Into the left side of =, drop the status variable; right side type text closed.
  4. Put your existing play animation block inside the if.
  5. Click the gear icon on play animation and enable when finished; attach set status to open under it (so the state updates after finishing).
  6. Click the gear on the if block and add an else if.
  7. Duplicate the = check and change the right side to open.
  8. Duplicate the play animation block and place it inside the else if. Click its gear → Advanced Playback and set it to reverse (play from end to start). Alternatively, set Start = 30, End = 1, Speed = 1.
  9. In the else if branch’s when finished, set status back to closed.
  10. Save and Play to test: click → opens; click again → closes.

Troubleshooting

  • Nothing happens on click: Ensure the clicked object is Drawer and the animation action exists on that object.
  • Only opens, never closes: Check that status is set to open in the when finished slot and that the else if condition compares to open.
  • Reverse doesn’t work: Use Advanced Playback → Reverse, or manually set Start/End frames inverted.

Mini‑Checklist

  •  

Session 11 — Final Tweaks: Shadows, Camera Limits, Texture Quality, Compression

Goal: Polish the visual feel (shadow direction), lock down camera limits, boost texture clarity, and shrink file sizes for the web.


1) Nudge Shadow Direction (Sun Light)

  1. Temporarily hide the background sphere (viewport icon) to see the light clearly.
  2. Select the Sun light.
  3. Top View (Numpad 7)G to move, R Z to rotate until the shadow falls behind the table (check with Sneak Peek).
  4. When satisfied, Save and Export Verge3D glTF.

Tip: Combine with Session 5 shadow settings (CSM Max Distance, Contact Shadows) for crisp results.


2) Camera Orbit Limits (Verge3D Settings)

  1. Select the CameraCamera Properties → Verge3D Settings.
  2. Set Min Distance = 2 and Max Distance = 4 (adjust to taste).
  3. Set Vertical Rotation Limit range, e.g., 0° to 85° (prevents diving under the ground).
  4. Save and test with Sneak Peek (you shouldn’t be able to zoom too close/far or go below the ground plane).

3) Sharper Textures (Anisotropic Filtering)

  1. Select Table_Main (or the object using your primary wood texture M_Wood_00).
  2. In Shader Editor, click the Image Texture node (e.g., named wood).
  3. In the side panel for that texture (Verge3D settings), set Anisotropic Filtering = 8× (or 4× on low‑end devices).
  4. Save and Sneak Peek to verify improved clarity at glancing angles.

4) Compress Assets (Smaller Web Downloads)

A) Export with LZMA

  1. In Render Properties → Verge3D Settings, enable LZMA Compression.
  2. File → Save, then File → Export → Verge3D glTF (overwrite scene).

B) Enable Compressed Assets in Puzzles

  1. Open Puzzles → init tab.
  2. From Initialization, add/locate configure application and enable Compressed Assets.
  3. Save and Play.

C) Verify File Sizes

  • In your app folder, note that .bin and .gltf sizes should drop significantly (e.g., from ~105 KB → ~18 KB, 28 KB → ~4 KB in the example).

5) Final Save, Export, Run

  1. Save the .blend.
  2. Export → Verge3D glTF.
  3. In App Manager, click Run to test the production‑like build.

Troubleshooting

  • Camera still goes under ground: Increase Vertical Rotation Limit lower bound (e.g., 10–15°) or adjust target point (Session 3).
  • Textures still blurry at angles: Confirm you changed the Image Texture node’s Verge3D anisotropy (not the World). Try 16× if available.
  • Compression not applied: Ensure you both enabled LZMA in Blender and Compressed Assets in Puzzles → configure application, then re‑exported.

Mini‑Checklist

  •  

Next: Publishing: package your app and deploy to GitHub Pages/Netlify (or your server) with a short README and versioned assets.

 


09 interactively change materials using puzzles


Verge3d + Blender: Interactive Table (web 3d/vr) — Step‑by‑step Student Guide

This session guides students through creating three wood material swatches in the scene for interactive selection. It covers modeling and scaling small slabs, duplicating them, applying unique wood materials with different textures, and arranging them in camera view for easy access during future interactive material switching.

 

Session 09A — Metal Material Spheres for Interaction

Goal: Create three small metal material spheres to act as interactive swatches for changing the metal stand’s material in the browser.


1) Add the First Metal Sphere (Chrome)

  1. Front View (Numpad 1)Wireframe View for positioning.
  2. Shift+A → Mesh → UV Sphere.
  3. Scale down uniformly:
    • X = 0.05, Y = 0.05, Z = 0.05.
  4. Switch to Top View and press G to move and place the sphere neatly on the floor in a visible spot.
  5. Camera View (Numpad 0)Shaded View → right-click the sphere → Shade Smooth.
  6. Rename in Outliner: Sphere → Sphere_Chrome.
  7. In Material Properties, assign the existing Chrome material (M_Chrome) created earlier.

2) Duplicate for Black Painted Sphere

  1. Select Sphere_Chrome.
  2. Shift+D to duplicate → move the copy along Y/X axes to a new location.
  3. Rename duplicate to Sphere_Black.
  4. In Material Properties, note that M_Chrome is shared — click the user count number to create a single-user copy.
  5. Rename new material: Paint_Black.
  6. Go to Shading:
    • Change Base Color → black.
    • Set Metallic = 0.1.
    • Set Roughness ≈ 0.2 (less reflective, more like painted metal).
  7. Preview in Shaded View — sphere should look black with slight roughness.

3) Duplicate for White Painted Sphere

  1. From Sphere_Black, Shift+D to duplicate → position it near the others.
  2. Rename duplicate to Sphere_White.
  3. In Material Properties, click the user count number to create a single-user copy.
  4. Rename new material: Paint_White.
  5. In Shading:
    • Change Base Color → white.
    • Keep Metallic = 0.1 and Roughness ≈ 0.2.
  6. Preview in Shaded View — sphere should appear white with slight paint finish.

4) Final Check and Save

  1. Press Numpad 0 (Camera View) to ensure all three spheres — chrome, black, and white — are visible in the shot.
  2. Adjust positions if necessary using G and R for slight tweaks.
  3. File → Save the Blender project.
  4. Click Sneak Peek to preview — confirm all three material spheres are visible with distinct finishes.

Troubleshooting

  • Spheres too large/small: Adjust Scale values to 0.03–0.06 until proportions look right.
  • Material didn’t duplicate: Ensure you click the user count number in Material Properties before editing to avoid overwriting existing materials.
  • Not smooth: Right-click → Shade Smooth on each sphere.
  • Not visible in camera: Move spheres into view or adjust the camera framing (see Session 3).

Mini‑Checklist

  •  

 

Session 8 — Metal Swatch Spheres (Chrome, Black Paint, White Paint)

Goal: Create three small metal preset spheres (Chrome / Paint‑Black / Paint‑White) the user can click later to change the stand’s material.


1) Add and Place the First Sphere (Chrome)

  1. Numpad 1 for Front View; enable Wireframe if helpful.
  2. Shift+S → Cursor to World Origin.
  3. Shift+A → Mesh → UV Sphere.
  4. In Item → Scale, set X = 0.05, Y = 0.05, Z = 0.05 (small swatch size).
  5. Right‑click → Shade Smooth.
  6. Use G (move) in Top View to position the sphere where it’s visible to the camera (near your wood slabs, but not obstructing the table).
  7. Rename in Outliner: Sphere_Chrome.
  8. In Material Properties, assign existing M_Chrome (from Session 4: Metallic=1, Roughness≈0.1).

2) Duplicate for Paint‑Black

  1. Select Sphere_ChromeShift+D to duplicate → reposition slightly.
  2. Rename to Sphere_Black.
  3. In Material Properties, click the user count number next to M_Chrome to make a single‑user copy and rename it M_Paint_Black.
  4. Open Shader Editor (Object):
    • Base Color: set to Black.
    • Metallic: 0.0–0.1 (paint, not metal).
    • Roughness: ≈ 0.2 (adjust 0.2–0.4 for sheen level).

3) Duplicate for Paint‑White

  1. Select Sphere_BlackShift+D → reposition for a neat row/triangle.
  2. Rename to Sphere_White.
  3. In Material Properties, click the user count number to make a single‑user copy again; rename to M_Paint_White.
  4. In Shader Editor (Object):
    • Base Color: White.
    • Metallic: 0.0–0.1.
    • Roughness: ≈ 0.2–0.3.

Tip: If the spheres look faceted, add a Subdivision Surface modifier (levels 1–2) for smoother swatches.


4) Camera Check & Save

  1. Numpad 0 (Camera View) to ensure all three spheres are visible and well‑spaced.
  2. File → Save.

5) Preview in Browser

  1. Click Sneak Peek.
  2. Confirm you see Chrome, Paint‑Black, and Paint‑White spheres with distinct looks.

Troubleshooting

  • Changing one sphere changes others: You didn’t create a single‑user material copy. Click the user count number beside the material before edits.
  • Too glossy/matte: Adjust Roughness (lower = shinier). For paint, keep Metallic near 0.
  • Spheres hard to see: Increase scale slightly (e.g., 0.06–0.08) or move them closer to the camera.

Mini‑Checklist

  •  

Next: Wire wood slabs and metal spheres to click events (Puzzles) to live‑swap materials on the table and stand.

 

Session 09B — Adding Interactivity with Puzzles (Material Switching)

Goal: Use Verge3D Puzzles to make the scene interactive — clicking on the metal swatch spheres changes the metal stand material, and clicking on the wood slabs changes the wood texture on the table body and drawer.


1) Prepare and Export the Scene

  1. In Blender, Save the current file.
  2. File → Export → Verge3D glTF (.gltf) → overwrite your app’s file.
  3. Open App Manager, find your interactive-table app, and click Edit Puzzles.

2) Create Metal Material Interactivity

  1. In the Puzzles editor, go to Events and drag a when clicked block.
  2. From the object list, choose Sphere_Black.
  3. From Materials, drag assign material and connect it under the event block.
  4. Set Material = M_Paint_Black, Object = Metal_Stack.
  5. Click Save, then Play to preview.
  6. Duplicate this block for the Sphere_Chrome and Sphere_White:
    • Sphere_Chrome → assign M_Chrome to Metal_Stack.
    • Sphere_White → assign M_Paint_White to Metal_Stack.
  7. Save and test again. Click each sphere in Sneak Peek to confirm materials change as expected.

3) Prepare Unique Material Names for Wood

  1. In Blender, ensure unique material names for each wooden surface:
    • Table main body → Wood_Material_00
    • Drawer → Wood_Material_00
    • Slab 1 → Wood_Material_01
    • Slab 2 → Wood_Material_02
    • Slab 3 → Wood_Material_03
  2. Save and Export again with Verge3D glTF.

4) Add Wood Texture Switching Logic

  1. In Puzzles, duplicate an existing metal interaction puzzle.
  2. Change the when clicked object to Slab_1.
  3. Remove the assign material block.
  4. From Materials, drag replace texture and connect it.
  5. Select Wood_Material_00 as the target material.
  6. In the texture path, paste the exact texture filename (e.g., wood_base_color_1.jpg).
  7. Save, Play, and test.

5) Add Logic for Other Slabs

  1. Duplicate the block for Slab_2:
    • Use Wood_Material_00 again as the target.
    • Replace texture with wood_base_color_2.jpg.
  2. Duplicate for Slab_3:
    • Replace texture with wood_base_color_3.jpg.
  3. Save and Play to test.

6) Debug and Fix Issues

  • If all objects change color simultaneously, verify unique materials are assigned in Blender.
  • Use single-user copies for each material to separate them.
  • Export again after every fix, then refresh the Puzzles editor.

7) Final Preview

  1. Save the puzzle project.
  2. Run the preview from App Manager.
  3. Click the metal spheres and wood slabs — materials should switch accurately without affecting other objects.

Troubleshooting

  • Material not switching: Double-check material names and texture paths.
  • Changes not saving: Ensure you click Save in the puzzle editor before testing.
  • Wrong textures: Ensure the texture files are correctly named and located in the app folder.

Mini‑Checklist

  •  

 

Session 9 — Interactivity with Puzzles: Metal Stand & Wood Swaps

Goal: Use Verge3D Puzzles to switch the metal stand’s finish (Chrome / Paint‑Black / Paint‑White) by clicking the metal spheres, and change the table/cupboard wood by clicking the wood slabs (three presets). No JavaScript coding required.


0) Prep: Export Before Opening Puzzles

  1. In Blender, File → Save.
  2. File → Export → Verge3D glTF → overwrite your app scene file inside the interactive-table/ folder.
  3. Open App Manager → your app → Puzzles. (Exporting ensures Puzzles “sees” your latest objects and materials.)

Naming sanity:

  • Objects (Session 6): Table_Main, Support_Bush, Metal_Stack, Drawer.
  • Wood materials:
    • Table & Drawer share M_Wood_00 (this is the one we will replace textures in).
    • Swatches: M_Wood_01, M_Wood_02, M_Wood_03 (single‑user copies).
  • Metal materials:
    • M_Chrome, M_Paint_Black, M_Paint_White.
  • Swatch objects: Slab_01/02/03, Sphere_Chrome/Sphere_Black/Sphere_White.

1) Metal Stand Switching (Assign Material)

We’ll apply materials directly to the Metal_Stack object when a sphere is clicked.

  1. In Puzzles, open Events palette → drag when object clicked.
  2. Click the object dropdown → choose Sphere_Black.
  3. From Materials palette → drag assign material and snap it under the event.
  4. Set material to M_Paint_Black and object to Metal_Stack.
  5. Save (disk icon) → Play (triangle). In the preview, click the black sphere → the stand becomes black paint.
  6. Duplicate the whole event block twice:
    • For Sphere_Chromeassign material M_Chrome to Metal_Stack.
    • For Sphere_Whiteassign material M_Paint_White to Metal_Stack.
  7. SavePlay → test all three.

Tip: If your stand is named differently (e.g., Metal_Stack vs Table_Frame), pick the exact name from the dropdown.


2) Wood Switching (Replace Texture in a Material)

We want the table body + drawer to reuse a single material (M_Wood_00) and only swap its Base Color texture when clicking each slab.

A) Ensure unique materials are set in Blender

  • Table_Main and DrawerM_Wood_00.
  • Slab_01 → M_Wood_01, Slab_02 → M_Wood_02, **Slab_03** → M_Wood_03(each a **single‑user copy** so they won’t change when we swapM_Wood_00`).
  • In M_Wood_00’s Image Texture node, make the image name simple (e.g., wood instead of wood_base_color_1.jpg).
  • Save and Export Verge3D glTF again before opening Puzzles.

B) Build the Puzzles

  1. In Puzzles, add when object clicked → choose Slab_01.
  2. From Materials, drag replace texture and attach under the event.
  3. Configure replace texture:
    • material: M_Wood_00
    • texture: wood (the Image Texture node name used inside M_Wood_00)
    • with: wood_base_color_1.jpg (enter relative filename from app folder; use the exact name)
  4. Duplicate this event twice:
    • Slab_02 → replace with: wood_base_color_2.jpg
    • Slab_03 → replace with: wood_base_color_3.jpg
  5. SavePlay → click each slab and verify the table’s wood updates.

Paths: Keep all wood textures inside the app folder (or a textures/ subfolder). Use relative paths like textures/wood_base_color_2.jpg if you made a subfolder.


3) Test the Full Flow

  • In the preview: click black/chrome/white spheres → stand updates.
  • Click wood slabs 1/2/3 → table & drawer update without affecting the swatches.

4) Save, Export, Run (Final)

  1. Back in Blender (if you changed anything), SaveExport Verge3D glTF.
  2. In App Manager, click Run (the Verge3D icon) to open the app in a browser and test outside the Puzzles preview.

Troubleshooting

  • Swatches change too: You edited a shared wood material. Make sure swatches use M_Wood_01/02/03 (single‑user copies) and the table uses M_Wood_00 only.
  • Replace texture does nothing: In the puzzle, the material must be the table’s M_Wood_00, and the texture name must match the Image Texture node’s name (e.g., wood). Also confirm the file path/filename is correct and inside your app folder.
  • Objects/materials missing in dropdowns: You didn’t Export Verge3D glTF after renaming/adding things in Blender. Save → Export → reopen Puzzles.
  • Metal stand doesn’t change: Double‑check the stand object name (e.g., Metal_Stack) and that M_Chrome / M_Paint_* exist.

Mini‑Checklist

  •  

Next: Hook the Drawer animation to a click target (3D hotspot or slab/button) using Puzzles → play animation and add optional UI buttons for presets.

 


07 slab materials


Verge3d + Blender: Interactive Table (web 3d/vr) — Step‑by‑step Student Guide

This session teaches students how to organize their Blender project by renaming objects for clarity and creating a simple keyframe animation for the table drawer. It covers inserting location keyframes to animate the drawer sliding out and disabling the auto-play option in Verge3D so the animation only triggers during interactive events in the next session.

 

Session 7 — Creating Interactive Slabs for Material Switching

Goal: Add three slabs in the scene that will be used to switch the table’s material when clicked in the browser. Each slab will have a unique wood texture applied and be positioned neatly in the scene.


1) Prepare Workspace

  1. Switch to Front View (Numpad 1) and enable Wireframe View.
  2. Make sure the 3D Cursor is set to the World Origin (Shift + S → Cursor to World Origin).

2) Create the First Slab (Slab_1)

  1. Press Shift + AMesh → Cube.
  2. Switch to Shaded View.
  3. Scale the cube:
    • X: ~0.1
    • Y: ~0.3
    • Z: ~0.01 (thin flat slab)
  4. Move it slightly above the ground plane using G → Z.
  5. Rotate slightly with the Rotate Tool to make it look naturally placed.
  6. Rename the object to Slab_1.
  7. Assign an existing wood material (M_Wood_01) to this slab in the Material Properties panel.
  8. Preview the placement in Camera View (Numpad 0) and make minor adjustments if needed.

3) Duplicate to Create Slab_2

  1. Select Slab_1, press Shift + D to duplicate, then Right-Click to confirm.
  2. Rename the new object to Slab_2.
  3. Move Slab_2 to a slightly different position using G → X/Y/Z.
  4. Ensure it appears above the floor plane; adjust height and rotation slightly for realism.
  5. In Material Properties, click the number next to the existing material to create a new unique copy.
  6. Rename the duplicated material to M_Wood_02.
  7. Open Shading, replace the texture with wood_base_color_2.jpg.

4) Duplicate to Create Slab_3

  1. Select Slab_2, press Shift + D to duplicate.
  2. Rename the new object to Slab_3.
  3. Position Slab_3 using G → X/Y/Z so that it is stacked slightly differently.
  4. In Material Properties, click the number again to make the material unique.
  5. Rename it M_Wood_03.
  6. In Shading, replace the texture with wood_base_color_3.jpg.

5) Fine-Tune Placement

  1. Use Rotate Tool to tilt the slabs randomly for a natural look.
  2. Check Front View and Top View to ensure no overlaps and that all slabs sit naturally on the ground plane.
  3. In Camera View (Numpad 0), verify visibility of all three slabs.

6) Save and Preview

  1. File → Save the project.
  2. Click Sneak Peek to open in the browser.
  3. Confirm all three slabs are visible and assigned different wood textures.

Troubleshooting

  • Slabs too large/small: Adjust X/Y/Z scale values.
  • Floating slabs: Use G → Z to align with ground.
  • Textures not updating: Ensure you duplicated the material and replaced the texture correctly.
  • Poor visibility in preview: Adjust positions to ensure all slabs are within the camera view.

Mini-Checklist

  •  

 

Session 7 — Material Swatch Slabs (Wood Presets for Table/Cupboard)

Goal: Create three visible swatch slabs in the scene, each with a distinct wood material (M_Wood_01/02/03). These will serve as clickable presets later to swap the table’s material in-browser.


1) Create the First Slab at World Origin

  1. Press 1 (Numpad) for Front View; toggle Wireframe if helpful.
  2. Shift+S → Cursor to World Origin.
  3. Shift+A → Mesh → Cube (a large cube appears at origin).
  4. In Item → Scale, set approximate slab size:
    • X = 0.10
    • Y = 0.30–0.40 (your preference)
    • Z = 0.01 (thin)
  5. G, Z to rest it on the floor if needed (Z ≈ 0 contact). Slightly rotate with R to look casual.
  6. Rename in Outliner: Cube → Slab_01.

Tip: Use Solid view to judge thickness and camera visibility.


2) Assign Wood Material 01

  1. With Slab_01 selected, open Material Properties.
  2. Choose existing M_Wood_01 (from Session 4) to reuse the node setup (Image Texture + Mapping).
  3. If scale looks off, tweak Mapping → Scale X/Y on the material (affects all users of M_Wood_01). Alternatively make a single‑user copy first (see next step) if you want unique scaling per slab.

3) Duplicate for Slab 02 and Make a New Material

  1. Shift+D to duplicate Slab_01 → position it nearby (use G X/Y/Z to place; stack or lean as desired).
  2. Rename to Slab_02.
  3. In Material Properties, click the user count number next to M_Wood_01 to make a single‑user copy.
  4. Rename the copied material to M_Wood_02.
  5. In Shader Editor (Object), on the Image Texture node, click Open and select wood_base_color_2.jpg.
  6. Adjust Mapping Scale if needed so grain density matches your taste.

4) Duplicate for Slab 03 and Make a New Material

  1. Shift+D to duplicate Slab_02 → place as a third swatch.
  2. Rename to Slab_03.
  3. In Material Properties, click the user count number again to make a single‑user copy.
  4. Rename the new material to M_Wood_03.
  5. On the Image Texture node, Open wood_base_color_3.jpg.
  6. Adjust Mapping Scale if needed.

Composition tip: Arrange slabs so all three are visible from the Camera View (Numpad 0). Use G/R to create a natural, slightly offset layout.


5) Final Placement & Camera Check

  1. Press Numpad 0 (Camera View); make sure the slabs are clearly visible and not intersecting the table.
  2. Minor tweaks: G Z to lift a slab resting on another, R for slight tilt, G X/Y to nudge.
  3. File → Save.

6) Preview in Browser

  1. Click Sneak Peek.
  2. Verify that all three slabs display three distinct wood looks.

Troubleshooting

  • All slabs change when you tweak Mapping: You’re still editing a shared material. Make a single‑user copy (click the user count) before changing mapping or textures.
  • Textures look stretched: Revisit UV/Mapping (Session 4). Increase Mapping Scale or re‑unwrap.
  • Slab not visible in camera: Reposition or adjust camera framing (Session 3) and Save.

Mini‑Checklist

  •  

Next: Create three metal swatch slabs and wire both wood + metal swatches to click events in Puzzles to change the table’s materials on demand.